G2 exposes various events to capture chart lifecycle and interaction information. G2 exports a ChartEvent type that defines the event types.

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

Lifecycle Events

To capture chart lifecycle information, you can use the following approach:

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

G2 currently provides the following lifecycle events:

• Before rendering: When G2 starts processing data, performing layout, and drawing graphics.
• Before painting: When data processing, layout, and graphics operations are complete but painting hasn't started.
• After painting: When G2 completes all painting operations, but animations may still be running. The chart is fully rendered when animations finish.
• After rendering: When G2 completes all painting operations, including animations.
• After clearing canvas: The chart in the container has been cleared, but the G2 instance still exists and can be reused.
• After destroying canvas: The G2 instance has been destroyed and cannot be used anymore.

Interaction Events

To capture chart interaction information, you can use the following approaches:

• Listen to global element events

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

• Listen to specific element events

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

// For example, listen to click events on bars in a 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 Events

Pointer Events

Drag Events

To listen to drag events, you need to set the draggable and droppable properties:

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

Examples

For detailed examples, see Interaction - Events Examples