Vue Chart - series.aggregation

Configures data aggregation for the series.

Type:

Object

If the Chart contains many series points, displaying all of them may lower its performance. In this case, it is better to 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. Alternatively, series points can be aggregated by categories.

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

calculate

Specifies a custom aggregate function. Applies only if the aggregation method is "custom".

Type:

Function

Function parameters:
aggregationInfo:

Point Aggregation Info

An object with information about the aggregation interval and the data objects that fall within it.

series:

Series

The series to which the aggregate function is being applied.

Return Value:

Object

|

Array<Object>

One or several aggregated data objects. Should have the same structure as the original data objects.

Default Value: undefined

jQuery
JavaScript
$(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
HTML
TypeScript
<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
App.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
App.js
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;

enabled

Enables data aggregation for the series.

Type:

Boolean

Default Value: false

See Also

method

Specifies how to aggregate series points.

Type:

String

Accepted Values: 'avg' | 'count' | 'max' | 'min' | 'ohlc' | 'range' | 'sum' | 'custom'

Series points are aggregated by individual aggregation intervals (on continuous and logarithmic axes) or by categories (on discrete axes if aggregateByCategory is true).

The following list describes available aggregation methods per series type:

  • Line, bar, area, and Scatter series:

    • "avg"
      Calculates the average of all point values in an interval.

    • "count"
      Calculates the number of points in an interval.

    • "max"
      Calculates the maximum point value in an interval.

    • "min"
      Calculates the minimum point value in an interval.

    • "sum"
      Calculates the sum of all point values in an interval.

  • Bubble series:

    • "avg"
      Calculates the average of all point values in an interval.

  • Financial series:

    • "ohlc"
      Calculates the first open, last close, minimum low, and maximum high value in an interval.

  • Range series:

    • "range"
      Calculates the range of values in an interval.

  • All series types:

    • "custom"
      Applies a custom aggregate function specified in the calculate property.

Use the ChartSeriesAggregationMethod enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Avg, Count, Max, Min, Ohlc, Range, Sum, and Custom.

See Also