Vue Chart - StockSeries.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:

ChartFinancialSeriesAggregationMethod

Default Value: 'ohlc'

Series points get aggregated by individual aggregation intervals. The following list describes aggregation methods available for series of the Stock type:

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

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

See Also