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> <DxChart :data-source="zoomingData" :series="series" palette="Harmony Light" > <DxCommonSeriesSettings> <DxPoint :size="7"/> </DxCommonSeriesSettings> <DxLegend :visible="false"/> <DxArgumentAxis :visual-range="range"/> </DxChart> <DxRangeSelector :data-source="zoomingData" :value.sync="range" > <DxSize :height="120"/> <DxMargin :left="10"/> <DxScale :minor-tick-count="1"/> <DxRsChart :series="series" palette="Harmony Light" /> <DxBehavior call-value-changed="onMoving"/> </DxRangeSelector> </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.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.2.5/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:dx-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 } });