React RangeSelector - scale.aggregationInterval

Specifies the length of aggregation intervals in scale units. Applies only to the scale of the continuous or logarithmic type.

Type:

Number

|

Object

|

String

Default Value: undefined
Accepted Values: 'day' | 'hour' | 'millisecond' | 'minute' | 'month' | 'quarter' | 'second' | 'week' | 'year'

For data aggregation, the scale 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 scale 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 scale 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() {
    $("#rangeSelectorContainer").dxRangeSelector({
        // ...
        scale: {
            // Interval of one day
            aggregationInterval: "day",
            // Interval of five days
            aggregationInterval: { days: 5 }
        }
    });
});
Angular
HTML
TypeScript
<dx-range-selector ... >
    <dxo-scale
        aggregationInterval="day"> <!-- Interval of one day -->
        <dxo-aggregation-interval
            [days]="5">            <!-- Interval of five days -->
        </dxo-aggregation-interval>
    </dxo-scale>
</dx-range-selector>
import { DxRangeSelectorModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxRangeSelectorModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxRangeSelector ... >
        <DxScale
            aggregation-interval="day">     <!-- Interval of one day -->
            <DxAggregationInterval 
                :days="5" />                <!-- Interval of five days -->
        </DxScale>
    </DxRangeSelector>
</template>

<script>
import DxRangeSelector, {
    DxScale,
    DxAggregationInterval
} from 'devextreme-vue/range-selector';

export default {
    components: {
        DxRangeSelector,
        DxScale,
        DxAggregationInterval
    }
}
</script>
React
App.js
import React from 'react';

import RangeSelector, {
    Scale,
    AggregationInterval
} from 'devextreme-react/range-selector';

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

export default App;

On a logarithmic scale, intervals are based on powers. For example, if the logarithmBase is 10 and the aggregationInterval is 1, the following intervals are produced: 100 to 101, 101 to 102, 102 to 103, etc. If the aggregationInterval becomes 2, intervals become longer: 100 to 102, 102 to 104, 104 to 106, etc.

When using the UI component as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, you can specify this property using the VizTimeInterval enum. This enum accepts the same values, but they start with an upper-case letter, for example, "day" becomes Day.

See Also

days

Specifies the time interval measured in days. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

hours

Specifies the time interval measured in hours. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

milliseconds

Specifies the time interval measured in milliseconds. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

minutes

Specifies the time interval measured in minutes. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

months

Specifies the time interval measured in months. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

quarters

Specifies the time interval measured in quarters. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

seconds

Specifies the time interval measured in seconds. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

weeks

Specifies the time interval measured in weeks. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number

years

Specifies the time interval measured in years. Accepts integer values. Available only for an axis/scale that displays date-time values.

Type:

Number