Ant Design Charts exposes some events to get the chart life cycle and interaction information. Ant Design Charts exports a ChartEvent type, used to define the type of event.

null;

Life cycle events

If you want to get the life cycle information of the chart, you can do the following:

chart.on(ChartEvent.AFTER_RENDER, (ev) => {
  console.log(ev);
});

Ant Design Charts currently provides the following lifecycle events:

• Before rendering: Refers to Ant Design Charts starting to process data, perform layout, drawing graphics and other operations.
• Before drawing: Refers to the completion of data processing, layout, graphics drawing and other operations, but has not yet been drawn.
• After drawing: Refers to Ant Design Charts completing all drawing operations, but animation may exist. After the animation ends, the chart is truly rendered.
• After rendering: Refers to Ant Design Charts completing all drawing operations, including animation.
• After cleaning the canvas: The chart in the container has been cleaned up, but the Ant Design Charts instance still exists and can continue to be used.
• After destroying the canvas: The Ant Design Charts instance has been destroyed and can no longer be used.

Interaction events

If you want to get the interactive information of the chart, you can do the following:

• Monitor the global element event

chart.on(`element:${ChartEvent.EventType}`, (ev) => {
  console.log(ev);
});

• Monitor specified element event

chart.on(`${markType}:${ChartEvent.EventType}`, (ev) => {
  console.log(ev);
});

chart.on(`interval:${ChartEvent.CLICK}`, (ev) => {
  console.log(ev);
});

• Listen to plot area events

chart.on('plot:click', (event) => console.log(event));

• Listen to global component events

chart.on('component:click', (event) => console.log(event));

• Listen to global label events

chart.on('label:click', (event) => console.log(event));

Click event

Pointer event

Drag event

If you want to listen to drag events, you need to set the draggable and droppable properties.

{
  "style": {
    "droppable": true,
    "draggable": true
  }
}