CODEWITHSUNDEEP
javascriptchart.js
nuriye
nuriye

Reputation: 199

Charts.js Y-Axis whole Numbers

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'
    },
  }

Upvotes: 7

Views: 4993

Answers (3)

Ullallulloo
Ullallulloo

Reputation: 1230

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.

Upvotes: 11

Chris Ritchie
Chris Ritchie

Reputation: 4826

You can use the stepSize property:

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

Upvotes: 10

Aroon
Aroon

Reputation: 1029

Try with this code inside the option section

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

Upvotes: 2

Related Questions