0👍
✅
You need to define an additional yAxis that contains nothing but the labels for the stacked bars.
The we will add yAxisID property to each dataset. This must match the scale properties scales.yAxes.id of the standard category axis.
yAxes: [{
labels: ['A', 'B', 'C', 'A', 'B', 'C', 'A', 'B', 'C']
},
{
id: 'yAxis1',
type: 'category',
offset: true,
gridLines: {
offsetGridLines: true
}
}
]
Please have a look at the runnable code below.
var barChartData = {
labels: ["January", "February", "March"],
datasets: [{
label: "Dataset 1",
yAxisID: 'yAxis1',
backgroundColor: "#FF0000",
categoryPercentage: 1,
barPercentage: 0.8,
stack: "Stack 0",
data: [1, 2, 3],
},
{
label: "Dataset 2",
yAxisID: 'yAxis1',
backgroundColor: "#0000FF",
categoryPercentage: 1,
barPercentage: 0.8,
stack: "Stack 0",
data: [5, 4, 3],
},
{
label: "Dataset 3",
yAxisID: 'yAxis1',
backgroundColor: "#00CC00",
categoryPercentage: 1,
barPercentage: 0.8,
stack: "Stack 1",
data: [6, 5, 4],
},
{
label: "Dataset 4",
yAxisID: 'yAxis1',
backgroundColor: "#000000",
categoryPercentage: 1,
barPercentage: 0.8,
stack: "Stack 2",
data: [6, 5, 4],
}
]
};
new Chart('chart', {
type: "horizontalBar",
data: barChartData,
options: {
scales: {
yAxes: [{
labels: ['A', 'B', 'C', 'A', 'B', 'C', 'A', 'B', 'C']
},
{
id: 'yAxis1',
type: 'category',
offset: true,
gridLines: {
offsetGridLines: true
}
}
]
},
title: {
display: true,
text: "Chart.js Bar Chart - Stacked",
},
tooltips: {
mode: "index",
intersect: false,
},
responsive: true,
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>0👍
For this to work with 2D arrays, what to do?
Let’s say I have an array like this:
High = [[1,2], [4,5]]
Low = [[3,2], [6,5]]
And three groups: A and B.
Now, what I want is the following:
Source:stackexchange.com