Vue Chart - valueAxis.tickInterval

Specifies the interval between major ticks. Does not apply to discrete axes.

Type:

Number

|

Object

|

String

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

If the axis displays numbers, set the tickInterval to a number. This number should fall into a range of 0 to 1 for a full-stacked series. For example, a tickInterval of 0.2 places a tick every 20%. If the axis displays date-time values, set the tickInterval to an accepted string value or object that contains one of the fields described in this section, for example:

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        valueAxis: {
            // ...
            tickInterval: { days: 5 }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxi-value-axis ... >
        <dxo-tick-interval [days]="5"></dxo-tick-interval>
    </dxi-value-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxChart ... >
        <DxValueAxis>
            <DxTickInterval :days="5" />
        </DxValueAxis>
    </DxChart>
</template>

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

export default {
    components: {
        DxChart,
        DxValueAxis,
        DxTickInterval
    }
}
</script>
React
App.js
import React from 'react';

import Chart, {
    ValueAxis,
    TickInterval
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ValueAxis>
                    <TickInterval days={5} />
                </ValueAxis>
            </Chart>
        );
    }
}

export default App;

When you use a "logarithmic" type axis, ticks are generated as an exponentiation. For example, assuming that the logarithm base is 10 and the tick interval is 1, ticks are generated at 10-2, 10-1, 100, 101, 102, 103, etc. If the tick interval is 2, ticks are generated at 10-1, 101, 103, etc.

When using the widget as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, you can specify this option with the VizTimeInterval enum which accepts the same predefined 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