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 of the chart options which is just the custom property. 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’

 
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);
};