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
Thank you!
We appreciate your feedback.
We appreciate your feedback.
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.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/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
}
});