React Charts - Discrete Points Aggregation

To aggregate points on discrete axes, follow the steps below.

TS JS

Backend API

import React from 'react'; import Chart, { Title, Subtitle, CommonSeriesSettings, SeriesTemplate, Aggregation, } from 'devextreme-react/chart'; import { oilProductionData } from './data.ts'; 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> <SeriesTemplate nameField="year"></SeriesTemplate> </Chart> ); } export default App;

import React from 'react'; import Chart, { Title, Subtitle, CommonSeriesSettings, SeriesTemplate, Aggregation, } from 'devextreme-react/chart'; import { oilProductionData } from './data.js'; 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> <SeriesTemplate nameField="year"></SeriesTemplate> </Chart> ); } export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const oilProductionData = [ { state: 'Alaska', month: 'Jan', year: '2022', value: 15100000 }, { state: 'Alaska', month: 'Feb', year: '2022', value: 13700000 }, { state: 'Alaska', month: 'Mar', year: '2022', value: 15200000 }, { state: 'Alaska', month: 'Apr', year: '2022', value: 14700000 }, { state: 'Alaska', month: 'May', year: '2022', value: 15100000 }, { state: 'Alaska', month: 'Jun', year: '2022', value: 14500000 }, { state: 'Alaska', month: 'Jul', year: '2022', value: 14100000 }, { state: 'Alaska', month: 'Aug', year: '2022', value: 14300000 }, { state: 'Alaska', month: 'Sep', year: '2022', value: 13800000 }, { state: 'Alaska', month: 'Oct', year: '2022', value: 14900000 }, { state: 'Alaska', month: 'Nov', year: '2022', value: 14900000 }, { state: 'Alaska', month: 'Dec', year: '2022', value: 15300000 }, { state: 'Colorado', month: 'Jan', year: '2022', value: 13300000 }, { state: 'Colorado', month: 'Feb', year: '2022', value: 12000000 }, { state: 'Colorado', month: 'Mar', year: '2022', value: 13300000 }, { state: 'Colorado', month: 'Apr', year: '2022', value: 12900000 }, { state: 'Colorado', month: 'May', year: '2022', value: 13400000 }, { state: 'Colorado', month: 'Jun', year: '2022', value: 12900000 }, { state: 'Colorado', month: 'Jul', year: '2022', value: 13300000 }, { state: 'Colorado', month: 'Aug', year: '2022', value: 13500000 }, { state: 'Colorado', month: 'Sep', year: '2022', value: 13100000 }, { state: 'Colorado', month: 'Oct', year: '2022', value: 13400000 }, { state: 'Colorado', month: 'Nov', year: '2022', value: 13400000 }, { state: 'Colorado', month: 'Dec', year: '2022', value: 13700000 }, { state: 'North Dakota', month: 'Jan', year: '2022', value: 35700000 }, { state: 'North Dakota', month: 'Feb', year: '2022', value: 32300000 }, { state: 'North Dakota', month: 'Mar', year: '2022', value: 35700000 }, { state: 'North Dakota', month: 'Apr', year: '2022', value: 34500000 }, { state: 'North Dakota', month: 'May', year: '2022', value: 35700000 }, { state: 'North Dakota', month: 'Jun', year: '2022', value: 34500000 }, { state: 'North Dakota', month: 'Jul', year: '2022', value: 35700000 }, { state: 'North Dakota', month: 'Aug', year: '2022', value: 35700000 }, { state: 'North Dakota', month: 'Sep', year: '2022', value: 34500000 }, { state: 'North Dakota', month: 'Oct', year: '2022', value: 35700000 }, { state: 'North Dakota', month: 'Nov', year: '2022', value: 35700000 }, { state: 'North Dakota', month: 'Dec', year: '2022', value: 37000000 }, { state: 'New Mexico', month: 'Jan', year: '2022', value: 52000000 }, { state: 'New Mexico', month: 'Feb', year: '2022', value: 47000000 }, { state: 'New Mexico', month: 'Mar', year: '2022', value: 52000000 }, { state: 'New Mexico', month: 'Apr', year: '2022', value: 50500000 }, { state: 'New Mexico', month: 'May', year: '2022', value: 52000000 }, { state: 'New Mexico', month: 'Jun', year: '2022', value: 50500000 }, { state: 'New Mexico', month: 'Jul', year: '2022', value: 52000000 }, { state: 'New Mexico', month: 'Aug', year: '2022', value: 52500000 }, { state: 'New Mexico', month: 'Sep', year: '2022', value: 51000000 }, { state: 'New Mexico', month: 'Oct', year: '2022', value: 52500000 }, { state: 'New Mexico', month: 'Nov', year: '2022', value: 53000000 }, { state: 'New Mexico', month: 'Dec', year: '2022', value: 54000000 }, { state: 'Oklahoma', month: 'Jan', year: '2022', value: 18000000 }, { state: 'Oklahoma', month: 'Feb', year: '2022', value: 16200000 }, { state: 'Oklahoma', month: 'Mar', year: '2022', value: 18000000 }, { state: 'Oklahoma', month: 'Apr', year: '2022', value: 17400000 }, { state: 'Oklahoma', month: 'May', year: '2022', value: 18000000 }, { state: 'Oklahoma', month: 'Jun', year: '2022', value: 17400000 }, { state: 'Oklahoma', month: 'Jul', year: '2022', value: 18000000 }, { state: 'Oklahoma', month: 'Aug', year: '2022', value: 18200000 }, { state: 'Oklahoma', month: 'Sep', year: '2022', value: 17600000 }, { state: 'Oklahoma', month: 'Oct', year: '2022', value: 18200000 }, { state: 'Oklahoma', month: 'Nov', year: '2022', value: 18400000 }, { state: 'Oklahoma', month: 'Dec', year: '2022', value: 18800000 }, { state: 'Texas', month: 'Jan', year: '2022', value: 147000000 }, { state: 'Texas', month: 'Feb', year: '2022', value: 133000000 }, { state: 'Texas', month: 'Mar', year: '2022', value: 147000000 }, { state: 'Texas', month: 'Apr', year: '2022', value: 142000000 }, { state: 'Texas', month: 'May', year: '2022', value: 147000000 }, { state: 'Texas', month: 'Jun', year: '2022', value: 142000000 }, { state: 'Texas', month: 'Jul', year: '2022', value: 147000000 }, { state: 'Texas', month: 'Aug', year: '2022', value: 150000000 }, { state: 'Texas', month: 'Sep', year: '2022', value: 145000000 }, { state: 'Texas', month: 'Oct', year: '2022', value: 150000000 }, { state: 'Texas', month: 'Nov', year: '2022', value: 152000000 }, { state: 'Texas', month: 'Dec', year: '2022', value: 155000000 }, { state: 'Alaska', month: 'Jan', year: '2023', value: 15300000 }, { state: 'Alaska', month: 'Feb', year: '2023', value: 13900000 }, { state: 'Alaska', month: 'Mar', year: '2023', value: 15500000 }, { state: 'Alaska', month: 'Apr', year: '2023', value: 15000000 }, { state: 'Alaska', month: 'May', year: '2023', value: 15300000 }, { state: 'Alaska', month: 'Jun', year: '2023', value: 14700000 }, { state: 'Alaska', month: 'Jul', year: '2023', value: 14300000 }, { state: 'Alaska', month: 'Aug', year: '2023', value: 14500000 }, { state: 'Alaska', month: 'Sep', year: '2023', value: 14100000 }, { state: 'Alaska', month: 'Oct', year: '2023', value: 15100000 }, { state: 'Alaska', month: 'Nov', year: '2023', value: 15200000 }, { state: 'Alaska', month: 'Dec', year: '2023', value: 15600000 }, { state: 'Colorado', month: 'Jan', year: '2023', value: 13600000 }, { state: 'Colorado', month: 'Feb', year: '2023', value: 12300000 }, { state: 'Colorado', month: 'Mar', year: '2023', value: 13600000 }, { state: 'Colorado', month: 'Apr', year: '2023', value: 13200000 }, { state: 'Colorado', month: 'May', year: '2023', value: 13700000 }, { state: 'Colorado', month: 'Jun', year: '2023', value: 13200000 }, { state: 'Colorado', month: 'Jul', year: '2023', value: 13600000 }, { state: 'Colorado', month: 'Aug', year: '2023', value: 13800000 }, { state: 'Colorado', month: 'Sep', year: '2023', value: 13400000 }, { state: 'Colorado', month: 'Oct', year: '2023', value: 13700000 }, { state: 'Colorado', month: 'Nov', year: '2023', value: 13700000 }, { state: 'Colorado', month: 'Dec', year: '2023', value: 14000000 }, { state: 'North Dakota', month: 'Jan', year: '2023', value: 36800000 }, { state: 'North Dakota', month: 'Feb', year: '2023', value: 33400000 }, { state: 'North Dakota', month: 'Mar', year: '2023', value: 36800000 }, { state: 'North Dakota', month: 'Apr', year: '2023', value: 35600000 }, { state: 'North Dakota', month: 'May', year: '2023', value: 36800000 }, { state: 'North Dakota', month: 'Jun', year: '2023', value: 35600000 }, { state: 'North Dakota', month: 'Jul', year: '2023', value: 36800000 }, { state: 'North Dakota', month: 'Aug', year: '2023', value: 36800000 }, { state: 'North Dakota', month: 'Sep', year: '2023', value: 35600000 }, { state: 'North Dakota', month: 'Oct', year: '2023', value: 36800000 }, { state: 'North Dakota', month: 'Nov', year: '2023', value: 36800000 }, { state: 'North Dakota', month: 'Dec', year: '2023', value: 38100000 }, { state: 'New Mexico', month: 'Jan', year: '2023', value: 56000000 }, { state: 'New Mexico', month: 'Feb', year: '2023', value: 51000000 }, { state: 'New Mexico', month: 'Mar', year: '2023', value: 56000000 }, { state: 'New Mexico', month: 'Apr', year: '2023', value: 54500000 }, { state: 'New Mexico', month: 'May', year: '2023', value: 56000000 }, { state: 'New Mexico', month: 'Jun', year: '2023', value: 54500000 }, { state: 'New Mexico', month: 'Jul', year: '2023', value: 56000000 }, { state: 'New Mexico', month: 'Aug', year: '2023', value: 56500000 }, { state: 'New Mexico', month: 'Sep', year: '2023', value: 55000000 }, { state: 'New Mexico', month: 'Oct', year: '2023', value: 56500000 }, { state: 'New Mexico', month: 'Nov', year: '2023', value: 57000000 }, { state: 'New Mexico', month: 'Dec', year: '2023', value: 58000000 }, { state: 'Oklahoma', month: 'Jan', year: '2023', value: 18500000 }, { state: 'Oklahoma', month: 'Feb', year: '2023', value: 16700000 }, { state: 'Oklahoma', month: 'Mar', year: '2023', value: 18500000 }, { state: 'Oklahoma', month: 'Apr', year: '2023', value: 17900000 }, { state: 'Oklahoma', month: 'May', year: '2023', value: 18500000 }, { state: 'Oklahoma', month: 'Jun', year: '2023', value: 17900000 }, { state: 'Oklahoma', month: 'Jul', year: '2023', value: 18500000 }, { state: 'Oklahoma', month: 'Aug', year: '2023', value: 18700000 }, { state: 'Oklahoma', month: 'Sep', year: '2023', value: 18100000 }, { state: 'Oklahoma', month: 'Oct', year: '2023', value: 18700000 }, { state: 'Oklahoma', month: 'Nov', year: '2023', value: 18900000 }, { state: 'Oklahoma', month: 'Dec', year: '2023', value: 19300000 }, { state: 'Texas', month: 'Jan', year: '2023', value: 158000000 }, { state: 'Texas', month: 'Feb', year: '2023', value: 143000000 }, { state: 'Texas', month: 'Mar', year: '2023', value: 158000000 }, { state: 'Texas', month: 'Apr', year: '2023', value: 153000000 }, { state: 'Texas', month: 'May', year: '2023', value: 158000000 }, { state: 'Texas', month: 'Jun', year: '2023', value: 153000000 }, { state: 'Texas', month: 'Jul', year: '2023', value: 158000000 }, { state: 'Texas', month: 'Aug', year: '2023', value: 161000000 }, { state: 'Texas', month: 'Sep', year: '2023', value: 156000000 }, { state: 'Texas', month: 'Oct', year: '2023', value: 161000000 }, { state: 'Texas', month: 'Nov', year: '2023', value: 163000000 }, { state: 'Texas', month: 'Dec', year: '2023', value: 166000000 }, { state: 'Alaska', month: 'Jan', year: '2024', value: 15400000 }, { state: 'Alaska', month: 'Feb', year: '2024', value: 14100000 }, { state: 'Alaska', month: 'Mar', year: '2024', value: 15700000 }, { state: 'Alaska', month: 'Apr', year: '2024', value: 15200000 }, { state: 'Alaska', month: 'May', year: '2024', value: 15500000 }, { state: 'Alaska', month: 'Jun', year: '2024', value: 14900000 }, { state: 'Alaska', month: 'Jul', year: '2024', value: 14500000 }, { state: 'Alaska', month: 'Aug', year: '2024', value: 14800000 }, { state: 'Alaska', month: 'Sep', year: '2024', value: 14300000 }, { state: 'Alaska', month: 'Oct', year: '2024', value: 15400000 }, { state: 'Alaska', month: 'Nov', year: '2024', value: 15500000 }, { state: 'Alaska', month: 'Dec', year: '2024', value: 15800000 }, { state: 'Colorado', month: 'Jan', year: '2024', value: 13800000 }, { state: 'Colorado', month: 'Feb', year: '2024', value: 12500000 }, { state: 'Colorado', month: 'Mar', year: '2024', value: 13800000 }, { state: 'Colorado', month: 'Apr', year: '2024', value: 13400000 }, { state: 'Colorado', month: 'May', year: '2024', value: 13900000 }, { state: 'Colorado', month: 'Jun', year: '2024', value: 13400000 }, { state: 'Colorado', month: 'Jul', year: '2024', value: 13800000 }, { state: 'Colorado', month: 'Aug', year: '2024', value: 14000000 }, { state: 'Colorado', month: 'Sep', year: '2024', value: 13600000 }, { state: 'Colorado', month: 'Oct', year: '2024', value: 13900000 }, { state: 'Colorado', month: 'Nov', year: '2024', value: 13900000 }, { state: 'Colorado', month: 'Dec', year: '2024', value: 14200000 }, { state: 'North Dakota', month: 'Jan', year: '2024', value: 37900000 }, { state: 'North Dakota', month: 'Feb', year: '2024', value: 34400000 }, { state: 'North Dakota', month: 'Mar', year: '2024', value: 37900000 }, { state: 'North Dakota', month: 'Apr', year: '2024', value: 36600000 }, { state: 'North Dakota', month: 'May', year: '2024', value: 37900000 }, { state: 'North Dakota', month: 'Jun', year: '2024', value: 36600000 }, { state: 'North Dakota', month: 'Jul', year: '2024', value: 37900000 }, { state: 'North Dakota', month: 'Aug', year: '2024', value: 37900000 }, { state: 'North Dakota', month: 'Sep', year: '2024', value: 36600000 }, { state: 'North Dakota', month: 'Oct', year: '2024', value: 37900000 }, { state: 'North Dakota', month: 'Nov', year: '2024', value: 37900000 }, { state: 'North Dakota', month: 'Dec', year: '2024', value: 39200000 }, { state: 'New Mexico', month: 'Jan', year: '2024', value: 60000000 }, { state: 'New Mexico', month: 'Feb', year: '2024', value: 54500000 }, { state: 'New Mexico', month: 'Mar', year: '2024', value: 60000000 }, { state: 'New Mexico', month: 'Apr', year: '2024', value: 58500000 }, { state: 'New Mexico', month: 'May', year: '2024', value: 60000000 }, { state: 'New Mexico', month: 'Jun', year: '2024', value: 58500000 }, { state: 'New Mexico', month: 'Jul', year: '2024', value: 60000000 }, { state: 'New Mexico', month: 'Aug', year: '2024', value: 60500000 }, { state: 'New Mexico', month: 'Sep', year: '2024', value: 59000000 }, { state: 'New Mexico', month: 'Oct', year: '2024', value: 60500000 }, { state: 'New Mexico', month: 'Nov', year: '2024', value: 61000000 }, { state: 'New Mexico', month: 'Dec', year: '2024', value: 62000000 }, { state: 'Oklahoma', month: 'Jan', year: '2024', value: 19000000 }, { state: 'Oklahoma', month: 'Feb', year: '2024', value: 17100000 }, { state: 'Oklahoma', month: 'Mar', year: '2024', value: 19000000 }, { state: 'Oklahoma', month: 'Apr', year: '2024', value: 18400000 }, { state: 'Oklahoma', month: 'May', year: '2024', value: 19000000 }, { state: 'Oklahoma', month: 'Jun', year: '2024', value: 18400000 }, { state: 'Oklahoma', month: 'Jul', year: '2024', value: 19000000 }, { state: 'Oklahoma', month: 'Aug', year: '2024', value: 19200000 }, { state: 'Oklahoma', month: 'Sep', year: '2024', value: 18600000 }, { state: 'Oklahoma', month: 'Oct', year: '2024', value: 19200000 }, { state: 'Oklahoma', month: 'Nov', year: '2024', value: 19400000 }, { state: 'Oklahoma', month: 'Dec', year: '2024', value: 19800000 }, { state: 'Texas', month: 'Jan', year: '2024', value: 165000000 }, { state: 'Texas', month: 'Feb', year: '2024', value: 149000000 }, { state: 'Texas', month: 'Mar', year: '2024', value: 165000000 }, { state: 'Texas', month: 'Apr', year: '2024', value: 160000000 }, { state: 'Texas', month: 'May', year: '2024', value: 165000000 }, { state: 'Texas', month: 'Jun', year: '2024', value: 160000000 }, { state: 'Texas', month: 'Jul', year: '2024', value: 165000000 }, { state: 'Texas', month: 'Aug', year: '2024', value: 168000000 }, { state: 'Texas', month: 'Sep', year: '2024', value: 163000000 }, { state: 'Texas', month: 'Oct', year: '2024', value: 168000000 }, { state: 'Texas', month: 'Nov', year: '2024', value: 170000000 }, { state: 'Texas', month: 'Dec', year: '2024', value: 173000000 }, ];

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const oilProductionData = [ { state: 'Alaska', month: 'Jan', year: '2022', value: 15100000, }, { state: 'Alaska', month: 'Feb', year: '2022', value: 13700000, }, { state: 'Alaska', month: 'Mar', year: '2022', value: 15200000, }, { state: 'Alaska', month: 'Apr', year: '2022', value: 14700000, }, { state: 'Alaska', month: 'May', year: '2022', value: 15100000, }, { state: 'Alaska', month: 'Jun', year: '2022', value: 14500000, }, { state: 'Alaska', month: 'Jul', year: '2022', value: 14100000, }, { state: 'Alaska', month: 'Aug', year: '2022', value: 14300000, }, { state: 'Alaska', month: 'Sep', year: '2022', value: 13800000, }, { state: 'Alaska', month: 'Oct', year: '2022', value: 14900000, }, { state: 'Alaska', month: 'Nov', year: '2022', value: 14900000, }, { state: 'Alaska', month: 'Dec', year: '2022', value: 15300000, }, { state: 'Colorado', month: 'Jan', year: '2022', value: 13300000, }, { state: 'Colorado', month: 'Feb', year: '2022', value: 12000000, }, { state: 'Colorado', month: 'Mar', year: '2022', value: 13300000, }, { state: 'Colorado', month: 'Apr', year: '2022', value: 12900000, }, { state: 'Colorado', month: 'May', year: '2022', value: 13400000, }, { state: 'Colorado', month: 'Jun', year: '2022', value: 12900000, }, { state: 'Colorado', month: 'Jul', year: '2022', value: 13300000, }, { state: 'Colorado', month: 'Aug', year: '2022', value: 13500000, }, { state: 'Colorado', month: 'Sep', year: '2022', value: 13100000, }, { state: 'Colorado', month: 'Oct', year: '2022', value: 13400000, }, { state: 'Colorado', month: 'Nov', year: '2022', value: 13400000, }, { state: 'Colorado', month: 'Dec', year: '2022', value: 13700000, }, { state: 'North Dakota', month: 'Jan', year: '2022', value: 35700000, }, { state: 'North Dakota', month: 'Feb', year: '2022', value: 32300000, }, { state: 'North Dakota', month: 'Mar', year: '2022', value: 35700000, }, { state: 'North Dakota', month: 'Apr', year: '2022', value: 34500000, }, { state: 'North Dakota', month: 'May', year: '2022', value: 35700000, }, { state: 'North Dakota', month: 'Jun', year: '2022', value: 34500000, }, { state: 'North Dakota', month: 'Jul', year: '2022', value: 35700000, }, { state: 'North Dakota', month: 'Aug', year: '2022', value: 35700000, }, { state: 'North Dakota', month: 'Sep', year: '2022', value: 34500000, }, { state: 'North Dakota', month: 'Oct', year: '2022', value: 35700000, }, { state: 'North Dakota', month: 'Nov', year: '2022', value: 35700000, }, { state: 'North Dakota', month: 'Dec', year: '2022', value: 37000000, }, { state: 'New Mexico', month: 'Jan', year: '2022', value: 52000000, }, { state: 'New Mexico', month: 'Feb', year: '2022', value: 47000000, }, { state: 'New Mexico', month: 'Mar', year: '2022', value: 52000000, }, { state: 'New Mexico', month: 'Apr', year: '2022', value: 50500000, }, { state: 'New Mexico', month: 'May', year: '2022', value: 52000000, }, { state: 'New Mexico', month: 'Jun', year: '2022', value: 50500000, }, { state: 'New Mexico', month: 'Jul', year: '2022', value: 52000000, }, { state: 'New Mexico', month: 'Aug', year: '2022', value: 52500000, }, { state: 'New Mexico', month: 'Sep', year: '2022', value: 51000000, }, { state: 'New Mexico', month: 'Oct', year: '2022', value: 52500000, }, { state: 'New Mexico', month: 'Nov', year: '2022', value: 53000000, }, { state: 'New Mexico', month: 'Dec', year: '2022', value: 54000000, }, { state: 'Oklahoma', month: 'Jan', year: '2022', value: 18000000, }, { state: 'Oklahoma', month: 'Feb', year: '2022', value: 16200000, }, { state: 'Oklahoma', month: 'Mar', year: '2022', value: 18000000, }, { state: 'Oklahoma', month: 'Apr', year: '2022', value: 17400000, }, { state: 'Oklahoma', month: 'May', year: '2022', value: 18000000, }, { state: 'Oklahoma', month: 'Jun', year: '2022', value: 17400000, }, { state: 'Oklahoma', month: 'Jul', year: '2022', value: 18000000, }, { state: 'Oklahoma', month: 'Aug', year: '2022', value: 18200000, }, { state: 'Oklahoma', month: 'Sep', year: '2022', value: 17600000, }, { state: 'Oklahoma', month: 'Oct', year: '2022', value: 18200000, }, { state: 'Oklahoma', month: 'Nov', year: '2022', value: 18400000, }, { state: 'Oklahoma', month: 'Dec', year: '2022', value: 18800000, }, { state: 'Texas', month: 'Jan', year: '2022', value: 147000000, }, { state: 'Texas', month: 'Feb', year: '2022', value: 133000000, }, { state: 'Texas', month: 'Mar', year: '2022', value: 147000000, }, { state: 'Texas', month: 'Apr', year: '2022', value: 142000000, }, { state: 'Texas', month: 'May', year: '2022', value: 147000000, }, { state: 'Texas', month: 'Jun', year: '2022', value: 142000000, }, { state: 'Texas', month: 'Jul', year: '2022', value: 147000000, }, { state: 'Texas', month: 'Aug', year: '2022', value: 150000000, }, { state: 'Texas', month: 'Sep', year: '2022', value: 145000000, }, { state: 'Texas', month: 'Oct', year: '2022', value: 150000000, }, { state: 'Texas', month: 'Nov', year: '2022', value: 152000000, }, { state: 'Texas', month: 'Dec', year: '2022', value: 155000000, }, { state: 'Alaska', month: 'Jan', year: '2023', value: 15300000, }, { state: 'Alaska', month: 'Feb', year: '2023', value: 13900000, }, { state: 'Alaska', month: 'Mar', year: '2023', value: 15500000, }, { state: 'Alaska', month: 'Apr', year: '2023', value: 15000000, }, { state: 'Alaska', month: 'May', year: '2023', value: 15300000, }, { state: 'Alaska', month: 'Jun', year: '2023', value: 14700000, }, { state: 'Alaska', month: 'Jul', year: '2023', value: 14300000, }, { state: 'Alaska', month: 'Aug', year: '2023', value: 14500000, }, { state: 'Alaska', month: 'Sep', year: '2023', value: 14100000, }, { state: 'Alaska', month: 'Oct', year: '2023', value: 15100000, }, { state: 'Alaska', month: 'Nov', year: '2023', value: 15200000, }, { state: 'Alaska', month: 'Dec', year: '2023', value: 15600000, }, { state: 'Colorado', month: 'Jan', year: '2023', value: 13600000, }, { state: 'Colorado', month: 'Feb', year: '2023', value: 12300000, }, { state: 'Colorado', month: 'Mar', year: '2023', value: 13600000, }, { state: 'Colorado', month: 'Apr', year: '2023', value: 13200000, }, { state: 'Colorado', month: 'May', year: '2023', value: 13700000, }, { state: 'Colorado', month: 'Jun', year: '2023', value: 13200000, }, { state: 'Colorado', month: 'Jul', year: '2023', value: 13600000, }, { state: 'Colorado', month: 'Aug', year: '2023', value: 13800000, }, { state: 'Colorado', month: 'Sep', year: '2023', value: 13400000, }, { state: 'Colorado', month: 'Oct', year: '2023', value: 13700000, }, { state: 'Colorado', month: 'Nov', year: '2023', value: 13700000, }, { state: 'Colorado', month: 'Dec', year: '2023', value: 14000000, }, { state: 'North Dakota', month: 'Jan', year: '2023', value: 36800000, }, { state: 'North Dakota', month: 'Feb', year: '2023', value: 33400000, }, { state: 'North Dakota', month: 'Mar', year: '2023', value: 36800000, }, { state: 'North Dakota', month: 'Apr', year: '2023', value: 35600000, }, { state: 'North Dakota', month: 'May', year: '2023', value: 36800000, }, { state: 'North Dakota', month: 'Jun', year: '2023', value: 35600000, }, { state: 'North Dakota', month: 'Jul', year: '2023', value: 36800000, }, { state: 'North Dakota', month: 'Aug', year: '2023', value: 36800000, }, { state: 'North Dakota', month: 'Sep', year: '2023', value: 35600000, }, { state: 'North Dakota', month: 'Oct', year: '2023', value: 36800000, }, { state: 'North Dakota', month: 'Nov', year: '2023', value: 36800000, }, { state: 'North Dakota', month: 'Dec', year: '2023', value: 38100000, }, { state: 'New Mexico', month: 'Jan', year: '2023', value: 56000000, }, { state: 'New Mexico', month: 'Feb', year: '2023', value: 51000000, }, { state: 'New Mexico', month: 'Mar', year: '2023', value: 56000000, }, { state: 'New Mexico', month: 'Apr', year: '2023', value: 54500000, }, { state: 'New Mexico', month: 'May', year: '2023', value: 56000000, }, { state: 'New Mexico', month: 'Jun', year: '2023', value: 54500000, }, { state: 'New Mexico', month: 'Jul', year: '2023', value: 56000000, }, { state: 'New Mexico', month: 'Aug', year: '2023', value: 56500000, }, { state: 'New Mexico', month: 'Sep', year: '2023', value: 55000000, }, { state: 'New Mexico', month: 'Oct', year: '2023', value: 56500000, }, { state: 'New Mexico', month: 'Nov', year: '2023', value: 57000000, }, { state: 'New Mexico', month: 'Dec', year: '2023', value: 58000000, }, { state: 'Oklahoma', month: 'Jan', year: '2023', value: 18500000, }, { state: 'Oklahoma', month: 'Feb', year: '2023', value: 16700000, }, { state: 'Oklahoma', month: 'Mar', year: '2023', value: 18500000, }, { state: 'Oklahoma', month: 'Apr', year: '2023', value: 17900000, }, { state: 'Oklahoma', month: 'May', year: '2023', value: 18500000, }, { state: 'Oklahoma', month: 'Jun', year: '2023', value: 17900000, }, { state: 'Oklahoma', month: 'Jul', year: '2023', value: 18500000, }, { state: 'Oklahoma', month: 'Aug', year: '2023', value: 18700000, }, { state: 'Oklahoma', month: 'Sep', year: '2023', value: 18100000, }, { state: 'Oklahoma', month: 'Oct', year: '2023', value: 18700000, }, { state: 'Oklahoma', month: 'Nov', year: '2023', value: 18900000, }, { state: 'Oklahoma', month: 'Dec', year: '2023', value: 19300000, }, { state: 'Texas', month: 'Jan', year: '2023', value: 158000000, }, { state: 'Texas', month: 'Feb', year: '2023', value: 143000000, }, { state: 'Texas', month: 'Mar', year: '2023', value: 158000000, }, { state: 'Texas', month: 'Apr', year: '2023', value: 153000000, }, { state: 'Texas', month: 'May', year: '2023', value: 158000000, }, { state: 'Texas', month: 'Jun', year: '2023', value: 153000000, }, { state: 'Texas', month: 'Jul', year: '2023', value: 158000000, }, { state: 'Texas', month: 'Aug', year: '2023', value: 161000000, }, { state: 'Texas', month: 'Sep', year: '2023', value: 156000000, }, { state: 'Texas', month: 'Oct', year: '2023', value: 161000000, }, { state: 'Texas', month: 'Nov', year: '2023', value: 163000000, }, { state: 'Texas', month: 'Dec', year: '2023', value: 166000000, }, { state: 'Alaska', month: 'Jan', year: '2024', value: 15400000, }, { state: 'Alaska', month: 'Feb', year: '2024', value: 14100000, }, { state: 'Alaska', month: 'Mar', year: '2024', value: 15700000, }, { state: 'Alaska', month: 'Apr', year: '2024', value: 15200000, }, { state: 'Alaska', month: 'May', year: '2024', value: 15500000, }, { state: 'Alaska', month: 'Jun', year: '2024', value: 14900000, }, { state: 'Alaska', month: 'Jul', year: '2024', value: 14500000, }, { state: 'Alaska', month: 'Aug', year: '2024', value: 14800000, }, { state: 'Alaska', month: 'Sep', year: '2024', value: 14300000, }, { state: 'Alaska', month: 'Oct', year: '2024', value: 15400000, }, { state: 'Alaska', month: 'Nov', year: '2024', value: 15500000, }, { state: 'Alaska', month: 'Dec', year: '2024', value: 15800000, }, { state: 'Colorado', month: 'Jan', year: '2024', value: 13800000, }, { state: 'Colorado', month: 'Feb', year: '2024', value: 12500000, }, { state: 'Colorado', month: 'Mar', year: '2024', value: 13800000, }, { state: 'Colorado', month: 'Apr', year: '2024', value: 13400000, }, { state: 'Colorado', month: 'May', year: '2024', value: 13900000, }, { state: 'Colorado', month: 'Jun', year: '2024', value: 13400000, }, { state: 'Colorado', month: 'Jul', year: '2024', value: 13800000, }, { state: 'Colorado', month: 'Aug', year: '2024', value: 14000000, }, { state: 'Colorado', month: 'Sep', year: '2024', value: 13600000, }, { state: 'Colorado', month: 'Oct', year: '2024', value: 13900000, }, { state: 'Colorado', month: 'Nov', year: '2024', value: 13900000, }, { state: 'Colorado', month: 'Dec', year: '2024', value: 14200000, }, { state: 'North Dakota', month: 'Jan', year: '2024', value: 37900000, }, { state: 'North Dakota', month: 'Feb', year: '2024', value: 34400000, }, { state: 'North Dakota', month: 'Mar', year: '2024', value: 37900000, }, { state: 'North Dakota', month: 'Apr', year: '2024', value: 36600000, }, { state: 'North Dakota', month: 'May', year: '2024', value: 37900000, }, { state: 'North Dakota', month: 'Jun', year: '2024', value: 36600000, }, { state: 'North Dakota', month: 'Jul', year: '2024', value: 37900000, }, { state: 'North Dakota', month: 'Aug', year: '2024', value: 37900000, }, { state: 'North Dakota', month: 'Sep', year: '2024', value: 36600000, }, { state: 'North Dakota', month: 'Oct', year: '2024', value: 37900000, }, { state: 'North Dakota', month: 'Nov', year: '2024', value: 37900000, }, { state: 'North Dakota', month: 'Dec', year: '2024', value: 39200000, }, { state: 'New Mexico', month: 'Jan', year: '2024', value: 60000000, }, { state: 'New Mexico', month: 'Feb', year: '2024', value: 54500000, }, { state: 'New Mexico', month: 'Mar', year: '2024', value: 60000000, }, { state: 'New Mexico', month: 'Apr', year: '2024', value: 58500000, }, { state: 'New Mexico', month: 'May', year: '2024', value: 60000000, }, { state: 'New Mexico', month: 'Jun', year: '2024', value: 58500000, }, { state: 'New Mexico', month: 'Jul', year: '2024', value: 60000000, }, { state: 'New Mexico', month: 'Aug', year: '2024', value: 60500000, }, { state: 'New Mexico', month: 'Sep', year: '2024', value: 59000000, }, { state: 'New Mexico', month: 'Oct', year: '2024', value: 60500000, }, { state: 'New Mexico', month: 'Nov', year: '2024', value: 61000000, }, { state: 'New Mexico', month: 'Dec', year: '2024', value: 62000000, }, { state: 'Oklahoma', month: 'Jan', year: '2024', value: 19000000, }, { state: 'Oklahoma', month: 'Feb', year: '2024', value: 17100000, }, { state: 'Oklahoma', month: 'Mar', year: '2024', value: 19000000, }, { state: 'Oklahoma', month: 'Apr', year: '2024', value: 18400000, }, { state: 'Oklahoma', month: 'May', year: '2024', value: 19000000, }, { state: 'Oklahoma', month: 'Jun', year: '2024', value: 18400000, }, { state: 'Oklahoma', month: 'Jul', year: '2024', value: 19000000, }, { state: 'Oklahoma', month: 'Aug', year: '2024', value: 19200000, }, { state: 'Oklahoma', month: 'Sep', year: '2024', value: 18600000, }, { state: 'Oklahoma', month: 'Oct', year: '2024', value: 19200000, }, { state: 'Oklahoma', month: 'Nov', year: '2024', value: 19400000, }, { state: 'Oklahoma', month: 'Dec', year: '2024', value: 19800000, }, { state: 'Texas', month: 'Jan', year: '2024', value: 165000000, }, { state: 'Texas', month: 'Feb', year: '2024', value: 149000000, }, { state: 'Texas', month: 'Mar', year: '2024', value: 165000000, }, { state: 'Texas', month: 'Apr', year: '2024', value: 160000000, }, { state: 'Texas', month: 'May', year: '2024', value: 165000000, }, { state: 'Texas', month: 'Jun', year: '2024', value: 160000000, }, { state: 'Texas', month: 'Jul', year: '2024', value: 165000000, }, { state: 'Texas', month: 'Aug', year: '2024', value: 168000000, }, { state: 'Texas', month: 'Sep', year: '2024', value: 163000000, }, { state: 'Texas', month: 'Oct', year: '2024', value: 168000000, }, { state: 'Texas', month: 'Nov', year: '2024', value: 170000000, }, { state: 'Texas', month: 'Dec', year: '2024', value: 173000000, }, ];

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

#chart { height: 440px; }

Enable aggregation.
You can enable data aggregation for the following series:
- Individual series
  Assign true to the series.aggregation.enabled property.
- All series of a specific type
  Assign true to the aggregaion.enabled property that belongs to the configuration object of a specific series type.
- All series in the Chart
  Assign true to the commonSeriesSettings.aggregation.enabled property.

Individual series aggregation settings have priority over common aggregation settings in the component. For example, you can enable aggregation for all series and disable it for a specific series.

In this demo, data aggregation is enabled for all series.

Specify an aggregation method (optional).
In this demo, the sum method is used.