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

How to use plugins

    1.
    Global registeration for plugins
    1
    const plugin1 = { /* plugin implementation */ };
    2
    const plugin2 = { /* plugin implementation */ };
    3
    // Global registeration, plugin will be registered to all the chart plugins
    4
    Chart.plugins.register(plugin1);
    5
    // Global registeration for multiple plug-in
    6
    Chart.plugins.register([ plugin1, plugin2 ]);
    Copied!
    2.
    Register for a chart instance
    1
    const plugin1 = { /* plugin implementation */ };
    2
    const plugin2 = { /* plugin implementation */ };
    3
    4
    // chart1 use "plugin1"
    5
    const chart1 = new Chart({
    6
    plugins: plugin1
    7
    );
    8
    // chart2 use "plugin2"
    9
    const chart2 = new Chart({
    10
    plugins: plugin2
    11
    );
    12
    // chart3 doesn't use "plugin"
    13
    const chart3 = new Chart({});
    Copied!

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.
1
const plugin = {
2
init(chart) {
3
// do something when initialize the chart
4
}
5
};
Copied!

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
Last modified 3yr ago