score:15

Accepted answer

i think a solution is to assign a specific property in your chart options for each plugin. each chart will fill a different attribute to use each plugin. in your case, you have plugin1 and plugin2.

then, in each definition you will check for different attributes to see if that chart is using that plugin or not. for example, your definitions will be something like:

chart.pluginservice.register({
  afterdraw: function(chart) {
    if (chart.config.options.plugin_one_attribute) {
      // plugin code here...  
    }
  }
});

to use this plugin, your chart will have to fill the plugin_one_attribute, in its options. like this:

optionsusingplugin1 = {
  plugin_one_attribute: // your variable to be used in the plugin goes here!
  responsive: true,      
  maintainaspectratio: true,
  title: {
    display: true
  } 
  // and any other config options you are already using
}

and use this when creating your chart:

var mybar = new chart(ctx, {
  type: 'bar',
  data: data,
  options: optionsusingplugin1
});

so, in order to use plugin2, your mybar2 chart will need a specific attribute for plugin2 (which will check for it when registering). this way you can control which plugins will be active in each chart.

hope that helps!

score:4

currently chartjs v2.9.4, from the chartjs documentation, if you have multiple charts, each chart's plugin can be defined in the chart's config, like this:

var ctx = document.getelementbyid("mychart").getcontext('2d');
var chart = new chart(ctx, {
    type: 'line',
    plugins: [{ //plugin added for this chart
        beforeinit: function(chart, options) {
            //add statements here
        }
   }],
   options: {
      responsive: true, // instruct chartjs to respond nicely.
      maintainaspectratio: false
   },
   // and any other config options as you wish
});

Related Query

More Query from same tag