Your search did not match any results.
Area Charts

Step Area

Documentation

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

www.nytimes.com
Copy to CodeSandBox
Apply
Reset
import React from 'react'; import Chart, { ArgumentAxis, Series, CommonSeriesSettings, Label, Legend, Border, Export } from 'devextreme-react/chart'; import { dataSource } from './data.js'; class App extends React.Component { render() { return ( <Chart title={'Australian Medal Count'} dataSource={dataSource} id={'chart'}> <Series valueField={'bronze'} name={'Bronze Medals'} color={'#cd7f32'} /> <Series valueField={'silver'} name={'Silver Medals'} color={'#c0c0c0'} /> <Series valueField={'gold'} name={'Gold Medals'} color={'#ffd700'} /> <CommonSeriesSettings argumentField={'year'} type={'steparea'}> <Border visible={false} /> </CommonSeriesSettings> <ArgumentAxis valueMarginsEnabled={false}> <Label format={'decimal'} /> </ArgumentAxis> <Export enabled={true} /> <Legend verticalAlignment={'bottom'} horizontalAlignment={'center'} /> </Chart> ); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('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.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.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>
#chart { height: 440px; }
export const dataSource = [{ 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 }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-react': 'npm:devextreme-react@19.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });