Plugins

Plugins can be shared between chart instances:

Plugins can also be defined directly in the chart config (a.k.a. inline plugins):

WARNING

inline plugins are not registered. Some plugins require registering, i.e. can’t be used inline.

var chart = new Chart(ctx, {
    plugins: [{
        beforeInit: function(chart, args, options) {
        }
    }]
});

However, this approach is not ideal when the customization needs to apply to many charts.

Plugins can be registered globally to be applied on all charts (a.k.a. global plugins):

inline plugins can’t be registered globally.

Plugins must define a unique id in order to be configurable.

This id should follow the npm package name convention (opens new window):

can’t start with a dot or an underscore
can’t contain any non-URL-safe characters
can’t contain uppercase letters
should be something short, but also reasonably descriptive

If a plugin is intended to be released publicly, you may want to check the to see if there’s something by that name already. Note that in this case, the package name should be prefixed by chartjs-plugin- to appear in Chart.js plugin registry.

Plugin options are located under the options.plugins config and are scoped by the plugin ID: options.plugins.{plugin-id}.

var chart = new Chart(ctx, {
        foo: { ... },           // chart 'foo' option
        plugins: {
            p1: {
                foo: { ... },   // p1 plugin 'foo' option
            },
            p2: {
                foo: { ... },   // p2 plugin 'foo' option
                bla: { ... }
            }
        }
});

Disable plugins

To disable a global plugin for a specific chart instance, the plugin options must be set to false:

var chart = new Chart(ctx, {
    options: {
        plugins: false // all plugins are disabled for this instance
    }
});