Chartjs-Increase space between largest bar and top grid line in charts.js

by

0👍

Inside the chart options, You could define a value for scales.yAxis.ticks.max as follows:

var myBarChart = new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
    labels: ["A", "B", "C", "D", "E", "G", "H"],
    datasets: [{
      backgroundColor: "lightblue",
      data: [3200, 3250, 3300, 3350, 3400, 3450, 3500],
    }]
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 3000,
          max: 3600,
          stepSize: 200
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="60"></canvas>

UPDATE

In case the data is dynamic, yAxis maximum value needs to be computed from the values. In that case however, I would rather define scales.yAxis.ticks.suggestedMax.

const labels = ["A", "B", "C", "D", "E", "G", "H"];
const data = [3200, 3250, 3300, 3350, 3400, 3450, 3500];

var myBarChart = new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      backgroundColor: "lightblue",
      data: data,
    }]
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      yAxes: [{
        ticks: {
          suggestedMin: Math.min.apply(null, data) * 0.95,
          suggestedMax: Math.max.apply(null, data) * 1.05
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="60"></canvas>

Leave a comment