Docs › Interaction and export

Zoom and pan

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

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.

Live example

Click the chart or move through it with the keyboard.

Code for this example

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.