Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Charts

Discrete Aggregation

The aggregation algorithm depends on the aggregateByCategory property. In this demo, this property is set to true and applies the "sum" aggregation method for the groups specified in the dataSource.

If aggregateByCategory is false, the specified aggregation method is not applied. The first series point is displayed instead.

U.S. Energy Information Administration (Oct 2019)
Copy to CodeSandBox
Apply
Reset
import React from 'react'; import Chart, { ArgumentAxis, Title, Subtitle, CommonSeriesSettings, SeriesTemplate, Aggregation } from 'devextreme-react/chart'; import { oilProductionData } from './data.js'; export default function App() { return ( <Chart id="chart" dataSource={oilProductionData} > <Title text="Production of Crude Oil"> <Subtitle text="(in Barrels)"></Subtitle> </Title> <CommonSeriesSettings argumentField="state" valueField="value" type="bar" > <Aggregation enabled={true} method="sum" > </Aggregation> </CommonSeriesSettings> <ArgumentAxis aggregateByCategory={true}></ArgumentAxis> <SeriesTemplate nameField="year"></SeriesTemplate> </Chart> ); }
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/20.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.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 oilProductionData = [ { state: 'Alaska', month: 'Jan', year: '2016', value: 15985000 }, { state: 'Alaska', month: 'Feb', year: '2016', value: 14713000 }, { state: 'Alaska', month: 'Mar', year: '2016', value: 15842000 }, { state: 'Alaska', month: 'Apr', year: '2016', value: 14665000 }, { state: 'Alaska', month: 'May', year: '2016', value: 15658000 }, { state: 'Alaska', month: 'Jun', year: '2016', value: 14103000 }, { state: 'Alaska', month: 'Jul', year: '2016', value: 13584000 }, { state: 'Alaska', month: 'Aug', year: '2016', value: 14265000 }, { state: 'Alaska', month: 'Sep', year: '2016', value: 13598000 }, { state: 'Alaska', month: 'Oct', year: '2016', value: 15383000 }, { state: 'Alaska', month: 'Nov', year: '2016', value: 15433000 }, { state: 'Alaska', month: 'Dec', year: '2016', value: 16148000 }, { state: 'Alaska', month: 'Jan', year: '2017', value: 16055000 }, { state: 'Alaska', month: 'Feb', year: '2017', value: 14434000 }, { state: 'Alaska', month: 'Mar', year: '2017', value: 16300000 }, { state: 'Alaska', month: 'Apr', year: '2017', value: 15759000 }, { state: 'Alaska', month: 'May', year: '2017', value: 15734000 }, { state: 'Alaska', month: 'Jun', year: '2017', value: 13843000 }, { state: 'Alaska', month: 'Jul', year: '2017', value: 13102000 }, { state: 'Alaska', month: 'Aug', year: '2017', value: 13971000 }, { state: 'Alaska', month: 'Sep', year: '2017', value: 14465000 }, { state: 'Alaska', month: 'Oct', year: '2017', value: 15705000 }, { state: 'Alaska', month: 'Nov', year: '2017', value: 15297000 }, { state: 'Alaska', month: 'Dec', year: '2017', value: 15883000 }, { state: 'Alaska', month: 'Jan', year: '2018', value: 15739000 }, { state: 'Alaska', month: 'Feb', year: '2018', value: 14367000 }, { state: 'Alaska', month: 'Mar', year: '2018', value: 15878000 }, { state: 'Alaska', month: 'Apr', year: '2018', value: 14922000 }, { state: 'Alaska', month: 'May', year: '2018', value: 15367000 }, { state: 'Alaska', month: 'Jun', year: '2018', value: 13521000 }, { state: 'Alaska', month: 'Jul', year: '2018', value: 12237000 }, { state: 'Alaska', month: 'Aug', year: '2018', value: 13259000 }, { state: 'Alaska', month: 'Sep', year: '2018', value: 14143000 }, { state: 'Alaska', month: 'Oct', year: '2018', value: 15083000 }, { state: 'Alaska', month: 'Nov', year: '2018', value: 14919000 }, { state: 'Alaska', month: 'Dec', year: '2018', value: 15366000 }, { state: 'Colorado', month: 'Jan', year: '2016', value: 10326000 }, { state: 'Colorado', month: 'Feb', year: '2016', value: 9484000 }, { state: 'Colorado', month: 'Mar', year: '2016', value: 9906000 }, { state: 'Colorado', month: 'Apr', year: '2016', value: 9505000 }, { state: 'Colorado', month: 'May', year: '2016', value: 9667000 }, { state: 'Colorado', month: 'Jun', year: '2016', value: 9285000 }, { state: 'Colorado', month: 'Jul', year: '2016', value: 9965000 }, { state: 'Colorado', month: 'Aug', year: '2016', value: 10042000 }, { state: 'Colorado', month: 'Sep', year: '2016', value: 9742000 }, { state: 'Colorado', month: 'Oct', year: '2016', value: 11183000 }, { state: 'Colorado', month: 'Nov', year: '2016', value: 9595000 }, { state: 'Colorado', month: 'Dec', year: '2016', value: 9417000 }, { state: 'Colorado', month: 'Jan', year: '2017', value: 9297000 }, { state: 'Colorado', month: 'Feb', year: '2017', value: 8386000 }, { state: 'Colorado', month: 'Mar', year: '2017', value: 9568000 }, { state: 'Colorado', month: 'Apr', year: '2017', value: 9841000 }, { state: 'Colorado', month: 'May', year: '2017', value: 10487000 }, { state: 'Colorado', month: 'Jun', year: '2017', value: 10147000 }, { state: 'Colorado', month: 'Jul', year: '2017', value: 10980000 }, { state: 'Colorado', month: 'Aug', year: '2017', value: 12039000 }, { state: 'Colorado', month: 'Sep', year: '2017', value: 12187000 }, { state: 'Colorado', month: 'Oct', year: '2017', value: 12951000 }, { state: 'Colorado', month: 'Nov', year: '2017', value: 13095000 }, { state: 'Colorado', month: 'Dec', year: '2017', value: 13918000 }, { state: 'Colorado', month: 'Jan', year: '2018', value: 13962000 }, { state: 'Colorado', month: 'Feb', year: '2018', value: 12467000 }, { state: 'Colorado', month: 'Mar', year: '2018', value: 13966000 }, { state: 'Colorado', month: 'Apr', year: '2018', value: 13924000 }, { state: 'Colorado', month: 'May', year: '2018', value: 14215000 }, { state: 'Colorado', month: 'Jun', year: '2018', value: 13119000 }, { state: 'Colorado', month: 'Jul', year: '2018', value: 13986000 }, { state: 'Colorado', month: 'Aug', year: '2018', value: 16075000 }, { state: 'Colorado', month: 'Sep', year: '2018', value: 15951000 }, { state: 'Colorado', month: 'Oct', year: '2018', value: 16890000 }, { state: 'Colorado', month: 'Nov', year: '2018', value: 16487000 }, { state: 'Colorado', month: 'Dec', year: '2018', value: 16775000 }, { state: 'North Dakota', month: 'Jan', year: '2016', value: 34548000 }, { state: 'North Dakota', month: 'Feb', year: '2016', value: 32252000 }, { state: 'North Dakota', month: 'Mar', year: '2016', value: 34222000 }, { state: 'North Dakota', month: 'Apr', year: '2016', value: 31055000 }, { state: 'North Dakota', month: 'May', year: '2016', value: 32246000 }, { state: 'North Dakota', month: 'Jun', year: '2016', value: 30595000 }, { state: 'North Dakota', month: 'Jul', year: '2016', value: 31724000 }, { state: 'North Dakota', month: 'Aug', year: '2016', value: 30263000 }, { state: 'North Dakota', month: 'Sep', year: '2016', value: 28967000 }, { state: 'North Dakota', month: 'Oct', year: '2016', value: 32144000 }, { state: 'North Dakota', month: 'Nov', year: '2016', value: 30798000 }, { state: 'North Dakota', month: 'Dec', year: '2016', value: 28995000 }, { state: 'North Dakota', month: 'Jan', year: '2017', value: 30264000 }, { state: 'North Dakota', month: 'Feb', year: '2017', value: 28714000 }, { state: 'North Dakota', month: 'Mar', year: '2017', value: 31509000 }, { state: 'North Dakota', month: 'Apr', year: '2017', value: 31208000 }, { state: 'North Dakota', month: 'May', year: '2017', value: 31840000 }, { state: 'North Dakota', month: 'Jun', year: '2017', value: 30693000 }, { state: 'North Dakota', month: 'Jul', year: '2017', value: 32255000 }, { state: 'North Dakota', month: 'Aug', year: '2017', value: 33437000 }, { state: 'North Dakota', month: 'Sep', year: '2017', value: 32883000 }, { state: 'North Dakota', month: 'Oct', year: '2017', value: 36309000 }, { state: 'North Dakota', month: 'Nov', year: '2017', value: 35482000 }, { state: 'North Dakota', month: 'Dec', year: '2017', value: 36085000 }, { state: 'North Dakota', month: 'Jan', year: '2018', value: 36057000 }, { state: 'North Dakota', month: 'Feb', year: '2018', value: 32501000 }, { state: 'North Dakota', month: 'Mar', year: '2018', value: 35538000 }, { state: 'North Dakota', month: 'Apr', year: '2018', value: 36290000 }, { state: 'North Dakota', month: 'May', year: '2018', value: 38137000 }, { state: 'North Dakota', month: 'Jun', year: '2018', value: 36479000 }, { state: 'North Dakota', month: 'Jul', year: '2018', value: 39005000 }, { state: 'North Dakota', month: 'Aug', year: '2018', value: 39648000 }, { state: 'North Dakota', month: 'Sep', year: '2018', value: 40274000 }, { state: 'North Dakota', month: 'Oct', year: '2018', value: 42674000 }, { state: 'North Dakota', month: 'Nov', year: '2018', value: 41442000 }, { state: 'North Dakota', month: 'Dec', year: '2018', value: 43485000 }, { state: 'New Mexico', month: 'Jan', year: '2016', value: 11737000 }, { state: 'New Mexico', month: 'Feb', year: '2016', value: 11551000 }, { state: 'New Mexico', month: 'Mar', year: '2016', value: 12591000 }, { state: 'New Mexico', month: 'Apr', year: '2016', value: 12144000 }, { state: 'New Mexico', month: 'May', year: '2016', value: 12182000 }, { state: 'New Mexico', month: 'Jun', year: '2016', value: 11679000 }, { state: 'New Mexico', month: 'Jul', year: '2016', value: 12146000 }, { state: 'New Mexico', month: 'Aug', year: '2016', value: 12167000 }, { state: 'New Mexico', month: 'Sep', year: '2016', value: 12019000 }, { state: 'New Mexico', month: 'Oct', year: '2016', value: 12655000 }, { state: 'New Mexico', month: 'Nov', year: '2016', value: 12485000 }, { state: 'New Mexico', month: 'Dec', year: '2016', value: 13036000 }, { state: 'New Mexico', month: 'Jan', year: '2017', value: 12979000 }, { state: 'New Mexico', month: 'Feb', year: '2017', value: 12391000 }, { state: 'New Mexico', month: 'Mar', year: '2017', value: 13700000 }, { state: 'New Mexico', month: 'Apr', year: '2017', value: 13423000 }, { state: 'New Mexico', month: 'May', year: '2017', value: 14369000 }, { state: 'New Mexico', month: 'Jun', year: '2017', value: 13318000 }, { state: 'New Mexico', month: 'Jul', year: '2017', value: 13859000 }, { state: 'New Mexico', month: 'Aug', year: '2017', value: 14257000 }, { state: 'New Mexico', month: 'Sep', year: '2017', value: 15043000 }, { state: 'New Mexico', month: 'Oct', year: '2017', value: 16202000 }, { state: 'New Mexico', month: 'Nov', year: '2017', value: 15853000 }, { state: 'New Mexico', month: 'Dec', year: '2017', value: 17204000 }, { state: 'New Mexico', month: 'Jan', year: '2018', value: 16691000 }, { state: 'New Mexico', month: 'Feb', year: '2018', value: 16345000 }, { state: 'New Mexico', month: 'Mar', year: '2018', value: 19171000 }, { state: 'New Mexico', month: 'Apr', year: '2018', value: 19320000 }, { state: 'New Mexico', month: 'May', year: '2018', value: 20002000 }, { state: 'New Mexico', month: 'Jun', year: '2018', value: 19471000 }, { state: 'New Mexico', month: 'Jul', year: '2018', value: 20354000 }, { state: 'New Mexico', month: 'Aug', year: '2018', value: 22052000 }, { state: 'New Mexico', month: 'Sep', year: '2018', value: 22029000 }, { state: 'New Mexico', month: 'Oct', year: '2018', value: 24024000 }, { state: 'New Mexico', month: 'Nov', year: '2018', value: 23796000 }, { state: 'New Mexico', month: 'Dec', year: '2018', value: 25704000 }, { state: 'Oklahoma', month: 'Jan', year: '2016', value: 14137000 }, { state: 'Oklahoma', month: 'Feb', year: '2016', value: 11959000 }, { state: 'Oklahoma', month: 'Mar', year: '2016', value: 13406000 }, { state: 'Oklahoma', month: 'Apr', year: '2016', value: 12533000 }, { state: 'Oklahoma', month: 'May', year: '2016', value: 13236000 }, { state: 'Oklahoma', month: 'Jun', year: '2016', value: 12455000 }, { state: 'Oklahoma', month: 'Jul', year: '2016', value: 12442000 }, { state: 'Oklahoma', month: 'Aug', year: '2016', value: 12910000 }, { state: 'Oklahoma', month: 'Sep', year: '2016', value: 12323000 }, { state: 'Oklahoma', month: 'Oct', year: '2016', value: 13088000 }, { state: 'Oklahoma', month: 'Nov', year: '2016', value: 12778000 }, { state: 'Oklahoma', month: 'Dec', year: '2016', value: 12809000 }, { state: 'Oklahoma', month: 'Jan', year: '2017', value: 12555000 }, { state: 'Oklahoma', month: 'Feb', year: '2017', value: 11806000 }, { state: 'Oklahoma', month: 'Mar', year: '2017', value: 13570000 }, { state: 'Oklahoma', month: 'Apr', year: '2017', value: 12822000 }, { state: 'Oklahoma', month: 'May', year: '2017', value: 13296000 }, { state: 'Oklahoma', month: 'Jun', year: '2017', value: 13485000 }, { state: 'Oklahoma', month: 'Jul', year: '2017', value: 13696000 }, { state: 'Oklahoma', month: 'Aug', year: '2017', value: 14104000 }, { state: 'Oklahoma', month: 'Sep', year: '2017', value: 13749000 }, { state: 'Oklahoma', month: 'Oct', year: '2017', value: 14736000 }, { state: 'Oklahoma', month: 'Nov', year: '2017', value: 14872000 }, { state: 'Oklahoma', month: 'Dec', year: '2017', value: 15215000 }, { state: 'Oklahoma', month: 'Jan', year: '2018', value: 16434000 }, { state: 'Oklahoma', month: 'Feb', year: '2018', value: 14768000 }, { state: 'Oklahoma', month: 'Mar', year: '2018', value: 16820000 }, { state: 'Oklahoma', month: 'Apr', year: '2018', value: 15941000 }, { state: 'Oklahoma', month: 'May', year: '2018', value: 16330000 }, { state: 'Oklahoma', month: 'Jun', year: '2018', value: 15682000 }, { state: 'Oklahoma', month: 'Jul', year: '2018', value: 16700000 }, { state: 'Oklahoma', month: 'Aug', year: '2018', value: 17431000 }, { state: 'Oklahoma', month: 'Sep', year: '2018', value: 17200000 }, { state: 'Oklahoma', month: 'Oct', year: '2018', value: 17861000 }, { state: 'Oklahoma', month: 'Nov', year: '2018', value: 17406000 }, { state: 'Oklahoma', month: 'Dec', year: '2018', value: 18113000 }, { state: 'Texas', month: 'Jan', year: '2016', value: 103269000 }, { state: 'Texas', month: 'Feb', year: '2016', value: 95491000 }, { state: 'Texas', month: 'Mar', year: '2016', value: 100776000 }, { state: 'Texas', month: 'Apr', year: '2016', value: 96368000 }, { state: 'Texas', month: 'May', year: '2016', value: 97849000 }, { state: 'Texas', month: 'Jun', year: '2016', value: 93931000 }, { state: 'Texas', month: 'Jul', year: '2016', value: 97069000 }, { state: 'Texas', month: 'Aug', year: '2016', value: 97037000 }, { state: 'Texas', month: 'Sep', year: '2016', value: 93462000 }, { state: 'Texas', month: 'Oct', year: '2016', value: 97647000 }, { state: 'Texas', month: 'Nov', year: '2016', value: 94758000 }, { state: 'Texas', month: 'Dec', year: '2016', value: 98003000 }, { state: 'Texas', month: 'Jan', year: '2017', value: 98907000 }, { state: 'Texas', month: 'Feb', year: '2017', value: 92400000 }, { state: 'Texas', month: 'Mar', year: '2017', value: 102564000 }, { state: 'Texas', month: 'Apr', year: '2017', value: 99595000 }, { state: 'Texas', month: 'May', year: '2017', value: 105298000 }, { state: 'Texas', month: 'Jun', year: '2017', value: 102763000 }, { state: 'Texas', month: 'Jul', year: '2017', value: 106940000 }, { state: 'Texas', month: 'Aug', year: '2017', value: 103967000 }, { state: 'Texas', month: 'Sep', year: '2017', value: 106077000 }, { state: 'Texas', month: 'Oct', year: '2017', value: 115887000 }, { state: 'Texas', month: 'Nov', year: '2017', value: 115741000 }, { state: 'Texas', month: 'Dec', year: '2017', value: 121005000 }, { state: 'Texas', month: 'Jan', year: '2018', value: 120488000 }, { state: 'Texas', month: 'Feb', year: '2018', value: 112244000 }, { state: 'Texas', month: 'Mar', year: '2018', value: 129348000 }, { state: 'Texas', month: 'Apr', year: '2018', value: 126677000 }, { state: 'Texas', month: 'May', year: '2018', value: 130717000 }, { state: 'Texas', month: 'Jun', year: '2018', value: 130759000 }, { state: 'Texas', month: 'Jul', year: '2018', value: 135682000 }, { state: 'Texas', month: 'Aug', year: '2018', value: 140226000 }, { state: 'Texas', month: 'Sep', year: '2018', value: 139019000 }, { state: 'Texas', month: 'Oct', year: '2018', value: 146462000 }, { state: 'Texas', month: 'Nov', year: '2018', value: 145691000 }, { state: 'Texas', month: 'Dec', year: '2018', value: 151761000 } ];
System.config({ transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16.14.0/umd/react.development.js', 'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.5', 'devextreme-react': 'npm:devextreme-react@20.2.5', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.18/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.11/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.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' }, 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' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });