Zoom & Pan 🚧

Enables zooming and panning on specific charts or axis.

Zooming is possible on the Pro versions of the charts: <LineChartPro />, <BarChartPro />, <ScatterChartPro />.

Basic usage

To enable zooming and panning, set the zoom prop to true on the chart component.

Enabling zoom will enable all the interactions, which are made to be as intuitive as possible.

The following actions are supported:

Scroll: Zoom in/out by scrolling the mouse wheel.
Drag: Pan the chart by dragging the mouse.
Pinch: Zoom in/out by pinching the chart.

<ScatterChartPro
  width={600}
  height={300}
  zoom
  series={[
    {
      label: 'Series A',
      data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
    },
    {
      label: 'Series B',
      data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
    },
  ]}
/>

<ScatterChartPro
  width={600}
  height={300}
  zoom
  series={[
    {
      label: 'Series A',
      data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
    },
    {
      label: 'Series B',
      data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
    },
  ]}
/>

Press Enter to start editing

<BarChartPro
  width={600}
  height={300}
  zoom
  series={[
    {
      label: 'Series A',
      data: data.map((v) => v.y1),
    },
    {
      label: 'Series B',
      data: data.map((v) => v.y2),
    },
  ]}
/>

<BarChartPro
  width={600}
  height={300}
  zoom
  series={[
    {
      label: 'Series A',
      data: data.map((v) => v.y1),
    },
    {
      label: 'Series B',
      data: data.map((v) => v.y2),
    },
  ]}
/>

Press Enter to start editing

<LineChartPro
  width={600}
  height={300}
  zoom
  series={[
    {
      label: 'Series A',
      data: data.map((v) => v.y1),
    },
    {
      label: 'Series B',
      data: data.map((v) => v.y2),
    },
  ]}
/>

<LineChartPro
  width={600}
  height={300}
  zoom
  series={[
    {
      label: 'Series A',
      data: data.map((v) => v.y1),
    },
    {
      label: 'Series B',
      data: data.map((v) => v.y2),
    },
  ]}
/>

Press Enter to start editing