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

import { Chart, ChartEvent } from '@antv/g2';

const chart = new Chart({
  container,
  canvas,
});

chart.data([
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
]);

chart
  .interval()
  .encode('x', 'genre')
  .encode('y', 'sold')
  .encode('color', 'genre')
  .axis({ x: { animate: false }, y: { animate: false } });

chart.on('interval:click', (e) => {
  console.log(e.data.data); // Display clicked data
});

chart.on('element:click', (e) => {
  console.log(e.data.data); // Display clicked data
});

chart.render();

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);
});

G2 currently provides the following lifecycle events:

• Before rendering: Refers to G2 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 G2 completing all drawing operations, but animation may exist. After the animation ends, the chart is truly rendered.
• After rendering: Refers to G2 completing all drawing operations, including animation.
• After cleaning the canvas: The chart in the container has been cleaned up, but the G2 instance still exists and can continue to be used.
• After destroying the canvas: The G2 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);
});

// For example, listen to the click event of the bar in the bar chart
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.

chart.interval().style('draggable', true).style('droppable', true);

Typical cases

For details, see Interaction - Events Examples