DevExtreme React Chart - Zoom and Pan (v19.1)

DevExtreme Team Blog
22 July 2019

Our React Chart is getting better all the time! In v19.1 we added interactive features that allow users to zoom and pan the chart content with the mouse or with touch gestures.

Chart Zoom and Pan

To activate the new functionality, simply add the ZoomAndPan plugin to the component. You can also use the plugin in controlled mode by setting its viewport and onViewportChange properties.

To control the dimensions for the zoom and pan operations, there are two properties interactionWithArguments and interactionWithValues. Each of these can be set to zoom, pan, both or none. This gives you precise control of the interactions available to the end user.

To pan the chart, the user simply drags the mouse or their finger. To zoom, they can use pinch gestures or the mouse wheel. Additionally, region selection is supported by mouse. By default, the shift key enables this, but the modifier can be changed using the zoomRegionKey property.

Chart Zoom by Region Selection

There is a guide article available in our documentation, which includes some demos. Here’s the reference for the ZoomAndPan plugin, and the demo you saw in the animations above is available here.

What Do You Think?

Please don’t hesitate to leave a comment below if you have any thoughts on the new functionality. You can also access the GitHub repository and submit issues there.

no comments
No Comments

Please login or register to post comments.