Chartjs-Adding responsive text inside chart in Charts Js

by

1👍

✅

If I use your sample chart as a template, this can be done with the following code.

Chart.pluginService.register({
    beforeDraw: (chart) => {
        let ctx = chart.chart.ctx;
        ctx.save();
        
        let fontSize = (chart.chart.height / 75).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = "middle";                
        let text = chart.data.datasets[0].data[0] + '%';
        let textX = Math.round((chart.chart.width - ctx.measureText(text).width) / 2);
        let textY = chart.chart.height / 2.25;
        ctx.fillText(text, textX, textY);
        
        fontSize = (chart.chart.height / 124).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = "middle";                
        text = chart.data.labels[0];
        textX = Math.round((chart.chart.width - ctx.measureText(text).width) / 2);
        textY = chart.chart.height / 1.6;
        ctx.fillText(text, textX, textY);
                
        ctx.restore();
    }
});

var config = {
    type: 'doughnut',
    data: {
        labels: ["Prepaid", "Others"],
        datasets: [{
            data: [90.8, 9.2],
            backgroundColor: ["yellow", "white" ]
        }]
    },
    options: {
        legend: {
            display: false
        },
        tooltips: {
            enabled: false
        },
        cutoutPercentage: 80,
        aspectRatio: 5,
        rotation: 70
    }
};

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"> </canvas>

Leave a comment