Users can zoom and pan (scroll) the React Chart. These actions change the chart’s viewport. Mouse and touch gestures are supported.
Import the ZoomAndPan plugin and add it to the
Chart component to enable zooming and panning.
Note that the plugin order is important.
In uncontrolled mode, add the
ZoomAndPan plugin to the
In the controlled mode, pass the viewport’s boundaries to the
viewport property and handle the
onViewportChange event to control zoom and pan.
interactionWithValues properties to enable zooming and/or panning for individual scales.
Users can drag the mouse across an area while pressing the
zoomRegionKey to zoom this area. Zooming is applied when the mouse button is released.