Vue Charts - Discrete Points Aggregation

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

Backend API

<template> <DxChart id="chart" :data-source="dataSource" > <DxTitle text="Production of Crude Oil"> <DxSubtitle text="(in Barrels)"/> </DxTitle> <DxCommonSeriesSettings argument-field="state" value-field="value" type="bar" > <DxAggregation :enabled="true" method="sum" /> </DxCommonSeriesSettings> <DxSeriesTemplate name-field="year"/> </DxChart> </template> <script setup lang="ts"> import DxChart, { DxTitle, DxSubtitle, DxCommonSeriesSettings, DxAggregation, DxSeriesTemplate, } from 'devextreme-vue/chart'; import { oilProductionData } from './data.ts'; const dataSource = oilProductionData; </script> <style> #chart { height: 440px; } </style>

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 { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!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/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

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.