[Chartjs]-How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS

by

2👍

✅

You can add autoSkip: false to the yAxis.ticks configuration as follows

ticks: {
  autoSkip: false,

If autoSkip is true (default), Chart.js automatically calculates how many labels can be shown and hides labels accordingly. Turn autoSkip off to show all labels no matter what.

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May"],
    datasets: [{
      label: 'Events',
      data: [0, 5, 6, 0, 0],
      backgroundColor: "#2dce89"
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        display: true,
        ticks: {
          autoSkip: false,
          beginAtZero: true,
          stepSize: 2,
          max: 30
        }
      }]
    }
  }
});
canvas {
  max-width: 260px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

Leave a comment