Plugins are the most efficient way to customize or change the default behavior of a chart.

How to use plugins

  1. 1.
    Global registeration for plugins
    const plugin1 = { /* plugin implementation */ };
    const plugin2 = { /* plugin implementation */ };
    // Global registeration, plugin will be registered to all the chart plugins
    // Global registeration for multiple plug-in
    Chart.plugins.register([ plugin1, plugin2 ]);
  2. 2.
    Register for a chart instance
    const plugin1 = { /* plugin implementation */ };
    const plugin2 = { /* plugin implementation */ };
    // chart1 use "plugin1"
    const chart1 = new Chart({
    plugins: plugin1
    // chart2 use "plugin2"
    const chart2 = new Chart({
    plugins: plugin2
    // chart3 doesn't use "plugin"
    const chart3 = new Chart({});

Unregister plugins

Use Chart.plugins.unregister(plugins) to unregister a plug-in.

Clear plugins

Use Chart.plugins.clear() to clear all the plugins.

Get registered plugins

Use Chart.plugins.getAll() to get all successfully registered plug-ins.

How to define plugin

The implementation of a plugin is very simple, all you need to do is define the behaviors of the plugin during the life circle of the chart.
const plugin = {
init(chart) {
// do something when initialize the chart

Available hooks

  • init: After initialization of the chart
  • beforeGeomDraw: Before drawing the geometry
  • afterGeomDraw: After drawing the geometry
  • beforeCanvasDraw: before drawing the canvas
  • clear: Clear the chart, remove geometry
  • clearInner: Clear the layers
  • repaint: Redraw