# 확대와 이동

> 드래그·휠·핀치로 구간 확대, 더블클릭으로 원래대로. 무료.

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

`zoom: true` 를 주면 선·영역·세로 막대·산점도의 x 범위를 확대할 수 있습니다. 다른 라이브러리에서 유료 등급에 있는 기능입니다. 아래 차트에서 마우스로 구간을 끌어 보세요.

```js
const chart = createChart('#chart', {
  type: 'area',
  title: '10월 방문',
  zoom: true,
  data: {
    labels: ['1일', '2일', '3일', '4일', '5일', '6일', '7일', '8일', '9일', '10일', '11일', '12일', '13일', '14일', '15일', '16일', '17일', '18일', '19일', '20일', '21일'],
    series: [
      { name: '방문자', data: [1820, 2140, 1990, 2410, 2290, 1650, 1580, 2010, 2380, 2550, 2470, 2620, 1910, 1840, 2230, 2680, 2810, 2740, 2950, 2100, 2060] },
      { name: '가입', data: [120, 156, 131, 188, 171, 98, 92, 140, 176, 205, 190, 214, 121, 117, 163, 221, 240, 228, 262, 141, 136] },
    ],
  },
});
chart.on('zoom', (e) => log(e ?? '원래 크기'));
```

| 동작 | 마우스 | 터치 | 키보드 |
| --- | --- | --- | --- |
| 구간 확대 | 끌어서 범위 고르기 | 두 손가락 벌리기 | `+` |
| 축소 | Ctrl(⌘)+휠 | 두 손가락 오므리기 | `-` |
| 옆으로 이동 | Shift+끌기, 가로 휠, Shift+휠 | 확대한 뒤 한 손가락으로 끌기 | 끝에서 `←`/`→` |
| 원래대로 | 더블클릭, "원래 크기로" 단추, ⋯ 메뉴 | "원래 크기로" 단추 | `0` |

- 그냥 휠은 페이지 스크롤을 막지 않습니다. 확대는 Ctrl(⌘)과 함께일 때만입니다.
- 확대 범위는 `zoom` 이벤트로 `{ start, end }`(x 인덱스), 원래대로 돌아오면 `null` 이 옵니다.
- 코드로 되돌리기: `chart.resetZoom()`. 데이터나 종류를 바꾸면 확대는 풀립니다.
- x 값이 3개 이상일 때만 동작하고, 가로 막대에서는 꺼집니다.