<!DOCTYPE html>
<
html
>
<
head
>
<
title
>ChartJS Stacked Bar Chart Example</
title
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
id
=
"containerID"
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
h3
>Chart JS Stacked Chart with groups </
h3
>
<
div
>
<
canvas
id
=
"stackedChartID"
></
canvas
>
</
div
>
</
div
>
<
script
>
// Get the drawing context on the canvas
var myContext = document.getElementById(
"stackedChartID").getContext('2d');
var myChart = new Chart(myContext, {
type: 'bar',
data: {
labels: ["January", "February", "March",
"April", "May", "June", "July"],
datasets: [{
label: 'Excellent',
backgroundColor: "blue",
data: [21, 19, 24, 20, 15, 17, 22],
stack: 'Stack 0',
}, {
label: 'Good performance',
backgroundColor: "green",
data: [14, 12, 10, 16, 9, 7, 11],
stack: 'Stack 0',
}, {
label: 'Bad performance',
backgroundColor: "red",
data: [2, 1, 3, 4, 1, 5, 4],
stack: 'Stack 1' // For multiple stacking
}],
},
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
interaction: {
intersect: false,
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
},
responsive: true
}
});
</
script
>
</
body
>
</
html
>