# Zoom and pan

> Drag, wheel or pinch to zoom; double-click to reset. Free.

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

`zoom: true` lets readers zoom the x range of line, area, vertical bar and scatter charts, a paid-tier feature elsewhere. Drag across the chart below.

```js
const chart = createChart('#chart', {
  type: 'area',
  title: 'October visits',
  zoom: true,
  data: {
    labels: ['Oct 1', 'Oct 2', 'Oct 3', 'Oct 4', 'Oct 5', 'Oct 6', 'Oct 7', 'Oct 8', 'Oct 9', 'Oct 10', 'Oct 11', 'Oct 12', 'Oct 13', 'Oct 14', 'Oct 15', 'Oct 16', 'Oct 17', 'Oct 18', 'Oct 19', 'Oct 20', 'Oct 21'],
    series: [
      { name: 'Visitors', data: [1820, 2140, 1990, 2410, 2290, 1650, 1580, 2010, 2380, 2550, 2470, 2620, 1910, 1840, 2230, 2680, 2810, 2740, 2950, 2100, 2060] },
      { name: 'Sign-ups', 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 ?? 'reset'));
```

| Action | Mouse | Touch | Keyboard |
| --- | --- | --- | --- |
| Zoom in | Drag to select a range | Pinch out | `+` |
| Zoom out | Ctrl (⌘) + wheel | Pinch in | `-` |
| Pan | Shift-drag, horizontal wheel, Shift + wheel | Drag with one finger once zoomed | `←`/`→` at the edge |
| Reset | Double-click, the Reset zoom button, the ⋯ menu | Reset zoom button | `0` |

- A plain wheel never blocks page scrolling; zooming needs Ctrl (⌘).
- The `zoom` event carries `{ start, end }` (x indexes), or `null` on reset.
- Reset from code with `chart.resetZoom()`. New data or a new type resets the zoom.
- It needs at least three x values and is off for horizontal bars.