How to display only integers in javascript chart.js

Question

I want to display only integers not floats in the chart created by java script library chartjs.org

Here is the link to the example graph

I am new to this Can someone help me to configure this

Answer 1

This is the way to do it using chart.js 2.5 : Just add this callback function to the yAxes ticks property

function (value) { if (Number.isInteger(value)) { return value; } }

or just use stepSize: 1 in the same place.

jsFiddle: https://jsfiddle.net/alelase/6f8wrz03/2/

var ctx = document.getElementById("chart1");   var data = {          labels: ['John', 'Alex', 'Walter', 'James', 'Andrew', 'July'],          datasets: [              {                  label:  "Messages: ",                  data: [1, 2 , 5, 4, 3, 6],                  backgroundColor: [                  'rgba(255, 99, 132, 0.2)',                  'rgba(54, 162, 235, 0.2)',                  'rgba(255, 206, 86, 0.2)',                  'rgba(75, 192, 192, 0.2)',                  'rgba(153, 102, 255, 0.2)',                  'rgba(255, 159, 64, 0.2)'              ],              borderColor: [                  'rgba(255,99,132,1)',                  'rgba(54, 162, 235, 1)',                  'rgba(255, 206, 86, 1)',                  'rgba(75, 192, 192, 1)',                  'rgba(153, 102, 255, 1)',                  'rgba(255, 159, 64, 1)'              ]              }]      };    var myChart = new Chart(ctx, {          type: 'bar',          data: data,          beginAtZero: true,          options: {              responsive: true,              legend: {                  display: false              },              title: {                  display: false,                  text: 'Chart.js bar Chart'              },              animation: {                  animateScale: true              },              scales: {                  yAxes: [{                      ticks: {                          beginAtZero: true,                          callback: function (value) { if (Number.isInteger(value)) { return value; } },                          stepSize: 1                      }                  }]              }          }      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>      <div>    <canvas id="chart1"></canvas>  </div>