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 Chart
component.
In the controlled mode, pass the viewport's boundaries to the ZoomAndPan
plugin's viewport
property and handle the onViewportChange
event to control zoom and pan.
Use the interactionWithArguments
and 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.