Angular Chart - RangeAreaSeries.aggregation
Displaying all the points of a Chart with many series points can affect performance. In this case, aggregate the series points or replace a group of them with a single point. The group includes only those points that fall within the same interval on the argument axis. See aggregationInterval and aggregationGroupWidth for details on dividing the axis into intervals.
The Chart provides several aggregation methods, which differ depending on the series type, and a capability to implement a custom aggregate function. To enable data aggregation for the series, set the aggregation.enabled property to true.
See Also
- Points Aggregation Demo: Multi-Series Chart | Financial Chart
- Data Aggregation
- autoHidePointMarkers
calculate
Specifies a custom aggregate function. Applies only if the aggregation method is "custom".
jQuery
$(function() { $("#chartContainer").dxChart({ // ... series: [{ // ... aggregation: { enabled: true, method: "custom", calculate: function (aggregationInfo, series) { var dataObjects = aggregationInfo.data; var result = { }; // or [ ] // ... // Aggregate the data objects here // ... return result; } } }] }); });
Angular
<dx-chart ... > <dxi-series ... > <dxo-aggregation [enabled]="true" method="custom" [calculate]="customAggregateFunc"> </dxo-aggregation> </dxi-series> </dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { customAggregateFunc (aggregationInfo, series) { let dataObjects = aggregationInfo.data; let result = { }; // or [ ] // ... // Aggregate the data objects here // ... return result; }; } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Vue
<template> <DxChart ... > <DxSeries ... > <DxAggregation :calculate="customAggregateFunc" /> </DxSeries> </DxChart> </template> <script> import DxChart, { DxSeries, DxAggregation } from 'devextreme-vue/chart'; export default { components: { DxChart, DxSeries, DxAggregation }, methods: { customAggregateFunc (aggregationInfo, series) { const dataObjects = aggregationInfo.data; let result = { }; // or [ ] // ... // Aggregate the data objects here // ... return result; } } } </script>
React
import React from 'react'; import Chart, { Series, Aggregation } from 'devextreme-react/chart'; class App extends React.Component { render() { return ( <Chart ... > <Series ... > <Aggregation calculate={this.customAggregateFunc} /> </Series> </Chart> ); } customAggregateFunc (aggregationInfo, series) { let dataObjects = aggregationInfo.data; let result = { }; // or [ ] // Aggregate the data objects here return result; } } export default App;
method
Series points get aggregated by individual aggregation intervals. The following list describes aggregation methods available for series of the Range Area type:
"range"
Calculates the range of values in an interval."custom"
Applies a custom aggregate function specified in the calculate property.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.