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

There are different JavaScript charting frameworks available. The chart.js is one of them. The chart.js is the canvas based and has the Great rendering performance across all modern browsers (IE9+). It provides 8 type of different chart style you can find all the help and documentation on the chartJS documentation.

In this article I will demonstrates that how can you use the pluginServices to display the text in the center of the doughnut chart. Pie and doughnut charts are probably the most commonly used charts. Sometimes you would like to create a doughnut chart with a label in the center of it.

Start with the simple html which contains the canvas element:

    <div id="canvas-holder" style="width:40%">
        <canvas id="chart-area" width="533" height="266" class="my-chart">
         </canvas>
    </div>
     <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
 
        .my-chart {
            display: block;
            width: 533px;
            height: 266px;
        }
    </style>
donut chart with centered text
donut chart with centered text

This is the configuration settings for doughnut chart:

var config = {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [
                50, 60, 100, 30, 40
            ],
            backgroundColor: [
                window.chartColors.red,
                window.chartColors.orange,
                window.chartColors.yellow,
                window.chartColors.green,
                window.chartColors.blue,
            ],
        }],
        labels: [
            "Red",
            "Orange",
            "Yellow",
            "Green",
             "Blue"
        ]
    },
    options: {
        responsive: true,
        legend: {
            display: false,
        }
    },
    centerText: {
        display: true,
        text: "280"
    }
};

In the above we have added ‘centerText’ property along with its sub properties of the chart options which is just the custom property. You can assign the ‘text’ that you need to add in the middle of the chart in the centeText.text property. Above we are assigning static value but you can configure it at run time. You can see the use of this in the below.

We are using ‘beforeDraw’ hook with the help of ‘pluginService.register’ method to draw the text in the center.
The ‘drawTotals’ is the method that contains the code for displaying text. We can say ‘drawTotals’ method is the plugin implementation of the ‘beforeDraw’.

In the ‘drawTotals’ method you can specify the font size, font-family and textBaseline of the text.

 
Chart.Chart.pluginService.register({
    beforeDraw: function(chart) {
        if (chart.config.centerText.display !== null &&
            typeof chart.config.centerText.display !== 'undefined' &&
            chart.config.centerText.display) {
            drawTotals(chart);
        }
    },
});
 
function drawTotals(chart) {
 
    var width = chart.chart.width,
    height = chart.chart.height,
    ctx = chart.chart.ctx;
 
    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";
 
    var text = chart.config.centerText.text,
    textX = Math.round((width - ctx.measureText(text).width) / 2),
    textY = height / 2;
 
    ctx.fillText(text, textX, textY);
    ctx.save();
}
 
window.onload = function() {
    var ctx = document.getElementById("chart-area").getContext("2d");
    window.myDoughnut = new Chart(ctx, config);
};

Plugins are the most efficient way to customize or change the default behavior of a chart and can be registered globally to be applied on all charts. If you want to use plugin only for one chart you can write the code as below:

var chart = new Chart(ctx, {
    plugins: [{
        beforeDraw: function(chart, options) {
            //..
        }
    }]
});