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

API

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