Display only integer values for ticks

[psergey]

Hi,
Is it possible to display only integer value on the axis?
So for instance we have next data points

        dataPoints: [
        { y: 71, x: 1},
        { y: 55, x: 2},
        { y: 50, x: 3},
        { y: 65, x: 4},
        { y: 95, x: 5},
        { y: 68, x: 6},
        { y: 28, x: 7},
        { y: 34, x: 8},
        { y: 14, x: 9}
        ]
      }

and when we try to zoom our then chart starts display float values for ticks, like 3, 3.5, 4, etc. but we need to have just 3, 4, 5…

Please, see an example: https://jsfiddle.net/tn2u0650/18/

Thanks

• This topic was modified 6 years, 6 months ago by psergey.

[Vishwas R]

@psergey,

You can set interval to 1 to avoid showing values between the dataPoint x-values. Please take a look at this updated JSFiddle. Alternately, you can also use labels instead of x to do the same as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS

[psergey]

Hi @vishwas,

Thank you for your answer.

[psergey]

Hi @vishwas,

We faced out with a problem of displaying integer values for multi-series chart
1) If series start not from the same data-point position and use label approach you suggested, then label displays not correctly
https://jsfiddle.net/tn2u0650/32/
but if adds empty elements as stub for missing points then chart looks good https://jsfiddle.net/tn2u0650/31/

2) If set interval to 1 then chart looks bad for big range, for instance if we have 800 items than all range from 1 till 800 will be displayed on X-asix

Any suggestion, or we need to go with #1

Thanks

[Vishwas R]

@psergey,

1) If series start not from the same data-point position and use label approach you suggested, then label displays not correctly
https://jsfiddle.net/tn2u0650/32/ but if adds empty elements as stub for missing points then chart looks good https://jsfiddle.net/tn2u0650/31/

You can use x-value along with labels to align all data-points based on x-values properly. Please take a look at this updated JSFiddle.

2) If set interval to 1 then chart looks bad for big range, for instance if we have 800 items than all range from 1 till 800 will be displayed on X-asix

Calculation of axis interval depends on various factors like axis-minimum, axis-maximum, number of labels that can be shown within that range of axis, length of axis etc. When you set interval to a value, it doesn’t auto-calculate instead accepts the value that you have assigned irrespective of range, number of data-points and length of axis. You can either remove hard-coded interval so that it will be auto-calculated or you can calculate based on range, number of ticks as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS