Your search did not match any results.
Charts

Zooming and Scrolling

Documentation

In this demo, the visualRange option is used to zoom the chart initially. The zoomAndPan.argumentAxis option allows you to zoom and scroll the argument axis at runtime.

Zooming and scrolling are available on mouse-equipped and touch-enable devices: you can use the mouse wheel/spread and pinch gestures to zoom, and the scrollbar/drag gesture to scroll.

Copy to CodeSandBox
Apply
Reset
<template> <dx-chart id="chart" :data-source="zoomingData" palette="Harmony Light" > <dx-series value-field="y1"/> <dx-series value-field="y2"/> <dx-argument-axis :visual-range="initialRange"/> <dx-scroll-bar :visible="true"/> <dx-zoom-and-pan argument-axis="both"/> <dx-legend :visible="false"/> </dx-chart> </template> <script> import { zoomingData } from './data.js'; import { DxChart, DxSeries, DxArgumentAxis, DxScrollBar, DxZoomAndPan, DxLegend } from 'devextreme-vue/chart'; export default { components: { DxChart, DxSeries, DxArgumentAxis, DxScrollBar, DxZoomAndPan, DxLegend }, data() { return { zoomingData, initialRange: [300, 500] }; } }; </script> <style scoped> #chart { height: 440px; width: 100%; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
export const zoomingData = [ { arg: 10, y1: -12, y2: 10, y3: 32 }, { arg: 20, y1: -32, y2: 30, y3: 12 }, { arg: 40, y1: -20, y2: 20, y3: 30 }, { arg: 50, y1: -39, y2: 50, y3: 19 }, { arg: 60, y1: -10, y2: 10, y3: 15 }, { arg: 75, y1: 10, y2: 10, y3: 15 }, { arg: 80, y1: 30, y2: 50, y3: 13 }, { arg: 90, y1: 40, y2: 50, y3: 14 }, { arg: 100, y1: 50, y2: 90, y3: 90 }, { arg: 105, y1: 40, y2: 175, y3: 120 }, { arg: 110, y1: -12, y2: 10, y3: 32 }, { arg: 120, y1: -32, y2: 30, y3: 12 }, { arg: 130, y1: -20, y2: 20, y3: 30 }, { arg: 140, y1: -12, y2: 10, y3: 32 }, { arg: 150, y1: -32, y2: 30, y3: 12 }, { arg: 160, y1: -20, y2: 20, y3: 30 }, { arg: 170, y1: -39, y2: 50, y3: 19 }, { arg: 180, y1: -10, y2: 10, y3: 15 }, { arg: 185, y1: 10, y2: 10, y3: 15 }, { arg: 190, y1: 30, y2: 100, y3: 13 }, { arg: 200, y1: 40, y2: 110, y3: 14 }, { arg: 210, y1: 50, y2: 90, y3: 90 }, { arg: 220, y1: 40, y2: 95, y3: 120 }, { arg: 230, y1: -12, y2: 10, y3: 32 }, { arg: 240, y1: -32, y2: 30, y3: 12 }, { arg: 255, y1: -20, y2: 20, y3: 30 }, { arg: 270, y1: -12, y2: 10, y3: 32 }, { arg: 280, y1: -32, y2: 30, y3: 12 }, { arg: 290, y1: -20, y2: 20, y3: 30 }, { arg: 295, y1: -39, y2: 50, y3: 19 }, { arg: 300, y1: -10, y2: 10, y3: 15 }, { arg: 310, y1: 10, y2: 10, y3: 15 }, { arg: 320, y1: 30, y2: 100, y3: 13 }, { arg: 330, y1: 40, y2: 110, y3: 14 }, { arg: 340, y1: 50, y2: 90, y3: 90 }, { arg: 350, y1: 40, y2: 95, y3: 120 }, { arg: 360, y1: -12, y2: 10, y3: 32 }, { arg: 367, y1: -32, y2: 30, y3: 12 }, { arg: 370, y1: -20, y2: 20, y3: 30 }, { arg: 380, y1: -12, y2: 10, y3: 32 }, { arg: 390, y1: -32, y2: 30, y3: 12 }, { arg: 400, y1: -20, y2: 20, y3: 30 }, { arg: 410, y1: -39, y2: 50, y3: 19 }, { arg: 420, y1: -10, y2: 10, y3: 15 }, { arg: 430, y1: 10, y2: 10, y3: 15 }, { arg: 440, y1: 30, y2: 100, y3: 13 }, { arg: 450, y1: 40, y2: 110, y3: 14 }, { arg: 460, y1: 50, y2: 90, y3: 90 }, { arg: 470, y1: 40, y2: 95, y3: 120 }, { arg: 480, y1: -12, y2: 10, y3: 32 }, { arg: 490, y1: -32, y2: 30, y3: 12 }, { arg: 500, y1: -20, y2: 20, y3: 30 }, { arg: 510, y1: -12, y2: 10, y3: 32 }, { arg: 520, y1: -32, y2: 30, y3: 12 }, { arg: 530, y1: -20, y2: 20, y3: 30 }, { arg: 540, y1: -39, y2: 50, y3: 19 }, { arg: 550, y1: -10, y2: 10, y3: 15 }, { arg: 555, y1: 10, y2: 10, y3: 15 }, { arg: 560, y1: 30, y2: 100, y3: 13 }, { arg: 570, y1: 40, y2: 110, y3: 14 }, { arg: 580, y1: 50, y2: 90, y3: 90 }, { arg: 590, y1: 40, y2: 95, y3: 12 }, { arg: 600, y1: -12, y2: 10, y3: 32 }, { arg: 610, y1: -32, y2: 30, y3: 12 }, { arg: 620, y1: -20, y2: 20, y3: 30 }, { arg: 630, y1: -12, y2: 10, y3: 32 }, { arg: 640, y1: -32, y2: 30, y3: 12 }, { arg: 650, y1: -20, y2: 20, y3: 30 }, { arg: 660, y1: -39, y2: 50, y3: 19 }, { arg: 670, y1: -10, y2: 10, y3: 15 }, { arg: 680, y1: 10, y2: 10, y3: 15 }, { arg: 690, y1: 30, y2: 100, y3: 13 }, { arg: 700, y1: 40, y2: 110, y3: 14 }, { arg: 710, y1: 50, y2: 90, y3: 90 }, { arg: 720, y1: 40, y2: 95, y3: 120 }, { arg: 730, y1: 20, y2: 190, y3: 130 }, { arg: 740, y1: -32, y2: 30, y3: 12 }, { arg: 750, y1: -20, y2: 20, y3: 30 }, { arg: 760, y1: -12, y2: 10, y3: 32 }, { arg: 770, y1: -32, y2: 30, y3: 12 }, { arg: 780, y1: -20, y2: 20, y3: 30 }, { arg: 790, y1: -39, y2: 50, y3: 19 }, { arg: 800, y1: -10, y2: 10, y3: 15 }, { arg: 810, y1: 10, y2: 10, y3: 15 }, { arg: 820, y1: 30, y2: 100, y3: 13 }, { arg: 830, y1: 40, y2: 110, y3: 14 }, { arg: 840, y1: 50, y2: 90, y3: 90 }, { arg: 850, y1: 40, y2: 95, y3: 120 }, { arg: 860, y1: -12, y2: 10, y3: 32 }, { arg: 870, y1: -32, y2: 30, y3: 12 }, { arg: 880, y1: -20, y2: 20, y3: 30 } ];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.5.16/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-vue': 'npm:devextreme-vue@19.2', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });