chartjs
Legend not displaying all labels
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
You could use a custom plugin that checks how many datasets there are, how heigh the canvas is, calculate if it all fits, if not increase the height of the canvas and call a rerender
Shouldn't it default behaviour that all datasets be visible in the legend? I'm having a similar problem, but the legend is wrapping underneath the chart.
