Chart defaults are global instead of chart specific

[dannyBies]

I have a page with multiple charts, I want to use this plugin with one specific chart and not with the others. Because the defaults are global my other charts are still using the plugin.
I fill the options with this plugin's configuration for one chart and not the others, the datalabels still show up on all my charts.

A workaround is to set Chart.defaults.global.plugins.datalabels.display = false; so it doesn't show the values. I'd like a cleaner options so I can set this chart specific, is this possible?

[simonbrunel]

Unfortunately it's not as straightforward as it should. I think the cleanest solution would be to globally unregister the plugin and add it locally to some charts:

// search for the datalabels plugin
var datalabels = Chart.plugins.getAll().filter(function(p) {
  return p.id === 'datalabels';
})[0];

// globally unregister the plugin
Chart.plugins.unregister(datalabels);

var chart = new Chart('chart-id', {
  type: 'line',
  data: { ... },
  options: {
    plugins: {
      datalabels: {
         // plugin options ...
      }
    }
  },
  plugins: [
    datalabels  //< this will add the plugin locally
  ]
});

Another solution would be to disable the plugin globally with Chart.defaults.global.plugins.datalabels = false, however you will lose the plugin defaults, meaning you will need to set all options in your specific chart (you can still backup these values first and merge them to your custom options):

// backup plugin defaults
var datalabels_defaults = Chart.defaults.global.plugins.datalabels;

// disable the plugin for all charts
Chart.defaults.global.plugins.datalabels = false;

var chart = new Chart('chart-id', {
  type: 'line',
  data: { ... },
  options: {
    plugins: {
      datalabels: Chart.helpers.merge({}, [datalabels_defaults, {
         // plugin options ...
      }])
    }
  }
});

Finally, Chart.defaults.global.plugins.datalabels.display = false; is not that bad since this plugin will skip lot of computation if display is false.

[dannyBies]

I decided to go with your first solution, thanks for the quick reply!

[asifmai]

I have been trying to find out a way to achieve what you are looking for.. I got settled on this very simple solution.. You need to turn off the plugin for the chart which you want labels on like this:

options: { plugins: { labels: false } }

[eimit]

I have been trying to find out a way to achieve what you are looking for.. I got settled on this very simple solution.. You need to turn off the plugin for the chart which you want labels on like this:

options: { plugins: { labels: false } }
Worked like a charm!

[TheJey]

For anyone looking for the solution, i think there is a little typo, what worked for me was
options: { plugins: { datalabels: false } }

[SermadNajar]

// search for the datalabels plugin
var datalabels = Chart.plugins.getAll().filter(function(p) {
  return p.id === 'datalabels';
})[0];

// globally unregister the plugin
Chart.plugins.unregister(datalabels);

This sadly doesn't work for me.