Hello, everyone, welcome back to Quickpickdeal. In our previous article, we delved into creating a Multi-Line Chart Using Chart.js in detail. Now, in this article, we're going to explore another impressive feature of Chart.js: creating a Vertically Stacked Bar Chart.
A stacked bar chart is a valuable and powerful visualization tool that uses bars to illustrate comparisons between different data types. It allows you to break down and compare parts of a whole dataset. Each bar in the chart represents a whole or complete set of data, and the segments within the bar represent different parts that make up the total dataset.
Stacked bar charts Example with different values in stacks
Simply I have created an HTML page and added the latest chart js CDN reference to our Html page. and On our page, we have a Canvas element for creating the Stacked Barchart.
Recently I’m working on a project in which we need to create a stacked bar chart for that I was looking for an Excellent and free open source library. and then come across the Chart.js. We are changing our charts from paid charts library to open source chart.js, as we know that we can use chart js offline mode also and responsive to window’s changes of size.
I’ve been reading the documentation regarding, In all examples, I notice for stacked bar charts, the number of items in a bar is the same for each bar in the graph.
But our requirement is different and I can’t figure out, how to make a stacked bar chart like the below image example 2. after some brainstorming, I find out solution which I will share in this article. So in this article, we will provide you with two examples.
In our first example we are going to create a stacked bar chart just like google analytics like the below image, we are going to create a visitors bar chart with included values from various sources like organic search, social media search, paid search.
Let’s say we have been asked to create a bar graph to illustrate the visitor to your website. Specifically, you should show how many visitors from each of the following four sources i.e Organic terrific, Social terrific, Referral terrific, and Paid terrific from the ad campaign.
we need to show how many of the users are coming from Organic terrific and how many are coming from another channel. we can combine the information into a stacked bar chart.
<!DOCTYPE html>
<html>
<head>
<title>Create stacked bar chart using chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
</head>
<body>
<div style="margin-left:5%;margin-right:5%">
<canvas id="StackedbarChartcanvas" style="width:80%"></canvas>
</div>
<script>
var StackedbarChart = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"June",
"July",
"Aug",
"Sep",
"Oct"
],
datasets: [
{
label: "Oraganic Search",
backgroundColor: "red",
borderColor: "red",
borderWidth: 1,
data: [42, 56, 26, 52, 66, 87, 51, 42, 32, 88]
},
{
label: "Soical Media",
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
data: [120, 52, 69, 62, 12, 45, 110, 52, 39, 75]
},
{
label: "Paid Search",
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);
};
</script>
</body>
</html>Codepen Editor
StackedbarChart: This variable holds the data for the chart. It includes labels for the x-axis (months) and datasets representing different categories of data.
StackedbarChartOptions: This variable contains the configuration options for the chart. It includes settings for responsiveness, legend position, scales (x and y), and chart title.
type: "bar": Specifies that the chart type is a bar chart.
data: StackedbarChart: Specifies the data for the chart.
options: StackedbarChartOptions: Specifies the options for configuring the appearance and behavior of the chart.
new Chart("StackedbarChartcanvas", chartData): Instantiates a new Chart.js chart on the canvas element with the id "StackedbarChartcanvas", using the configuration defined in the chartData object.
Here we are rendering a vertically stacked bar chart on the webpage, displaying the data for different categories (Oraganic Search, Social Media, Paid Search) across months. The bars will be stacked on top of each other, with a legend placed on the right side of the chart.
Vertical stacked bar chart with chart.js
In this example, we will create a Vertically stacked bar chart with chart.js with a different item in each bar like the below image. I want to show a bar chart of total daily users on the website, and that bar should contain info of visitors from all sources.
<!DOCTYPE html>
<html>
<head>
<title>Create stacked bar chart with different item in each bar using chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
</head>
<body>
<div style="margin-left:5%;margin-right:5%">
<canvas id="StackedbarChartcanvas" style="width:80%"></canvas>
</div>
<script>
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, 0, 52, 66, 87, 51, 42, 32, 88]
},
{
label: "Soical terrific",
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
data: [0, 52, 94, 62, 12, 45, 110, 52, 39, 75]
},
{
label: "Referral terrific",
backgroundColor: "green",
borderColor: "green",
borderWidth: 1,
data: [0, 12, 0, 23, 87, 92, 63, 47, 29, 79]
},
{
label: "Paid terrific",
backgroundColor: "lightblue",
borderColor: "lightblue",
borderWidth: 1,
data: [45, 88, 0, 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);
};
</script>
</body>
</html>*Thank you so much if you have a question please comment
Read Similar Articles
- [Simple Trick]-How to Hide Some Points in ChartJS
- [Simple Trick]-In Chart.js set Chart Title, Name of X axis and Y axis
- How to Create a Stacked Bar Chart Using Chart Js Example?
- [Chart Js]- Straight Lines and Curves Lines in the Same Graph
- How to leave just points without lines in ChartJS
- [Simple Trick]-Set Different Color For Each Bar in a Bar Chart in ChartJS
- [Chart JS]- How to Make Sharp Lines to Smooth Curved Lines?
- [Simple Trick]- Stacked and Grouped Bar Chart Chart.js Example
- How to Create Curved Lines Instead of Straight Lines in Chart.js?