Your search did not match any results.
Charts

Discrete Aggregation

The aggregation algorithm depends on the aggregateByCategory option. In this demo, this option 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/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.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>
#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', 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.2', 'devextreme-react': 'npm:devextreme-react@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', // 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 } });