DevExtreme jQuery/JS - 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
Users can zoom the chart by rotating the mouse wheel and scroll it by dragging its plot. On touch-enabled devices, users can zoom the chart using the spread and pinch gestures and scroll the chart using the drag gesture.
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
$(function() { $("#chartContainer").dxChart({ // ... zoomingMode: "all", // or "touch" | "mouse" | "none" scrollingMode: "all" // or "touch" | "mouse" | "none" }); });
Angular
<dx-chart zoomingMode="all" scrollingMode="all"> <!-- or "touch" | "mouse" | "none" --> </dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
See Also
Using the Scroll Bar
The scrollbar is a chart element used for scrolling.
You can configure the scrollbar using the scrollBar object. To display the scrollbar, set this object's visible option to true after enabling scrolling and zooming in the Chart.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... zoomingMode: "all", scrollingMode: "all", scrollBar: { visible: true, //... } }); });
Angular
<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 ], // ... })
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. Note that the Chart and RangeSelector have a common data source and may have the same series configuration if the RangeSelector should display the Chart in the background.
jQuery
$(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
<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 ], // ... })
See Also
If you need to fix the zoom window and allow users to only move it along the scale, set the scale object's minRange and maxRange options to a single value defining the zoom window's length. Make sure to specify the initial zoom using the value option.
jQuery
$(function() { // ... // The Chart is configured here $("#rangeSelectorContainer").dxRangeSelector({ // ... scale: { minRange: 10, maxRange: 10, }, value: [0, 10] }); });
Angular
<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
$(function() { var chart = $("#chartContainer").dxChart({ // ... }).dxChart("instance"); chart.zoomArgument(300, 500) });
Angular
<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 Chart's initial zoom by setting the RangeSelector's value option.
jQuery
$(function() { // ... // The Chart is configured here $("#rangeSelectorContainer").dxRangeSelector({ // ... value: [0, 10] }); });
Angular
<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 ], // ... })
If you have technical questions, please create a support ticket in the DevExpress Support Center.