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. It will work with all your charts because this is registered globally. If you want to disable this functionality for particular chart, you can disable plugin.

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 fontsize, font 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);
};

Only for specific chart

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) {
            //..
        }
    }]
});

The above plugin hook will work for the specific chart so if you need to show the center text in only one doughnut chart you can write code as above.

Author: Hirendra Sisodiya

Programmer at PSPL. Can be found on Google Plus.