DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Step Line

Step line series are much like traditional line series. The primary difference is that in step line series, data points are connected by vertical and horizontal lines --- resulting in a «stair step» effect.

www.wikipedia.org
Backend API
<template> <DxChart id="container" :data-source="olympicAchievements" title="Australian Olympic Medal Count" > <DxCommonSeriesSettings type="stepline" argument-field="year" > <DxPoint :visible="false"/> </DxCommonSeriesSettings> <DxSeries v-for="medal in medalSources" :key="medal.value" :value-field="medal.value" :name="medal.name" :color="medal.color" /> <DxArgumentAxis> <DxLabel> <DxFormat type="decimal"/> </DxLabel> </DxArgumentAxis> <DxLegend vertical-alignment="bottom" horizontal-alignment="center" /> <DxExport :enabled="true"/> </DxChart> </template> <script setup lang="ts"> import { DxChart, DxSeries, DxArgumentAxis, DxCommonSeriesSettings, DxExport, DxLegend, DxPoint, DxLabel, DxFormat, } from 'devextreme-vue/chart'; import { medalSources, olympicAchievements } from './data.ts'; </script> <style> #container { height: 440px; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../', 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.3/cjs', 'devextreme-vue': 'npm:devextreme-vue@24.1.3/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.8/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
export const medalSources = [ { value: 'bronze', name: 'Bronze Medals', color: '#cd7f32' }, { value: 'silver', name: 'Silver Medals', color: '#c0c0c0' }, { value: 'gold', name: 'Gold Medals', color: '#ffd700' }, ]; export const olympicAchievements = [{ year: 1896, gold: 2, silver: 0, bronze: 0, }, { year: 1900, gold: 2, silver: 0, bronze: 3, }, { year: 1904, gold: 0, silver: 0, bronze: 0, }, { year: 1908, gold: 1, silver: 2, bronze: 2, }, { year: 1912, gold: 2, silver: 2, bronze: 3, }, { year: 1916, gold: 0, silver: 0, bronze: 0, }, { year: 1920, gold: 0, silver: 2, bronze: 1, }, { year: 1924, gold: 3, silver: 1, bronze: 2, }, { year: 1928, gold: 1, silver: 2, bronze: 1, }, { year: 1932, gold: 3, silver: 1, bronze: 1, }, { year: 1936, gold: 0, silver: 0, bronze: 1, }, { year: 1940, gold: 0, silver: 0, bronze: 0, }, { year: 1944, gold: 0, silver: 0, bronze: 0, }, { year: 1948, gold: 2, silver: 6, bronze: 5, }, { year: 1952, gold: 6, silver: 2, bronze: 3, }, { year: 1956, gold: 13, silver: 8, bronze: 14, }, { year: 1960, gold: 8, silver: 8, bronze: 6, }, { year: 1964, gold: 6, silver: 2, bronze: 10, }, { year: 1968, gold: 5, silver: 7, bronze: 5, }, { year: 1972, gold: 8, silver: 7, bronze: 2, }, { year: 1976, gold: 0, silver: 1, bronze: 4, }, { year: 1980, gold: 2, silver: 2, bronze: 5, }, { year: 1984, gold: 4, silver: 8, bronze: 12, }, { year: 1988, gold: 3, silver: 6, bronze: 5, }, { year: 1992, gold: 7, silver: 9, bronze: 11, }, { year: 1996, gold: 9, silver: 9, bronze: 23, }, { year: 2000, gold: 16, silver: 25, bronze: 17, }, { year: 2004, gold: 17, silver: 16, bronze: 16, }, { year: 2008, gold: 14, silver: 15, bronze: 17, }, { year: 2012, gold: 8, silver: 15, bronze: 12, }, { year: 2016, gold: 8, silver: 11, bronze: 10, }];
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/24.1.3/css/dx.light.css" /> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/core-js@2.6.12/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.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>