Backend API
<dx-chart id="chart" [dataSource]="dataSource">
<dxo-chart-title text="Production of Crude Oil">
<dxo-chart-subtitle text="(in Barrels)"></dxo-chart-subtitle>
</dxo-chart-title>
<dxo-chart-common-series-settings
argumentField="state"
valueField="value"
type="bar"
>
<dxo-chart-aggregation enabled="true" method="sum"></dxo-chart-aggregation>
</dxo-chart-common-series-settings>
<dxo-chart-series-template nameField="year"></dxo-chart-series-template>
</dx-chart>
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
import { DxChartModule } from 'devextreme-angular';
import { Service, OilProductionItem } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Service],
imports: [
DxChartModule,
],
})
export class AppComponent {
dataSource: OilProductionItem[];
constructor(service: Service) {
this.dataSource = service.getOilProductionData();
}
}
bootstrapApplication(AppComponent, {
providers: [
provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
],
});
::ng-deep #chart {
height: 440px;
}
import { Injectable } from '@angular/core';
export class OilProductionItem {
state: string;
month: string;
year: string;
value: number;
}
const oilProductionData: OilProductionItem[] = [
{ 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 },
];
@Injectable()
export class Service {
getOilProductionData(): OilProductionItem[] {
return oilProductionData;
}
}
<!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" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script>
<script src="./bundle.js" type="module"></script>
</body>
</html>
-
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.