Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss

Zooming and Scrolling

When you deal with a large amount of data, providing an efficient way of navigating this data is essential. In this section, you will learn how to implement scrolling and zooming in the Chart UI component.

Using dxRangeSelector

The Chart and RangeSelector UI components can operate together, allowing an end-user to zoom and scroll through a chart. Follow the steps below to implement these capabilities.

  • Configure Chart

    Create and configure the Chart UI component using one of the available data-binding approaches. For details, see the "Create and Configure a Widget" guide for jQuery, AngularJS or Knockout.

    JavaScript
    var chartOptions = {
        // Chart configuration
    };
  • Configure RangeSelector

    Create and configure the RangeSelector UI component in a similar manner. Chart and RangeSelector must have completely identical argument axes. Hence, you need to assign the same data source to both UI components.

    JavaScript
    var dataSource = [...];
    var chartOptions = {
        dataSource: dataSource,
        // ...
    };
    var rangeSelectorOptions = {
        dataSource: dataSource,
        // ...
    };

    Optionally, you can display the chart in miniature in the background of RangeSelector. For this purpose, assign the same array of series configurations to both UI components.

    JavaScript
    var dataSource = [...];
    var series = [...];
    var chartOptions = {
        dataSource: dataSource,
        series: series
        // ...
    };
    var rangeSelectorOptions = {
        dataSource: dataSource,
        chart: {
            series: series    
        }
        // ...
    };
  • Implement UI component Interaction

    To make Chart and RangeSelector interact with each other, handle the valueChanged event. For this purpose, assign a function to the onValueChanged property of RangeSelector. Within this function, call the zoomArgument method of the chart instance. This method accepts the start and end range values as its parameters.

    JavaScript
    var rangeSelectorOptions = {
        // ...
        onValueChanged: function (e) {
            chartInstance.zoomArgument(e.value[0], e.value[1]);
        },
        behavior: { callValueChanged: 'onMoving' }
    };
    NOTE
    The valueChanged event can fire either when an end-user keeps dragging the sliders or when he/she has released them. This depends on the value of the behavior.callValueChanged property. When implementing zooming/scrolling, make sure that this property is set to 'onMoving'.

    By default, the chart adjusts its value axis to the currently selected minimum and maximum values. To change this behavior, set the adjustOnZoom property to false.

Free and Fixed Range Scrolling

Following the steps above, you get free range scrolling. It means that an end-user scrolls the chart by selecting a range in RangeSelector and dragging it to any side. You can fix the selected range. In this instance, an end-user will be able to scroll the chart dragging the predefined range. For this purpose, set the minRange and maxRange property of the scale configuration object to the same value. Then, specify the initial range using the value array.

JavaScript
var rangeSelectorOptions = {
    // ...
    scale: {
        minRange: 10,
        maxRange: 10,
    },
    value: [0, 10]   
};

Using Mouse or Touch Gestures

The Chart UI component allows you to enable built-in scrolling and zooming. You can use the mouse wheel or the "pinch" gesture for zooming and the horizontal slide gesture across the chart (using mouse or touch interface) for scrolling.

DevExtreme ChartJS Zooming Scrolling

View Demo

Using the Scroll Bar

In addition to scrolling by mouse and touch gestures, you can display a separate visual element for scrolling called scroll bar.

The scroll bar is configured using the scrollBar object. Set the visible field of this object to true to display the scroll bar.

View Demo

To learn more about the scroll bar as a visual element, refer to the Chart Elements | Scroll Bar topic.