Chartjs columns does not appear by value - chart.js

Question

I am using the following dataset,
this.chart = new Chart(
this.canvasContext,
{
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
options: {
showScale: true,
maintainAspectRatio: false,
responsive: true,
utoutPercentage: 50,
animation: {
animateRotate: true,
duration: 2000,
animateScale: true
}
}
}
)
All columns are appearing.
But If I use the data: [600,400,400,900,1100], 400 values does not appear on chart. They are appearing as zero.
I am using canvas width and height <canvas id="myChart" width="400" height="400"></canvas>
What is the problem?

Answer 1

Check this sandbox:
https://codesandbox.io/s/chartjs-hbjrf
It does work.May be try clearing your cache and then try

Answer 2

Solution here:
this.chart = new Chart(
this.canvasContext,
{
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
options: {
showScale: true,
maintainAspectRatio: false,
responsive: true,
utoutPercentage: 50,
animation: {
animateRotate: true,
duration: 2000,
animateScale: true
},
scales: {
xAxes: [
{
stacked: true
}
],
yAxes: [
{
stacked: true
}
]
}
}
}
)
Just add 1 more option about scales x and y axes.