DevExtreme React - Zooming and Scrolling

Zooming and scrolling is an efficient way to navigate a chart that contains many series points. A user can zoom and scroll the chart using mouse commands or touch gestures, the scrollbar, or the RangeSelector widget. Each of these cases are detailed in this topic.

Using Mouse Commands or Touch Gestures

Mouse-equipped users zoom the chart by rotating the mouse wheel and scroll it by dragging the chart's plot. Users with touch-enabled devices zoom the chart using the spread and pinch gestures, and scroll the chart using the drag gesture.

DevExtreme HTML5 JavaScript Charts Zooming Scrolling

Zooming and scrolling are configured separately as well as their support for mouse commands and touch gestures. Use the zoomingMode and scrollingMode options to specify whether a user can zoom and scroll the chart using mouse commands, touch gestures, or both.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        zoomingMode: "all",  // or "touch" | "mouse" | "none"
        scrollingMode: "all" // or "touch" | "mouse" | "none"
    });
});
Angular
HTML
TypeScript
<dx-chart
    zoomingMode="all"
    scrollingMode="all"> <!-- or "touch" | "mouse" | "none" -->
</dx-chart>
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

View Demo

See Also

Using the Scroll Bar

The scrollbar is a chart element used for scrolling.

DevExtreme HTML5 JavaScript Charts ScrollBar

You can configure the scrollbar using the scrollBar object. To display the scrollbar, set the visible option of this object to true, but before doing this, make sure to enable scrolling and zooming in the Chart. Otherwise, the scrollbar will be inoperative.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        zoomingMode: "all",
        scrollingMode: "all",
        scrollBar: {
            visible: true,
            //...
        }
    });
});
Angular
HTML
TypeScript
<dx-chart
    zoomingMode="all"
    scrollingMode="all">
    <dxo-scroll-bar [visible]="true" ... ></dxo-scroll-bar>
</dx-chart>
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

View Demo

See Also

Using the RangeSelector Widget

The Chart can be zoomed and scrolled using the RangeSelector widget. The following code shows how to bind these widgets together. Note that both the Chart and RangeSelector have a common data source and may have common series configuration if the RangeSelector should display the Chart in the background.

jQuery
JavaScript
$(function() {
    // Common data source for both widgets
    var data = [ ... ];
    // Common series configuration for both widgets
    var seriesConfiguration = [ ... ];

    var chart = $("#chartContainer").dxChart({
        dataSource: data,
        series: seriesConfiguration
    }).dxChart("instance");

    $("#rangeSelectorContainer").dxRangeSelector({
        dataSource: data,
        // Displays the Chart in the background of the RangeSelector
        chart: {
            series: seriesConfiguration
        },
        onValueChanged: function (e) {
            // Zooms the Chart
            chart.zoomArgument(e.value[0], e.value[1]);
        },
        // Makes zooming and scrolling smoother
        behavior: { callValueChanged: 'onMoving' }
    });
});
Angular
HTML
TypeScript
<dx-chart
    [dataSource]="data"
    [series]="seriesConfiguration">
</dx-chart>
<dx-range-selector
    [dataSource]="data"
    (onValueChanged)="onValueChanged($event)">
    <!-- Displays the Chart in the background of the RangeSelector -->
    <dxo-chart [series]="seriesConfiguration"></dxo-chart>
    <!-- Makes zooming and scrolling smoother -->
    <dxo-behavior callValueChanged="onMoving"></dxo-behavior>
</dx-range-selector>
import { ..., ViewChild } from '@angular/core';
import { DxChartModule, DxChartComponent, DxRangeSelectorModule } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxChartComponent) chart: DxChartComponent;
    // Common data source for both widgets
    data = [ ... ];
    // Common series configuration for both widgets
    seriesConfiguration = [ ... ];
    onValueChanged (e: any) {
        // Zooms the Chart
        this.chart.instance.zoomArgument(e.value[0], e.value[1]);
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule,
        DxRangeSelectorModule
    ],
    // ...
})

View Demo

See Also

If you need to fix a zoom window and allow the user only to move it along the scale, set the minRange and maxRange options of the scale object to a single value defining the length of the zoom window. Make sure to specify the initial zoom using the value option.

jQuery
JavaScript
$(function() {
    // ...
    // The Chart is configured here

    $("#rangeSelectorContainer").dxRangeSelector({
        // ...
        scale: {
            minRange: 10,
            maxRange: 10,
        },
        value: [0, 10]
    });
});
Angular
HTML
TypeScript
<dx-chart ... ></dx-chart>
<dx-range-selector ... 
    [value]="[0, 10]">
    <dxo-scale [minRange]="10" [maxRange]="10"></dxo-scale>
</dx-range-selector>
import { DxChartModule, DxRangeSelectorModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule,
        DxRangeSelectorModule
    ],
    // ...
})
See Also

Set the Initial Zoom

To zoom a standalone Chart initially, call its zoomArgument(startValue, endValue) method after the Chart is created.

jQuery
JavaScript
$(function() {
    var chart = $("#chartContainer").dxChart({
        // ...
    }).dxChart("instance");

    chart.zoomArgument(300, 500)
});
Angular
HTML
TypeScript
<dx-chart ...
    (onDone)="zoom($event)">
</dx-chart>
import { ..., ViewChild } from '@angular/core';
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    zoom (e: any) {
        e.component.zoomArgument(300, 500)
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

If the Chart is bound to the RangeSelector, specify the initial zoom for the Chart by setting the value option of the RangeSelector.

jQuery
JavaScript
$(function() {
    // ...
    // The Chart is configured here

    $("#rangeSelectorContainer").dxRangeSelector({
        // ...
        value: [0, 10]
    });
});
Angular
HTML
TypeScript
<dx-chart ... ></dx-chart>
<dx-range-selector ...
    [value]="[0, 10]">
</dx-range-selector>
import { DxChartModule, DxRangeSelectorModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule,
        DxRangeSelectorModule
    ],
    // ...
})