[Chartjs]-How to set lower limit for the highest value being displayed on Y Axis?

by

4👍

✅

You are looking for the suggestedMax tick option for the y-axis. Use it like this:

options: {
  scales: {
    yAxes: [{
      ticks: {
        suggestedMax: 60
      }
    }]
  }
}

This tick value will be used as the maximum tick of the y-axis, provided that all data values are lower than this. If a data value is higher than this tick value, then a higher tick value will be automatically calculated and used instead. From the docs:

suggestedMax

User defined maximum number for the scale,
overrides maximum value except for if it is lower than the maximum
value.

You may see it in action here and below.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: 'Percentage',
      data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          suggestedMax: 60
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Leave a comment