# 이벤트

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

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

`chart.on(이름, 함수)` 로 받고 `chart.off(이름, 함수)` 로 뗍니다. 아래 차트에 마우스를 올리거나 눌러 보세요.

```js
const chart = createChart('#chart', {
  type: 'bar',
  title: '요일별 주문',
  unit: '건',
  data: {
    labels: ['월', '화', '수', '목', '금'],
    series: [{ name: '주문', 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));
```

| 이벤트 | 받는 값 | 언제 |
| --- | --- | --- |
| `click` | `ChartPoint` | 점·막대·조각을 누르거나 Enter (옵션 `onClick` 과 같음) |
| `hover` | `ChartPoint \| null` | 마우스가 옮겨 갈 때, 벗어나면 null |
| `legendclick` | `{ seriesIndex, visible }` | 범례로 켜고 끌 때 |
| `zoom` | `{ start, end } \| null` | 확대 범위가 바뀔 때 (x 인덱스) |
| `ready` | `Chart` | 만든 직후 한 번 (옵션 `onReady` 와 같음) |
| `render` | `Chart` | 다시 그릴 때마다 |
| `destroy` | - | `destroy()` 할 때 |

## ChartPoint

```js
{
  seriesIndex: 0,
  seriesName: '주문',
  index: 4,          // x 순서
  x: '금',            // 라벨, 숫자 또는 날짜
  y: 92,
  percent?: 31.5,     // 파이·도넛·100% 누적일 때 비율
  color: '#3182f6',
}
```