Skip decimal points on y-axis in chartJS

Question

I am using this library to draw charts in my web app. The issue is that I am having decimal points in my y-axis. You can see that in the image below

Is there a way

Answer 1

2019 Update

This can now easily be achieved using the precision option:

ticks: {
  precision:0
}

As per the documentation.

If defined and stepSize is not specified, the step size will be rounded to this many decimal places.

EXAMPLE

options: {
  scale: {
    ticks: {
      precision: 0
    }
  }
}

OR (Single Axis)

options: {
  scales: {
    xAxes: [{
      ticks: {
        precision: 0
      }
    }]
  }
}

Answer 2

You can yaxis optopn;

decimalsInFloat: Number

Number of fractions to display when there are floating values in y-axis. Note: If you have defined a custom formatter function in yaxis.labels.formatter, this won’t have any effect.

Answer 3

Update: please see an updated answer from @DreamTeK that shows how this can now be done as part of the chartjs api https://stackoverflow.com/a/54006487/2737978

---

in chartjs 2.x you can pass an option for a userCallback to the yaxis tick field. In this you can check if the label is a whole number

here is an example

 options = {
     scales: {
         yAxes: [{
             ticks: {
                 beginAtZero: true,
                 userCallback: function(label, index, labels) {
                     // when the floored value is the same as the value we have a whole number
                     if (Math.floor(label) === label) {
                         return label;
                     }

                 },
             }
         }],
     },
 }

fiddle example

Answer 4

Another alternative is to use the fixedStepSize option as follows:

options = {
    scales: {
        yAxes: [{
            ticks: {
                fixedStepSize: 1
            }
        }],
    },
};

Answer 5

by the latest version this option changed to

scales: {
  yAxes: [{
    ticks: {
      stepSize: 1,
      beginAtZero: true,
    },
  }],
},

Answer 6

I use this:

yAxes: [
        {
            ticks: {
                    callback: function(val) {
                    return Number.isInteger(val) ? val : null;
                }
            }
        }
    ]

Note: use the callback function for better granular control. We check if val is an integer instead of a floating-point decimal. If it is, we return the value. If not, we return null.