<!DOCTYPE html>
<html>
<head>
<title>3-4-5 Bar Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Group 1', 'Group 2', 'Group 3'],
datasets: [
{
label: 'Option 1',
data: [[10, 15, 20, 25, 30], [35, 40, 45, 50, 55], [60, 65, 70, 75, 80]],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
},
{
label: 'Option 2',
data: [[12, 17, 22, 27, 32], [37, 42, 47, 52, 57], [62, 67, 72, 77, 82]],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: 'Option 3',
data: [[14, 19, 24, 29, 34], [39, 44, 49, 54, 59], [64, 69, 74, 79, 84]],
backgroundColor: 'rgba(255, 206, 86, 0.2)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1
},
{
label: 'Option 4',
data: [[16, 21, 26, 31, 36], [41, 46, 51, 56, 61], [66, 71, 76, 81, 86]],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}
]
},
options: {
indexAxis: 'y',
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
});
</script>
</body>
</html>
The result showed up like this:
Output
I was expecting something like this:
Expectation
I was expecting a Stacked Grouped Chart: For example:
X-axis: ToDo, InProgress, Done
Each x-axis label has 4 stacks: [Under Review, In Progress, New, Completed] 3 – 4
Now each stack has 5 data points: [Blocked, High, Critical, Low, Medium] 4 – 5