Stacked Bar Chart with Groups in Chart.JS
Last Updated :
23 Aug, 2024
Stacked Bar Charts are a powerful way to visualize the cumulative value of different datasets across multiple categories, providing a clear comparison of data within each group. In Chart.js, you can create stacked bar charts by grouping and stacking datasets, making it easier to analyze the total and individual contributions of each category.
ChartJS CDN Link
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
These are the following ways to create a stacked bar chart with Groups
Approach 1: Using 'scales' and 'stacked: true'
In this approach, we are using the scales option with stacked: true for both the x and y axes in Chart.js. This configuration stacks the data for each category, allowing us to visually compare the contributions of different datasets (Articles, Courses, Contributors) across the years on a single chart.
Example: The below example uses `scales` and `stacked: true` to display a Stacked Bar Chart with Groups in Chart.JS.
HTML
<!DOCTYPE html>
<head>
<title>Example 1</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
</script>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
h1 {
color: green;
}
canvas {
max-width: 400px;
max-height: 400px;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Approach 1: Using `scales` and `stacked: true`</h3>
<canvas id="stackedBarChart1"></canvas>
<script>
const data1 = {
labels: ['2020', '2021', '2022', '2023'],
datasets: [{
label: 'Articles',
data: [100, 150, 200, 250],
backgroundColor: '#4caf50'
},
{
label: 'Courses',
data: [50, 100, 150, 200],
backgroundColor: '#2196f3'
},
{
label: 'Contributors',
data: [30, 60, 90, 120],
backgroundColor: '#ff9800'
}
]
};
const config1 = {
type: 'bar',
data: data1,
options: {
responsive: true,
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
};
const stackedBarChart1 = new Chart(
document.getElementById('stackedBarChart1'),
config1
);
</script>
</body>
</html>
Output
Stacked Bar Chart with Groups in Chart.JSIn this approach, we are utilizing both plugins and scales to enhance the stacked bar chart in Chart.js. The scales option with stacked: true is used for stacking the datasets, while the plugins option allows us to create a custom tooltip that displays the label and value for each dataset.
Example: The below example uses plugins and scales with Custom Tooltip to display a Stacked Bar Chart with Groups in Chart.JS.
HTML
<!DOCTYPE html>
<head>
<title>Example 2</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
</script>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
h1 {
color: green;
}
canvas {
max-width: 400px;
max-height: 400px;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Approach 2: Using `plugins` and `scales` with Custom Tooltip</h3>
<canvas id="stackedBarChart2"></canvas>
<script>
const data2 = {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'JavaScript Tutorials',
data: [200, 300, 400, 500],
backgroundColor: '#673ab7'
},
{
label: 'Python Tutorials',
data: [150, 250, 350, 450],
backgroundColor: '#ff5722'
},
{
label: 'Java Tutorials',
data: [100, 200, 300, 400],
backgroundColor: '#009688'
}
]
};
const config2 = {
type: 'bar',
data: data2,
options: {
responsive: true,
plugins: {
tooltip: {
callbacks: {
label: function (context) {
return context.dataset.label + ': ' + context.raw;
}
}
}
},
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
};
const stackedBarChart2 = new Chart(
document.getElementById('stackedBarChart2'),
config2
);
</script>
</body>
</html>
Output
Stacked Bar Chart with Groups in Chart.JS
Similar Reads
Stacked Bar Chart in R ggplot2 A stacked bar plot displays data using rectangular bars grouped by categories. Each group represents a category, and inside each group, different subcategories are stacked on top of each other. It also shows relationships between groups and subcategories, making them useful for various data analysis
4 min read
How to Implement Stacked Bar Chart using ChartJS ? In this article, we will learn to implement a few stacked bar charts using JavaScript Chart JS plugin. A Stacked bar chart is a series of columns or bars stacked on top of each other that shows the comparison and composition of some variables. These are very easy-to-see changes overall. It is mainly
4 min read
How to Set Height and Width of a Chart in Chart.js ? Chart.js is a popular JavaScript library that allows developers to create interactive and visually appealing charts for web applications. One of the key aspects of chart customization is controlling its dimensions. In this article, we'll explore how to set the height and width of a Chart.js chart.Ch
4 min read
Chart.js Bar Chart Chart.js Bar chart is a graph that uses rectangular bars to show data. The length of each bar corresponds to the value it represents, making it easy to compare several groupings quickly. Usually, the vertical axis shows the values' scale, and the horizontal axis denotes categories or labels. Bar cha
4 min read
Power BI - Create a Stacked Bar Chart Sometimes there is a range of scenarios where it is hard to convey the information in a table and written format. Under such situations, Bar charts make things easier and more understandable. What are Stacked Charts & Bar Charts? Stacked charts are a sort of bar chart which are multiple-series i
3 min read
Angular PrimeNG BarChart Stacked Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn about Bar Chart Stacked in Angular PrimeNG. A bar chart or bar graph
4 min read