Your search did not match any results.
Area Charts

Step Area with Gaps

The Step Area series uses perpendicular vertical and horizontal lines to connect data points and shades the area under these lines. If a point's value is null, the series draws a gap.

Only null point values result in gaps. undefined values are ignored. Multiple 0 values may look like a gap, but if series points are visible, you can see them in this gap. If you want to remove gaps caused by null values, enable the ignoreEmptyPoints property.

www.wikipedia.org
Backend API
Copy to CodeSandBox
Apply
Reset
<template> <DxChart id="chart" :data-source="medalsInfo" title="France Olympic Medals" > <DxSeries value-field="gold" name="Gold Medals" color="#ffd700" /> <DxSeries value-field="silver" name="Silver Medals" color="#c0c0c0" /> <DxCommonSeriesSettings argument-field="year" type="steparea" > <DxPoint :visible="true"/> </DxCommonSeriesSettings> <DxArgumentAxis> <DxLabel format="decimal"/> </DxArgumentAxis> <DxLegend vertical-alignment="bottom" horizontal-alignment="center" /> <DxExport :enabled="true"/> </DxChart> </template> <script> import DxChart, { DxArgumentAxis, DxLabel, DxLegend, DxSeries, DxCommonSeriesSettings, DxExport, DxPoint, } from 'devextreme-vue/chart'; import { medalsInfo } from './data.js'; export default { components: { DxChart, DxArgumentAxis, DxLabel, DxLegend, DxSeries, DxCommonSeriesSettings, DxExport, DxPoint, }, data() { return { medalsInfo, }; }, }; </script> <style> #chart { height: 440px; width: 100%; } </style>
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#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/22.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.light.css" /> <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.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
export const medalsInfo = [{ year: 1904, gold: null, silver: null, }, { year: 1908, gold: 5, silver: 5, }, { year: 1912, gold: 7, silver: 4, }, { year: 1916, gold: null, silver: null, }, { year: 1920, gold: 9, silver: 19, }, { year: 1924, gold: 13, silver: 15, }, { year: 1928, gold: 6, silver: 10, }, { year: 1932, gold: 10, silver: 5, }, { year: 1936, gold: 7, silver: 6, }, { year: 1940, gold: null, silver: null, }, { year: 1944, gold: null, silver: null, }, { year: 1948, gold: 10, silver: 6, }, { year: 1952, gold: 6, silver: 6, }, { year: 1956, gold: 4, silver: 4, }, { year: 1960, gold: null, silver: 2, }, { year: 1964, gold: 1, silver: 8, }, { year: 1968, gold: 7, silver: 3, }, { year: 1972, gold: 2, silver: 4, }, { year: 1976, gold: 2, silver: 3, }, { year: 1980, gold: 6, silver: 5, }, { year: 1984, gold: 5, silver: 7, }, { year: 1988, gold: 6, silver: 4, }, { year: 1992, gold: 8, silver: 5, }, { year: 1996, gold: 15, silver: 7, }, { year: 2000, gold: 13, silver: 14, }, { year: 2004, gold: 11, silver: 9, }, { year: 2008, gold: 7, silver: 16, }, { year: 2012, gold: 11, silver: 11, }, { year: 2016, gold: 18, silver: 18, }];
window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.2.40/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.1.6/cjs', 'devextreme-vue': 'npm:devextreme-vue@22.1.6', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.18/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.65/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.33/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', 'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/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@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/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.7.1/standalone.js', 'prettier/parser-html': 'npm:prettier@2.7.1/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.11/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);