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

Table of Content

Using `scales` and `stacked: true`
Using plugins and scales with Custom Tooltip

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

In 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

How to Implement Stacked Bar Chart using ChartJS ?

anjalibo6rb0

Improve

Article Tags :

Stacked Bar Chart with Groups in Chart.JS

ChartJS CDN Link

Approach 1: Using 'scales' and 'stacked: true'

Approach 2: Using plugins and scales with Custom Tooltip

Similar Reads

Stacked Bar Chart with Groups in Chart.JS

ChartJS CDN Link

Approach 1: Using 'scales' and 'stacked: true'

Approach 2: Using plugins and scales with Custom Tooltip

Similar Reads

Thank You!

What kind of Experience do you want to share?