Round Y-Axis Number Label

[afreay]

Hello,

I am trying to round the Y-Axis Number Label to the nearest whole number. This graph in particular could hold numbers as high as 100, so I did not think assigning a static variable for the Y-Axis Interval would be a good option.

Below is a JSFiddle I constructed to replicate my issue with the Y-Axis Number Labels showing in decimal places versus the whole number.

https://jsfiddle.net/oLja1pks/

Any advice would be very appreciative!

[Indranil]

@afreay,

You can use valueFormatString to show the labels as a whole number. Also if you want to display labels only at the whole number position, you can use interval property. Please check the below code snippet –

axisY: {
  valueFormatString: "#",
  interval: 1
},

Kindly check this updated JSFiddle for a working example.

___________
Indranil Deo
Team CanvasJS

[afreay]

Hello,

While this code works perfectly, there could be some fluctuation on the Y axis values. There could be, for example, 50 as the value of a datapoint; and the interval display would be rather crammed to fit it all inside if the interval was just set to 1. Is there a way to make this more dynamic?

[Indranil]

@afreay,

Based on your scenario, removing interval property will allow the library to auto-calculate interval according to the range of data. Please take a look at this updated JSFiddle for an example on chart with auto-calculated interval.

___________
Indranil Deo
Team CanvasJS

[afreay]

I am having a difficult time having the Y-Axis display correctly.

Here’s a sample JsFiddle to show my issue: https://jsfiddle.net/oed05qba/1/

[Indranil]

@afreay,

Axis labels are shown at every interval which is auto-calculated based on parameters like axis minimum, axis maximum, etc. In your case, since the range of Y-Axis is small the labels are shown in decimals. Hence, using the valueFormatString will just round off the labels to the nearest whole number but won’t affect the interval, as a result, the labels might get repeated.

___________
Indranil Deo
Team CanvasJS