Search code examples
javascriptangulardevextreme

DevExtreme Charts - Set number of ticks on the valueAxis (y axis)

We have charts like the two below:

enter image description here enter image description here

Notice that both charts have different number of ticks on the y axis: 7 ticks from 0 to 180,000 10 ticks from $0 to $1,000

Is it possible to set a fixed number of ticks so we could always have the first tick at 0 and the other values spread into just 5 more ticks?

6 ticks from 0 to 180,000 6 ticks from $0 to $1,000

Thanks a lot in advance!

Solution

  • You can set the tickInterval property on the valueAxis settings. See this codepen for an example. https://codepen.io/anon/pen/dzwomL

    For a more visual approach, you could also play around with the axisDevisionFactor. Here is the documention on that https://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Configuration/valueAxis/tickInterval/