JavaScript/jQuery Chart - valueAxis.tickInterval
Specifies the interval between major ticks. Does not apply to discrete axes.
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
$(function() {
$("#chartContainer").dxChart({
// ...
valueAxis: {
// ...
tickInterval: { days: 5 }
}
});
});Angular
<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
<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
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 UI component as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, you can specify this property 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
- valueAxis.tick
- valueAxis.minorTickInterval
days
Specifies the time interval measured in days. Accepts integer values. Available only for an axis/scale that displays date-time values.
hours
Specifies the time interval measured in hours. Accepts integer values. Available only for an axis/scale that displays date-time values.
milliseconds
Specifies the time interval measured in milliseconds. Accepts integer values. Available only for an axis/scale that displays date-time values.
minutes
Specifies the time interval measured in minutes. Accepts integer values. Available only for an axis/scale that displays date-time values.
months
Specifies the time interval measured in months. Accepts integer values. Available only for an axis/scale that displays date-time values.
quarters
Specifies the time interval measured in quarters. Accepts integer values. Available only for an axis/scale that displays date-time values.
seconds
Specifies the time interval measured in seconds. Accepts integer values. Available only for an axis/scale that displays date-time values.
weeks
Specifies the time interval measured in weeks. Accepts integer values. Available only for an axis/scale that displays date-time values.
years
Specifies the time interval measured in years. Accepts integer values. Available only for an axis/scale that displays date-time values.