[Chartjs]-ChartsJS make number in middle for only one chart

by

2👍

✅

Not too familiar with chart.js but looks like you can leverage the options object. In the plugin code, you can look for an option like isNumberShown and add the text depending on the boolean value. Then you just provide the property in each instance.

Example: https://jsfiddle.net/28j9tgcc/

1👍

You could create another variable inside of the options of each chart that could be checked inside of your plugin function. Then add the text based on that extra option variable.

Option in chart:

 options: {
    chartExtraOption: 1,

The if statement in plugin:

Chart.pluginService.register({
beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.clearRect(0, 0, width, height);
    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em lato";
    ctx.fillStyle = "rgba(0,0,0, 0.85)"
    ctx.textBaseline = "middle";

            if (chart.config.options.chartExtraOption == 1) {
                var textX = Math.round((width-ctx.measureText(text).width)/1.1),
        textY = height / 2.5,
        text = 60;
            ctx.fillText(text, textX, textY);
        ctx.save();
        }
    else{
            var textX = Math.round((width-ctx.measureText(text).width)/1.1),
        textY = height / 2.5,
        text = 40;
            ctx.fillText(text, textX, textY);
        ctx.save();
    }
}
});

Here is the changed fiddler you had:
https://jsfiddle.net/bozhfmq6/1/

Leave a comment