score:2

Accepted answer

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

score: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/


Related Query

More Query from same tag