Skip to content
+

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.
0501001502002503003504000100200300400500
Press Enter to start editing
0123456789101112131415161718192021220100200300400500
Press Enter to start editing
0123456789101112131415161718192021220100200300400500
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


API

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