score:141

Accepted answer

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

score:0

if your chartjs version above 2.8 you can easily use precision: 0

study the below example

      responsive: true,
      maintainaspectratio: false,
      title: {
        display: true,
        position: 'top',
        text: 'monthly establish documents value',
        fontsize: 25
      },
      scales: {
        xaxes: [
          {
            stacked: true,
            scalelabel: {
              display: true,
              labelstring: 'months'
            }
          }
        ],

        yaxes: [
          {
            stacked: true,
            beginatzero: true,
            id: 'a',
            scalelabel: {
              display: true,
              labelstring: '$aud'
            }
          },
          {
            stacked: false,
            beginatzero: true,
            id: 'b',
            gridlines: {
              display: false
            },
            scalelabel: {
              display: true,
              labelstring: '#clients '
            },
            position: 'right',
            ticks: {
              min: 0,
              precision: 0
            }
          }
        ]
      }
    } ```

score:0

chart.js v3 (2022+)

the most reliable way with chart.js v3 is not to use ticks.precision, but instead provide your own formatter with ticks.callback.

example on how to format y axis labels:

scales: {
  y: {
    ticks: {
      callback: (yvalue) => {
        return math.floor(yvalue); // format to your liking
      },
    },
  },
}

documentation: https://www.chartjs.org/docs/latest/samples/scale-options/ticks.html

score:1

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.

score:1

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.

score:4

the easiest and most straight forward solution is to add these configurations to your options object:

    scales: {
  yaxes: [
    {
      ticks: {
        precision: 0,
        beginatzero: true,
      },
    },
  ],
},

and define the axes (in my case it is the yaxes) depending on your axes with fractions

score:22

you can adding stepsize and beginatzero option like this:

scales: {
  yaxes: [{
    ticks: {
      stepsize: 1,
      beginatzero: true,
    },
  }],
},

score:32

another alternative is to use the fixedstepsize option as follows:

options = {
    scales: {
        yaxes: [{
            ticks: {
                fixedstepsize: 1
            }
        }],
    },
};

score:87

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
      }
    }]
  }
}

Related Query

More Query from same tag