aggregationInterval.md

id	dxChart.Options.argumentAxis.aggregationInterval
inherits	VizTimeInterval
type	Number | Object | Enums.TimeInterval

---

shortDescription

Specifies the length of aggregation intervals in axis units. Applies only to axes of continuous and logarithmic types.

---

For data aggregation, the argument axis is divided into intervals. Series points that fall within the same interval get aggregated together. The aggregationInterval property defines the length of each interval.

If the axis displays numbers, assign a number to this property. For example, an aggregationInterval of 100 produces the following intervals: 0 to 100, 100 to 200, 200 to 300, etc. If the axis displays date-time values, set this property to one of the accepted string values. Alternatively, you can set it to an object that contains one of the fields described in this section.

---

jQuery

<!--JavaScript-->$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            // Interval of one day
            aggregationInterval: "day",
            // Interval of five days
            aggregationInterval: { days: 5 }
        }
    });
});

Angular

<!--HTML--><dx-chart ... >
    <dxo-chart-argument-axis
        aggregationInterval="day"> <!-- Interval of one day -->
        <dxo-chart-aggregation-interval
            [days]="5">            <!-- Interval of five days -->
        </dxo-chart-aggregation-interval>
    </dxo-chart-argument-axis>
</dx-chart>

<!--TypeScript-->
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

<!-- tab: App.vue -->
<template>
    <DxChart ... >
        <DxArgumentAxis
            aggregation-interval="day">     <!-- Interval of one day -->
            <DxAggregationInterval 
                :days="5" />                <!-- Interval of five days -->
        </DxArgumentAxis>
    </DxChart>
</template>

<script>
import DxChart, {
    DxArgumentAxis,
    DxAggregationInterval
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxArgumentAxis,
        DxAggregationInterval
    }
}
</script>

React

<!-- tab: App.js -->
import React from 'react';

import Chart, {
    ArgumentAxis,
    AggregationInterval
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis
                    aggregationInterval={"day"}>    {/* Interval of one day */}
                    <AggregationInterval 
                        days={5} />                 {/* Interval of five days */}
                </ArgumentAxis>
            </Chart>
        );
    }
}

export default App;     

---

On a logarithmic axis, intervals are calculated based on powers. For example, if the logarithmBase is 10 and the aggregationInterval is 1, the following intervals are produced: 10⁰ to 10¹, 10¹ to 10², 10² to 10³, etc. If the aggregationInterval becomes 2, intervals become longer: 10⁰ to 10², 10² to 10⁴, 10⁴ to 10⁶, etc.

#include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/PointsAggregation/" }

#####See Also#####

• Data Aggregation
• series.aggregation
• aggregationGroupWidth