I have a Charts.js Bar-Chart with whole Numbers, like 1,2,3,4,5 - I will never have 1.5 , 2.7 etc. But the Charts shows all the decimal Numbers, like in the Screenshot. I want that the Chart only shows whole number. I can't find a Solution for this. Can you help me?

Screenshot of my Chart

This is my Configuration:

type: 'bar',
  data: {
    labels: departmentLabels,
    datasets: [{
      label: 'Staff',
      backgroundColor: color(window.chartColors.grey).alpha(0.5).rgbString(),
      borderColor: window.chartColors.black,
      borderWidth: 1,
      data: departmentCount
    }]
  },
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Usage by Department'
    },
  }

I have a Charts.js Bar-Chart with whole Numbers, like 1,2,3,4,5 - I will never have 1.5 , 2.7 etc. But the Charts shows all the decimal Numbers, like in the Screenshot. I want that the Chart only shows whole number. I can't find a Solution for this. Can you help me?

Screenshot of my Chart

This is my Configuration:

type: 'bar',
  data: {
    labels: departmentLabels,
    datasets: [{
      label: 'Staff',
      backgroundColor: color(window.chartColors.grey).alpha(0.5).rgbString(),
      borderColor: window.chartColors.black,
      borderWidth: 1,
      data: departmentCount
    }]
  },
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Usage by Department'
    },
  }

• javascript
• chart.js

• what do you mean by comma? – Aroon Commented Nov 7, 2018 at 11:35

3 Answers 3

A better way to do it which allows for scaling is to use the precision property:

scales: {
    y: {
        ticks: {
            precision: 0
        }
    }
}

This way, if you add a 100 or something, it can increase the step size if needed. It just won't even lower it below 1.

You can use the stepSize property:

scales: {
  yAxes: [{
    ticks: {
      stepSize: 1
    }
  }]
}

Try with this code inside the option section

 scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function(value) {if (value % 1 === 0) {return value;}}
        }
      }]
    }