Docs › Reference

Events

click, hover, legendclick, zoom, ready, render and destroy.

Listen with chart.on(name, fn) and stop with chart.off(name, fn). Hover or click the chart below.

Live example

Click the chart or move through it with the keyboard.

Code for this example

const chart = createChart('#chart', {
  type: 'bar',
  title: 'Orders by weekday',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [{ name: 'Orders', data: [61, 70, 66, 74, 92] }],
  },
});
chart.on('click', (p) => log({ click: p.x, y: p.y, series: p.seriesName }));
chart.on('hover', (p) => p && log('hover ' + p.x));

Event	Payload	When
`click`	`ChartPoint`	A point, bar or slice is clicked or Enter is pressed (same as the `onClick` option)
`hover`	`ChartPoint \| null`	The pointer moves to another item; null when it leaves
`legendclick`	`{ seriesIndex, visible }`	A legend item toggles a series
`zoom`	`{ start, end } \| null`	The zoom range changes (x indexes)
`ready`	`Chart`	Once after creation (same as `onReady`)
`render`	`Chart`	Every redraw
`destroy`	-	On `destroy()`

ChartPoint

{
  seriesIndex: 0,
  seriesName: 'Orders',
  index: 4,          // position on x
  x: 'Fri',           // label, number or date
  y: 92,
  percent?: 31.5,     // share for pies, donuts and 100% stacks
  color: '#3182f6',
}