Vue Range Selector - Embedded Chart (Customized)

This demo illustrates the ability of the RangeSelector to show the Chart with customized settings.

Backend API

<template> <DxRangeSelector id="range-selector" :data-source="dataSource" v-model:value="range" title="Select a Range in the CPU Usage History" > <DxMargin :left="15" :right="15" :top="50" /> <DxScale :minor-tick-interval="0.5" :tick-interval="1" > <DxLabel :customize-text="customizeText"/> </DxScale> <DxSliderMarker :visible="false"/> <DxBackground color="#808080"/> <DxChart :top-indent="0.05" :bottom-indent="0.05" > <DxSeries :width="3" color="#ffa500" type="line" argument-field="x" value-field="y" /> </DxChart> </DxRangeSelector> </template> <script setup lang="ts"> import { ref } from 'vue'; import { DxRangeSelector, DxMargin, DxScale, DxLabel, DxSliderMarker, DxBackground, DxChart, DxSeries, } from 'devextreme-vue/range-selector'; import { dataSource } from './data.ts'; const range = ref([0, 5]); const customizeText = ({ valueText }: Record<string, any>) => `${valueText} s`; </script> <style> #range-selector { height: 270px; } </style>

export const dataSource = [ { x: 0, y: 15 }, { x: 1, y: -1 }, { x: 2, y: 10 }, { x: 3, y: -3 }, { x: 4, y: 16 }, { x: 5, y: 0 }, { x: 6, y: 9 }, { x: 7, y: 3 }, { x: 8, y: 15 }, { x: 9, y: -1 }, { x: 10, y: 10 }, { x: 11, y: -3 }, { x: 12, y: 16 }, { x: 13, y: 0 }, { x: 14, y: 9 }, { x: 15, y: 3 }, { x: 16, y: 13 }, ];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>