Backend API
$(() => {
$('#chart').dxChart({
dataSource,
title: {
text: 'Production of Crude Oil',
subtitle: '(in Barrels)',
},
commonSeriesSettings: {
aggregation: {
enabled: true,
method: 'sum',
},
argumentField: 'state',
valueField: 'value',
type: 'bar',
},
seriesTemplate: {
nameField: 'year',
},
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 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" />
<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/25.2.6/css/dx.light.css" />
<script src="js/dx.all.js?v=25.2.6"></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"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}
const dataSource = [
{ 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 },
];
-
Enable aggregation.
You can enable data aggregation for the following series:-
Individual series
Assigntrueto the series.aggregation.enabled property. -
All series of a specific type
Assigntrueto theaggregaion.enabledproperty that belongs to the configuration object of a specific series type. -
All series in the Chart
Assigntrueto 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, thesummethod is used.