Vue Chart - series.aggregation

Configures data aggregation for the series.

Selector: DxAggregation
Type:

Object

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

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:

ChartSeriesAggregationMethod

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

The following list describes available aggregation methods for 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.
See Also