How to draw bars of a chart for a chart to full height?

by

0👍

✅

You need to define the option yAxes.ticks.max, its value should correspond to highest value of the data array.

In case the data array is defined outside of the chart configuration, you could use the Math.max() function as follows:

yAxes: [{
  ticks: {
    max: Math.max(...data)
  }
}]

Please take a look at below sample and see how it works (code is derived from the Chart.js Bar documentation page).

const data = [65, 59, 80, 81, 56, 55, 40];
new Chart('myChart', {
  type: "bar",
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First Dataset",
      data: data,
      fill: false,
      backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
      borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: Math.max(...data),
          maxTicksLimit: 3
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Leave a comment