Chartjs-ChartJS number shows up on top of number

by

2šŸ‘

āœ…

Change the following line of code in your plugin :

var text = 60;

to this :

var text = chart.id == 0 ? 60 : 40;

basically, when a chart is created, it is assigned an id (0 based). so you need to set the text based on that chart-id.

also, thereĀ­ā€˜s no need to add two separate plugins, as you are creating a global plugin, which will be applied to all of your charts.

Here is the working example on JSFiddle

0šŸ‘

use only one ā€œchart.pluginService.registerā€ for all charts, because it subscribes to the chart class, so mychart and mychart2 belong to chart class, then donā€™t use the callback ā€œchartā€ā€¦ use mychart and mychart2 instead of callback to recognize each chart registered.

new code:

var charts = [{
            current: myChart
              , text: 60
              }, {
            current: myChart2
              , text: 40
              }];

Chart.pluginService.register({
    beforeDraw: function(chart) {
            for (var iterator of charts) {
                var width = iterator.current.chart.width,
                    height = iterator.current.chart.height,
                    ctx = iterator.current.chart.ctx;
                    //ctx.clearRect(0, 0, width, height);
                        //ctx.restore(); dont clear, this delete the previous chart, drawing only text
                var fontSize = (height / 114).toFixed(2);
                ctx.font = fontSize + "em lato";
                ctx.fillStyle = "rgba(0,0,0, 0.85)"
                ctx.textBaseline = "middle";
                var text = iterator.text,
                            textX = Math.round((width - ctx.measureText(text).width) / 2),
                            textY = height / 2.5;
                ctx.fillText(text, textX, textY);
                ctx.save();
        }
    }
});

updated jsfiddle: https://jsfiddle.net/4uw1ksu1/2/

Leave a comment