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

Question

I am trying to add more space between the top of the highest bar and the top grid line. Data wise everything is fine - the number is smaller than the top grid line.

Answer 1

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>