Bar graph not taking 100% - chart.js

Question

I have a problem when generating a bar chart :
I don't understand why 50%+50% doesn't smoke 100% of the seat? Config seems to be good ? Did i miss something?
Here the code :
new Chart(draw, {
type: 'bar',
data: {
labels: [currentYear],
datasets: [
{
label: 'Legend 1',
data: [50],
backgroundColor: '#fdfd96', // yellow
},
{
label: 'Legend 2',
data: [50],
backgroundColor: '#77b5fe', // blue
},
],
},
options: {
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
},
},
animation: {
onComplete: function () {
saveChartAsImage(
this.toBase64Image(),
currentYear,
companyId,
'actif',
manualMode,
);
},
},
},
});

Answer 1

Your code and configuration looks correct and works ( demo seen below ) but if you want to be on the save side yo can add the properties max:100 to the y axis, this could fix the hight issue.
Here the demo:
const data = {
labels: [2022],
datasets: [{
label: 'Legend 1',
data: [50],
backgroundColor: '#fdfd96', // yellow
},
{
label: 'Legend 2',
data: [50],
backgroundColor: '#77b5fe', // blue
},],
};
const config = {
type: 'bar',
data: data,
options: {
maintainAspectRatio: false,
animation: {
onComplete: function () {
let img = document.createElement('img')
let url = this.toBase64Image()
img.src = url
document.querySelector('#imagePreview').append(img);
}
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
max:100
},
}}
};
var cart = new Chart(
document.getElementById('chart'),
config
);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart" style="height:184px; width:350px;">
<canvas id="chart" ></canvas>
</div>
<b> preview Image </b>
<div id="imagePreview"></div>
Update screenshot of result:
Update:
After testing the assumtion must be, that the save function is defective or there is some sort of race condition with a different chart. Since createing a image onComplete creates a correct images, in the updated demo.
I'm assuming the wrong visuals have to to with the animation, not being finished when the image is created, if this is so, one could workaround this fact (or just to test the theory), with using a timeout for creating the image, something like this
onComplete: function () {
setTimeout( () => {
saveChartAsImage(
this.toBase64Image(),
currentYear,
companyId,
'actif',
manualMode,
);
}, 1000); // <-- One Second should be enough for the animation to end
}