DevExtreme Charts - Improved Zooming and Scrolling (v18.2)

For v18.2, we have implemented some new features to support zooming and scrolling equally on both argument axis and value axis of the DevExtreme Charts. As usual, the post applies to all supported platforms, including Angular, Vue, React, jQuery, Knockout and ASP.NET MVC and ASP.NET Core.

Zooming and Scrolling Both Axes

Starting from v18.2, zooming and scrolling functionality supports both the value axis and the argument axis. Of course these features are extremely useful whenever the data you visualize has very dense point distribution or quite small value variation.

Zooming can be activated using the mouse wheel, which works for all zooming-enabled axes simultaneously. Spread and pinch touch gestures are supported on mobile platforms, while desktop platforms also offer selection-based zoom.

In code, the new option zoomAndPan is used to set up all features described in this post. Documentation is available here, but it lacks some detail at the moment. For instance, to active zooming for both axes, your configuration might look like this:

zoomAndPan: {
  argumentAxis: 'zoom',
  valueAxis: 'zoom'
}

Selection-Based Zoom

A new feature allows users to select a rectangular region with the mouse on desktop systems. To enable this, set dragToZoom to true in the zoomAndPan configuration. The bounds for the zoomed area can then be set more precisely than it would be possible when zooming in using the mouse wheel.

The property panKey configures a modifier key (shift by default). If your chart has panning activated, press this modifier key while you drag the mouse to fall back to panning instead of region selection.

Panning and Scrolling

Panning is easy in touch environments: simply drag the chart with your finger. On desktop platforms, you can also pan by dragging the mouse as long as dragToZoom is not active, or by using the panKey modifier otherwise.

To activate panning by itself for an axis, use the setting pan. For a combination of panning and zooming, use both. A complete setup might look like this:

zoomAndPan: {
  argumentAxis: 'both',
  valueAxis: 'both',
  dragToZoom: true
}

Click here for a CodePen sample that shows the whole feature set.

Note: The setting scrollBar is still supported as before, but only for the argument axis at this time. Scroll bar support for both axes is part of our plans, but the implementation won’t be done in time for the v18.2 release.

Please Let Us Know Your Thoughts!

We would like to hear what you think. Will you enable zooming and scrolling in your projects? Do you have an important use case that we have forgotten about? Please feel free to leave comments below, or get back to us on GitHub or via the Support Center.