# Events

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

Source: https://82chart.com/en/docs/events/

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

```js
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

```js
{
  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',
}
```