Area
This demo shows different Area series types. Use the drop-down editor below the Chart to select the type.
-
area
The Area series draws the line between neighboring data points and fills the area under that line. If the Chart contains multiple area series, they overlap each other. -
stackedarea
The Chart displays areas stacked on top of each other without overlapping. This type of Chart is useful if you need to compare contributions of each series to the overall value. -
fullstackedarea
The Chart stacks the areas. For each argument, it displays values as percentages of the total, as opposed to absolute values. The topmost series points are always plotted at 100%, and the graph fully covers the Chart's pane.
To create multiple area series, use the series array to declare each series and the commonSeriesSettings object to specify the common series type.
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.
import React from 'react';
import SelectBox from 'devextreme-react/select-box';
import {
Chart,
Series,
ArgumentAxis,
CommonSeriesSettings,
Export,
Legend,
Margin,
} from 'devextreme-react/chart';
import { dataSource } from './data.js';
const types = ['area', 'stackedarea', 'fullstackedarea'];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
type: types[0],
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({
type: e.value,
});
}
render() {
return (
<div id="chart-demo">
<Chart
palette="Harmony Light"
title="Population: Age Structure (2018)"
dataSource={dataSource}
>
<CommonSeriesSettings
argumentField="country"
type={this.state.type}
/>
<Series valueField="y1564" name="15-64 years"></Series>
<Series valueField="y014" name="0-14 years"></Series>
<Series valueField="y65" name="65 years and older"></Series>
<Margin bottom={20} />
<ArgumentAxis valueMarginsEnabled={false} />
<Legend
verticalAlignment="bottom"
horizontalAlignment="center"
/>
<Export enabled={true} />
</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>
);
}
}
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/22.2.6/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.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>
.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;
}
export const dataSource = [{
country: 'China',
y014: 233866959,
y1564: 1170914102,
y65: 171774113,
}, {
country: 'India',
y014: 373419115,
y1564: 882520945,
y65: 76063757,
}, {
country: 'United States',
y014: 60554755,
y1564: 213172625,
y65: 54835293,
}, {
country: 'Indonesia',
y014: 65715705,
y1564: 177014815,
y65: 18053690,
}, {
country: 'Brazil',
y014: 45278034,
y1564: 144391494,
y65: 17190842,
}, {
country: 'Russia',
y014: 24465156,
y1564: 96123777,
y65: 20412243,
}];
window.config = {
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types@15.8.1/prop-types.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.6/cjs',
'devextreme-react': 'npm:devextreme-react@22.2.6',
'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.72/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.43/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/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/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
// SystemJS plugins
'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.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.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,
react: true,
},
};
System.config(window.config);