I’m trying to make a vertical stack bar plot with Chart.js.
It works pretty well but for some labels (i.e., for one vertical part of the graph) I don’t necessarily have strictly positive values for all the dataset points. I don’t see the rectangle for those which is good, but if I hover at the wrong place, I see a 0 which bothers me.
Here is a MRE because my description was probably not very understandable:
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['1', '2'],
datasets: [{
label: 'a',
data: [1, 8],
backgroundColor: '#22aa99'
}, {
label: 'b',
data: [1, 2],
backgroundColor: '#109618'
}, {
label: 'c',
data: [0, 1],
backgroundColor: '#dc3912'
}, {
label: 'd',
data: [4, null],
backgroundColor: '#3366cc'
},
{
label: 'e',
data: [4, null],
backgroundColor: '#9661ca'
}]
},
options: {
responsive: false,
legend: {
position: 'right'
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" width="700"></canvas>
I would like this not to be possible (hovering on d
on the right part even though d
is 0 (as well as e
)):
Using data: [4, null]
does not work either, since I have that now instead: