Read more <a href="https://www.appsloveworld.com/how-to-create-a-stacked-bar-chart-using-chart-js-example/">How to Create a Stacked Bar Chart Using Chart Js Example?</a>
<div style="margin-left:5%;margin-right:5%">
<canvas id="StackedbarChartcanvas" style="width:80%"></canvas>
</div>
var StackedbarChart = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"June",
"July",
"Aug",
"Sep",
"Oct"
],
datasets: [
{
label: "Organic terrific",
backgroundColor: "red",
borderColor: "red",
borderWidth: 1,
data: [42, 56, 26, 52, 66, 87, 51, 42, 32, 88]
},
{
label: "Soical terrific",
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
data: [120, 52, 69, 62, 12, 45, 110, 52, 39, 75]
},
{
label: "Referral terrific",
backgroundColor: "green",
borderColor: "green",
borderWidth: 1,
data: [45, 12, 78, 23, 87, 92, 63, 47, 29, 79]
},
{
label: "Paid terrific",
backgroundColor: "lightblue",
borderColor: "lightblue",
borderWidth: 1,
data: [45, 88, 112, 41, 48, 69, 52, 61, 59, 69]
}
]
};
var StackedbarChartOptions = {
responsive: true,
plugins: {
legend: {
position: 'right',//this option is used for place legend on the right side of bar chart
}
},
scales: {
x: {
stacked: true,// this option is used to make the bars stacked
},
y: {
stacked: true
}
},
title: {
display: true,
text: "Chart.js Stacked Bar Chart"
}
}
window.onload = function () {
var chartData = {
type: "bar",
data: StackedbarChart,
options: StackedbarChartOptions
}
new Chart("StackedbarChartcanvas", chartData);
};
This Pen doesn't use any external CSS resources.