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

DevExtreme Team Blog
24 October 2018

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 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'

Zooming and Scrolling Both Axes

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.

Selection-Based Zoom

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.

What’s New in v20.1

To explore the scope, breadth and capabilities of our new products/features, please visit:
2 comment(s)

Love the feature but would like to see it prevent scrolling / resizing when it is at max zoom out. If you zoom all the way out with the mouse wheel, it starts scrolling the page. If you zoom all the way out with a touchpad, it changes the size of the zoom on the entire page.

13 June 2019
Pavel Gruba (DevExpress)
Pavel Gruba (DevExpress)


Thank you for your request. We will consider implementing this feature when planning next releases. In the meantime, you can handle the wheel event of the chart's container and prevent it. Here is the updated example:

14 June 2019

Please login or register to post comments.