chartjs backdropcolor of y scale ticks not showing - chart.js

Question

I played around with the stacked bar chart at
https://www.chartjs.org/docs/latest/samples/bar/stacked.html
Its currently looking like that:
config:
const config = {
type: 'bar',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
responsive: true,
indexAxis: 'y',
scales: {
x: {
stacked: true,
title: {
display: true,
text: 'x-axis description',
},
},
y: {
ticks: {
mirror: true,
z: 1,
backdropColor: 'rgba(255, 0, 255, 0.75)'
},
stacked: true,
title: {
display: true,
text: 'y-axis description',
},
}
}
}
};
setup:
const labels = ['Short Label', 'vryshrtlbl', 'a litle bit more longer label', 'pretty veeeeeeeeeeeeeeeeeeeeeerylong label', 'ultra extreeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeemly long label']
const data = {
labels: labels,
datasets: [
{
label: 'Losers',
data: [-1,-2,-3,-44,-5],
backgroundColor: 'rgba(255, 0, 0, 0.5)',
},
{
label: 'Winners',
data: [6,12,23,55,5],
backgroundColor: 'rgba(255, 0, 0, 1)',
}
]
};
The thing is, that I may have such long labels. Since I dont want to waste space for them which makes the actual chart smaller I decided to bring the tick labels into the chart area.
But I would make them a bit better visible:
may move then to the right/center a bit
I already tried padding but this also shrinks the chart area, thats a no-go
bring a backgroundcolor like a grey box behind the tick labels such that there is no switch from white background to red bar behind the text
I was sure to achive that with backdropColor bit this option does not do anything.
from documentation I am sure I placed the setting correctly but I dont see any background behind the tick labels
Any Ideas why this does not work?
btw: I tried to provide a jsfiddle but when I place my code there it is ignoring the 'indexAxis' property and the 'stacked: true' as well. The first one I can workaround by using "type: 'horizontalBar'". But not the stacked one. Is this any kind of old writing this 'horizontalBar'? On chartjs page itself they are using 'bar' only.
If this may also could be answered then I may can prepare a fiddle in the future.
But one can reproduce my problem by going to
https://www.chartjs.org/docs/latest/samples/bar/stacked.html
and replace the contents with mine above.
Thanks.

Answer 1

Well for your first part of your question I have no solution. (it might be possible if you write a plugin or so, but no out-of-the-box solution, that I know of)
For part two "the grey box", check the demo below.
In short you will have to set the parameter showLabelBackdrop to true.
Here a demo, how I would do this:
let labels = ['Short Label', 'vryshrtlbl', 'a litle bit more longer label', 'pretty veeeeeeeeeeeeeeeeeeeeeerylong label', 'ultra extreeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeemly long label']
const data = {
labels: labels,
datasets: [
{
label: 'Losers',
data: [-1,-2,-3,-44,-5],
backgroundColor: 'rgba(255, 0, 0, 0.5)',
},
{
label: 'Winners',
data: [6,12,23,55,5],
backgroundColor: 'rgba(255, 0, 0, 1)',
}
]
};
const config = {
type: 'bar',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
responsive: true,
indexAxis: 'y',
scales: {
x: {
stacked: true,
title: {
display: true,
text: 'x-axis description',
},
},
y: {
ticks: {
mirror: true,
backdropColor: '#cdcdcd',
backdropPadding: 0, // <- Adjust the box padding
showLabelBackdrop: true,
z: 1,
},
stacked: true,
title: {
display: true,
text: 'y-axis description',
},
}
}
}
};
new Chart(
document.getElementById('chart'),
config
);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart" style="height:300px; width:500px;">
<canvas id="chart" ></canvas>
</div>