Chart.js label not showing on top - charts

Question

I am trying to create a chart with chart.js and i am using this plugin for showing some labels. But when most value on top, it not showing. Check first value (5), it not showing. Is any way to show it?
I tried padding for <canvas> but not work.
var ver = document.getElementById("chart").getContext('2d');
var chart = new Chart(ver, {
type: 'bar',
data: {
labels: ['Val1', 'Val2', 'Val3', 'Val4'],
datasets: [{
label: "Value",
borderColor: "#fff",
backgroundColor: "rgba(248,66,113,.85)",
hoverBackgroundColor: "#f84271",
data: [5,3,1,2]
}]
},
options: {
legend: {
display: false,
},
tooltips: {
backgroundColor: 'rgba(47, 49, 66, 0.8)',
titleFontSize: 13,
titleFontColor: '#fff',
caretSize: 0,
cornerRadius: 4,
xPadding: 10,
displayColors: false,
yPadding: 10
},
animation: {
"duration": "1000"
},
scales: {
xAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}],
yAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}]
},
plugins: {
labels: {
render: 'value',
}
},
}
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="chart"></canvas>
Also fiddle here: https://jsfiddle.net/9o84ucny/

Answer 1

https://www.chartjs.org/docs/latest/configuration/layout.html
Use the layout property to options object:
layout: {
padding: {
top: 20
}
}
chart var should be like that:
var chart = new Chart(ver, {
type: 'bar',
data: {
labels: ['Val1', 'Val2', 'Val3', 'Val4'],
datasets: [{
label: "Value",
borderColor: "#fff",
backgroundColor: "rgba(248,66,113,.85)",
hoverBackgroundColor: "#f84271",
data: [5,10,1,2]
}]
},
options: {
layout: {
padding: {
top: 20
}
},
legend: {
display: false,
},
tooltips: {
backgroundColor: 'rgba(47, 49, 66, 0.8)',
titleFontSize: 13,
titleFontColor: '#fff',
caretSize: 0,
cornerRadius: 4,
xPadding: 10,
displayColors: false,
yPadding: 10
},
animation: {
"duration": "1000"
},
scales: {
xAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}],
yAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}]
},
plugins: {
labels: {
render: 'value',
}
},
}
});

Answer 2

It also show clear when you use title display true put this inside option
options: {
plugins: {
labels: {
render: 'value',
}
},
title: {
display: true,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value) { if (value % 1 === 0) { return value; } }
}
}]
}
}