Legend not displaying all labels #10893
Description
Expected behavior
I am creating a stacked, horizontal bar chart with 6 datasets. The label of each dataset should appear in the legend
Current behavior
Only the first 4 labels are being displayed in the legend. Seems like canvas height is not long enough to fit the content
Reproducible sample
https://codepen.io/kosn1/pen/abKENbp
Optional extra steps/info to reproduce
Here is my html code
<div>
<canvas id="line-chart"></canvas>
</div>
and the js
const projectsLineChart = new Chart(
document.getElementById('line-chart'), {
type: 'bar',
data: {
labels: [''],
datasets: [
{
label: Dataset 1',
barThickness: 12,
data: [312],
}, {
label: 'Dataset 2',
barThickness: 12,
data: [238],
},
{
label: 'Dataset 3',
barThickness: 12,
data: [538],
},
{
label: 'Dataset 4',
barThickness: 12,
data: [58],
},
{
label: 'Dataset 5',
barThickness: 12,
data: [158],
},
]
},
options: {
plugins: {
legend: {
position: 'bottom',
title: {
display: true,
text: 'Datasets',
padding: {
top: 15
},
font: {
size: 18
}
}
}
},
indexAxis: 'y',
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
}
},
},
}
);
Possible solution
Is there a way so the canvas height always adjust to its contents dynamically?
Context
No response
chart.js version
4.0.1
Browser name and version
Google Chrome 107.0.5304.107
Link to your project
No response