OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to add text inside the doughnut chart using Chart.js?

  • Thread starter Thread starter shashisp
  • Start date Start date
To render text inside a doughnut chart using Chart.js, you can use the plugins option provided by Chart.js along with the afterDraw hook to manually draw text inside the chart. Here's a step-by-step approach to achieve this:

  1. Include Chart.js: Make sure you have included Chart.js in your project. You can include it via CDN or download it locally.
  2. Setup HTML: Create an HTML <canvas> element where you want to render the doughnut chart. Give it an id for easy reference.

Code:
<canvas id="myDoughnutChart" width="400" height="400"></canvas>

Initialize Chart.js: Initialize the doughnut chart using JavaScript. Specify your data and options, including the plugins configuration for custom text rendering.
Code:
// Data for the doughnut chart
var data = {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
        data: [300, 50, 100],
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
        hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }]
};

// Options for the doughnut chart
var options = {
    responsive: true,
    plugins: {
        // Plugin to render text inside the doughnut segments
        afterDraw: function(chart) {
            var width = chart.width,
                height = chart.height,
                ctx = chart.ctx;

            ctx.restore();
            var fontSize = (height / 114).toFixed(2);
            ctx.font = fontSize + "em sans-serif";
            ctx.textBaseline = "middle";

            var text = "75%", // Your text to display, can be dynamic based on data
                textX = Math.round((width - ctx.measureText(text).width) / 2),
                textY = height / 2;

            ctx.fillText(text, textX, textY);
            ctx.save();
        }
    }
};

// Get the canvas element
var ctx = document.getElementById("myDoughnutChart").getContext("2d");

// Create the doughnut chart
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: options
});
  1. Customize Text Rendering: Modify the afterDraw function within the plugins option to suit your text rendering needs. You can calculate the position and content of the text dynamically based on your data or other criteria.
    • ctx.fillText(text, textX, textY); is used to render the text inside the doughnut chart.
    • Adjust fontSize, textX, and textY based on your chart dimensions and desired positioning.
  2. Further Customization: You can further customize the text styling, positioning, and content based on your application's requirements. Ensure to test and adjust as needed to achieve the desired result.
This approach allows you to manually draw text inside the doughnut chart using Chart.js's plugin system, providing flexibility in displaying additional information directly within the chart visualization.
 
Top