Your search did not match any results.
Line Charts

Line

Documentation

Line chart series types help visualize data trends over specified intervals. In this example, you can switch between the line, stacked line and full-stacked line series types. Stacked line series help visualize multiple series and compare the manner in which each series contributes to the total aggregate value for specific arguments. Full-stacked line series help compare the percentage value of multiple line series for each argument.

www.geohive.com
Copy to CodeSandBox
Apply
Reset
import React from 'react'; import SelectBox from 'devextreme-react/select-box'; import { Chart, Series, ArgumentAxis, CommonSeriesSettings, Export, Legend, Margin, Title, Subtitle, Tooltip, Grid } from 'devextreme-react/chart'; import service from './data.js'; const countriesInfo = service.getCountriesInfo(); const energySources = service.getEnergySources(); const types = ['line', 'stackedline', 'fullstackedline']; class App extends React.Component { constructor(props) { super(props); this.state = { type: 'line' }; this.handleChange = this.handleChange.bind(this); } render() { return ( <div id={'chart-demo'}> <Chart palette={'Violet'} dataSource={countriesInfo} > <CommonSeriesSettings argumentField={'country'} type={this.state.type} /> { energySources.map(function(item) { return <Series key={item.value} valueField={item.value} name={item.name} />; }) } <Margin bottom={20} /> <ArgumentAxis valueMarginsEnabled={false} discreteAxisDivisionMode={'crossLabels'} > <Grid visible={true} /> </ArgumentAxis> <Legend verticalAlignment={'bottom'} horizontalAlignment={'center'} itemTextPosition={'bottom'} /> <Export enabled={true} /> <Title text={'Energy Consumption in 2004'}> <Subtitle text={'(Millions of Tons, Oil Equivalent)'} /> </Title> <Tooltip enabled={true} customizeTooltip={this.customizeTooltip} /> </Chart> <div className={'options'}> <div className={'caption'}>Options</div> <div className={'option'}> <span>Series Type </span> <SelectBox dataSource={types} value={this.state.type} onValueChanged={this.handleChange} /> </div> </div> </div> ); } customizeTooltip(arg) { return { text: arg.valueText }; } handleChange(e) { this.setState({ type: e.value }); } } 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.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.6/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>
.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .option { margin-top: 10px; } .caption { font-size: 18px; font-weight: 500; } .option > span { margin-right: 10px; } .option > .dx-widget { display: inline-block; vertical-align: middle; }
const energySources = [ { value: 'hydro', name: 'Hydro-electric' }, { value: 'oil', name: 'Oil' }, { value: 'gas', name: 'Natural gas' }, { value: 'coal', name: 'Coal' }, { value: 'nuclear', name: 'Nuclear' } ]; const countriesInfo = [{ country: 'USA', hydro: 59.8, oil: 937.6, gas: 582, coal: 564.3, nuclear: 187.9 }, { country: 'China', hydro: 74.2, oil: 308.6, gas: 35.1, coal: 956.9, nuclear: 11.3 }, { country: 'Russia', hydro: 40, oil: 128.5, gas: 361.8, coal: 105, nuclear: 32.4 }, { country: 'Japan', hydro: 22.6, oil: 241.5, gas: 64.9, coal: 120.8, nuclear: 64.8 }, { country: 'India', hydro: 19, oil: 119.3, gas: 28.9, coal: 204.8, nuclear: 3.8 }, { country: 'Germany', hydro: 6.1, oil: 123.6, gas: 77.3, coal: 85.7, nuclear: 37.8 }]; export default { getEnergySources() { return energySources; }, getCountriesInfo() { return countriesInfo; } };
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 } });