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
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<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.2.3/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.41/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.2.3/cjs',
'devextreme-vue': 'npm:devextreme-vue@22.2.3',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.20/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.65/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.37/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/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);