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 wanted axis.

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}
  xAxis={[
    {
      zoom: true,
    },
  ]}
  yAxis={[
    {
      zoom: true,
    },
  ]}
  series={series}
/>

<ScatterChartPro
  width={600}
  height={300}
  xAxis={[
    {
      zoom: true,
    },
  ]}
  yAxis={[
    {
      zoom: true,
    },
  ]}
  series={series}
/>

Press Enter to start editing

<BarChartPro
  width={600}
  height={300}
  xAxis={[
    {
      scaleType: 'band',
      data: data.map((v, i) => i),
      zoom: true,
    },
  ]}
  series={series}
/>

<BarChartPro
  width={600}
  height={300}
  xAxis={[
    {
      scaleType: 'band',
      data: data.map((v, i) => i),
      zoom: true,
    },
  ]}
  series={series}
/>

Press Enter to start editing

<LineChartPro
  width={600}
  height={300}
  xAxis={[
    {
      zoom: true,
      scaleType: 'point',
      data: data.map((v, i) => i),
    },
  ]}
  series={series}
/>

<LineChartPro
  width={600}
  height={300}
  xAxis={[
    {
      zoom: true,
      scaleType: 'point',
      data: data.map((v, i) => i),
    },
  ]}
  series={series}
/>

Press Enter to start editing

Zooming options

You can customize the zooming behavior by setting the zoomOptions prop.

The following options are available:

minStart: The starting percentage of the axis range. Between 0 and 100.
maxEnd: The ending percentage of the zoom range.
step: The step of the zooming function. Defines the granularity of the zoom.
minSpan: Restricts the minimum span size.
maxSpan: Restricts the maximum span size.
panning: Enables or disables panning.

import { BarChart } from '@mui/x-charts/BarChart';

<BarChart
  // ...
  xAxis={[
    {
      // ...
      zoom: {
        minStart: 0,
        maxEnd: 100,
        minSpan: 10,
        maxSpan: 100,
        step: 5,
        panning: true,
      }
    }
  ]}
/>

Playground

panning

minStart

maxEnd

minSpan

maxSpan

step

Controlled zoom

You can control the zoom state by setting the zoom and onZoomChange props. This way, you can control the zoom state from outside the chart.

The onZoomChange prop is a function that receives the new zoom state.

While the zoom prop is an array of objects that define the zoom state for each axis with zoom enabled.

axisId: The id of the axis to control.
start: The starting percentage of the axis range.
end: The ending percentage of the zoom range.

<Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
  Reset zoom
</Button>
<LineChartPro
  {...chartProps}
  zoom={zoom}
  onZoomChange={setZoom}
  xAxis={[
    {
      zoom: true,
      scaleType: 'point',
      id: 'my-x-axis',
      data: data.map((v, i) => i),
    },
  ]}
/>

<Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
  Reset zoom
</Button>
<LineChartPro
  {...chartProps}
  zoom={zoom}
  onZoomChange={setZoom}
  xAxis={[
    {
      zoom: true,
      scaleType: 'point',
      id: 'my-x-axis',
      data: data.map((v, i) => i),
    },
  ]}
/>

Press Enter to start editing

Zoom filtering

You can make the zoom of an axis affect one or more axes extremums by setting the zoom.filterMode prop on the axis config.

If zoom.filterMode is set to "discard" the data points outside the visible range of this axis are filtered out and the other axes will modify their zoom range to fit the visible ones.
If zoom.filterMode is set to "keep" (default) the data points outside the visible range are kept. Then, other axes will not be impacted.

See how the secondary axis adapts to the visible part of the primary axis in the following example.

<BarChartPro
  dataset={dataset}
  xAxis={[
    {
      scaleType: 'band',
      dataKey: 'letter',
      zoom: { filterMode: 'discard' },
    },
  ]}
  yAxis={[{ valueFormatter }]}
  series={[{ label: 'Letter Frequency', dataKey: 'frequency', valueFormatter }]}
  {...chartProps}
/>

<BarChartPro
  dataset={dataset}
  xAxis={[
    {
      scaleType: 'band',
      dataKey: 'letter',
      zoom: { filterMode: 'discard' },
    },
  ]}
  yAxis={[{ valueFormatter }]}
  series={[{ label: 'Letter Frequency', dataKey: 'frequency', valueFormatter }]}
  {...chartProps}
/>

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.