Chartjs-How to put text inside a doughnut chart using react-chartjs-2.js?

by

0👍

const plugins = [{
        beforeDraw: function(chart) {
            var width = chart.width,
                height = chart.height,
                ctx = chart.ctx;
            ctx.restore();
            var fontSize = (height / 160).toFixed(2);
            ctx.font = fontSize + 'em sans-serif';
            ctx.textBaseline = 'top';

            // Draw "Total" on the first line
            var text1 = 'Total';
            var textX1 = Math.round((width - ctx.measureText(text1).width) / 2);
            var textY1 = height / 2.5;
            ctx.fillText(text1, textX1, textY1);

            // Draw the number on the second line
            var text2 = totalStatusCountRef.current;
            var textX2 = Math.round((width - ctx.measureText(text2).width) / 2);
            var textY2 = height / 1.9;
            ctx.fillText(text2, textX2, textY2);

            ctx.save();
        }
    }];
     <Doughnut data={doughnutChart} options={optionsDoughnut} plugins={plugins} />

Leave a comment