DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

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
Backend API
$(() => { const chart = $('#chart').dxChart({ palette: 'Harmony Light', dataSource, commonSeriesSettings: { type: types[0], argumentField: 'country', }, series: [ { valueField: 'y1564', name: '15-64 years' }, { valueField: 'y014', name: '0-14 years' }, { valueField: 'y65', name: '65 years and older' }, ], margin: { bottom: 20, }, title: 'Population: Age Structure (2018)', argumentAxis: { valueMarginsEnabled: false, }, export: { enabled: true, }, legend: { verticalAlignment: 'bottom', horizontalAlignment: 'center', }, }).dxChart('instance'); $('#types').dxSelectBox({ dataSource: types, value: types[0], inputAttr: { 'aria-label': 'Series Type' }, onValueChanged(e) { chart.option('commonSeriesSettings.type', e.value); }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart-demo"> <div id="chart"></div> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Series Type</span> <div id="types"></div> </div> </div> </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 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, }]; const types = ['area', 'stackedarea', 'fullstackedarea'];