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
const plugin1 = { /* plugin implementation */ };
const plugin2 = { /* plugin implementation */ };
// Global registeration, plugin will be registered to all the chart plugins
Chart.plugins.register(plugin1); 
// Global registeration for multiple plug-in
Chart.plugins.register([ plugin1, plugin2 ]);
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

Contributing

Interaction

Last modified 4yr ago

Copy link

Outline

How to use plugins

Unregister plugins

Clear plugins

Get registered plugins

How to define plugin

Available hooks