Your search did not match any results.
Charts

Zooming and Scrolling API

Documentation

This example demonstrates how you can connect the Chart and RangeSelector widgets in order to zoom into the appropriate data range within the Chart. Move the sliders along the RangeSelector, and you will note that the value axis of the Chart is adjusted automatically.

Copy to CodeSandBox
Apply
Reset
<template> <div> <dx-chart :data-source="zoomingData" :series="series" palette="Harmony Light" > <dx-common-series-settings> <dx-point :size="7"/> </dx-common-series-settings> <dx-legend :visible="false"/> <dx-argument-axis :visual-range="range"/> </dx-chart> <dx-range-selector :data-source="zoomingData" :value.sync="range" > <dx-size :height="120"/> <dx-margin :left="10"/> <dx-scale :minor-tick-count="1"/> <dx-rs-chart :series="series" palette="Harmony Light" /> <dx-behavior call-value-changed="onMoving"/> </dx-range-selector> </div> </template> <script> import { zoomingData } from './data.js'; import { DxChart, DxCommonSeriesSettings, DxPoint, DxLegend, DxArgumentAxis } from 'devextreme-vue/chart'; import { DxRangeSelector, DxSize, DxMargin, DxScale, DxChart as DxRsChart, DxBehavior } from 'devextreme-vue/range-selector'; export default { components: { DxChart, DxCommonSeriesSettings, DxPoint, DxLegend, DxArgumentAxis, DxRangeSelector, DxSize, DxMargin, DxScale, DxRsChart, DxBehavior }, data() { return { zoomingData, range: [], series: [{ valueField: 'y1' }, { valueField: 'y2' }, { valueField: 'y3' }] }; } }; </script>
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 } });