Skip to content
+

Charts - Zooming and panning

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


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.
56780100200300400500
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.

ETAOINSHRDLCUMWFGYPBVKJXQZ0%5%10%15%
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.