Plugin

AntV

Search…

Installation

Getting Started

Data

Understanding F2 charts

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

Contributing

Interaction

Last modified 3yr ago

Copy link

Contents

How to use plugins

Unregister plugins

Clear plugins

Get registered plugins

How to define plugin

Available hooks