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.
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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.