<div style="margin-left:5%;margin-right:5%">
<canvas id="StackGroupbarChartcanvas" style="width:100%;"></canvas>
</div>
var StackGroupbarChart = {
labels: [
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2023",
"2022"
],
datasets: [
{
label: "App Developer",
backgroundColor: "pink",
borderColor: "pink",
borderWidth: 1,
data: [15, 22, 35, 86, 42, 62, 52, 58],
stack: 'Stack 0'
},
{
label: "Andriod Developer",
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
data: [48, 38, 39, 42, 42, 69, 39, 68],
stack: 'Stack 0'
},
{
label: "C# Developer",
backgroundColor: "green",
borderColor: "green",
borderWidth: 1,
data: [52, 29, 39, 68, 67, 66, 74, 77],
stack: 'Stack 1'
},
{
label: "Java Developer",
backgroundColor: "red",
borderColor: "red",
borderWidth: 1,
data: [52, 29, 39, 68, 67, 66, 74, 77],
stack: 'Stack 2'
}
]
};
var StackGroupbarChartOptions = {
responsive: true,
legend: {
position: "top"
},
interaction: {
intersect: false,
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
},
title: {
display: true,
text: "Chart.js Bar Chart"
}
}
window.onload = function () {
var chartData = {
type: "bar",
data: StackGroupbarChart,
options: StackGroupbarChartOptions
}
new Chart("StackGroupbarChartcanvas", chartData);
};
This Pen doesn't use any external CSS resources.