How to Implement Stacked Bar Chart using ChartJS ?

Last Updated : 05 Jun, 2023

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 used or designed for comparisons of some data which compare numerical values of a categorical variable.

Syntax:

new Chart($("#ID"), {
    type: 'bar',            
    data: { ... },               
    options: { ... }          
});

CDN link:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js”> </script>
<script src=”https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js”> </script>

Approach:

In the HTML design, use the <canvas> tag for showing the bar or pie chart graph.
In the script part of the code, instantiate the ChartJS object by setting the type, data, and options properties of the library.
- type: The type can take values like “pie”, ”bar”, and “line” by the ChartJS library.
- data: It sets the labels and datasets that contain the data array and other display-related properties.
- options: It sets the axis direction, title chart, and display flag as a boolean value as true or false.
Set other required options inside each property like datasets, label, backgroundColor, indexAxis, scales, and others as per the need of the programmer.

Example 1: The following code demonstrates a simple stacked bar chart showing pollution levels ( left-hand side of the graph) in a city used by different vehicles like bikes, scooters, cars, and trucks.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>ChartJS Stacked Bar Chart Example</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Chart JS Stacked Chart </h3> 
      
    <div> 
        <canvas id="stackedChartID"></canvas> 
    </div> 
  
  
    <script> 
  
        // Get the drawing context on the canvas 
        var myContext = document.getElementById( 
            "stackedChartID").getContext('2d'); 
        var myChart = new Chart(myContext, { 
            type: 'bar', 
            data: { 
                labels: ["bike", "car", "scooter",  
                    "truck", "auto", "Bus"], 
                datasets: [{ 
                    label: 'worst', 
                    backgroundColor: "blue", 
                    data: [17, 16, 4, 11, 8, 9], 
                }, { 
                    label: 'Okay', 
                    backgroundColor: "green", 
                    data: [14, 2, 10, 6, 12, 16], 
                }, { 
                    label: 'bad', 
                    backgroundColor: "red", 
                    data: [2, 21, 13, 3, 24, 7], 
                }], 
            }, 
            options: { 
                plugins: { 
                    title: { 
                        display: true, 
                        text: 'Stacked Bar chart for pollution status' 
                    }, 
                }, 
                scales: { 
                    x: { 
                        stacked: true, 
                    }, 
                    y: { 
                        stacked: true 
                    } 
                } 
            } 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The following code demonstrates a simple horizontal stacked bar chart showing pollution levels ( bottom of the graph) in a city used by different vehicles like bikes, scooters, cars, and trucks.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>ChartJS Stacked Bar Chart Example</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js"> 
    </script> 
</head> 
  
<body> 
    <div id="containerID"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h3>Chart JS Stacked Chart </h3> 
          
        <div> 
            <canvas id="stackedChartID"></canvas> 
        </div> 
    </div> 
  
    <script> 
        // Get the drawing context on the canvas 
        var myContext = document.getElementById( 
            "stackedChartID").getContext('2d'); 
              
        var myChart = new Chart(myContext, { 
            type: 'bar', 
            data: { 
                labels: ["bike", "car", "scooter", "truck"], 
                datasets: [{ 
                    label: 'worst', 
                    backgroundColor: "blue", 
                    data: [17, 16, 4, 1], 
                }, { 
                    label: 'Okay', 
                    backgroundColor: "green", 
                    data: [4, 2, 10, 6], 
                }, { 
                    label: 'bad', 
                    backgroundColor: "red", 
                    data: [2, 21, 3, 24], 
                }], 
            }, 
            options: { 
                indexAxis: 'y', 
                scales: { 
                    x: { 
                        stacked: true, 
                    }, 
                    y: { 
                        stacked: true 
                    } 
                }, 
                responsive: true 
            } 
        }); 
    </script> 
</body> 
  
</html>

Output:

How to implement stacked bar chart using Chart JS?

How to implement a stacked bar chart using Chart JS?

Example 3: The following code demonstrates stacked bar charts with groups. The Stacks are in different groups like “Stack 0” and “Stack 1” implemented in the below code. It shows different performances i.e. “good”, “bad”, and “excellent” by students over a time period of a few months labeled at the bottom.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>ChartJS Stacked Bar Chart Example</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js"> 
    </script> 
</head> 
  
<body> 
    <div id="containerID"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h3>Chart JS Stacked Chart with groups </h3> 
          
        <div> 
            <canvas id="stackedChartID"></canvas> 
        </div> 
    </div> 
  
    <script> 
        // Get the drawing context on the canvas 
        var myContext = document.getElementById( 
            "stackedChartID").getContext('2d'); 
  
        var myChart = new Chart(myContext, { 
            type: 'bar', 
            data: { 
                labels: ["January", "February", "March",  
                    "April", "May", "June", "July"], 
                datasets: [{ 
                    label: 'Excellent', 
                    backgroundColor: "blue", 
                    data: [21, 19, 24, 20, 15, 17, 22], 
                    stack: 'Stack 0', 
                }, { 
                    label: 'Good performance', 
                    backgroundColor: "green", 
                    data: [14, 12, 10, 16, 9, 7, 11], 
                    stack: 'Stack 0', 
                }, { 
                    label: 'Bad performance', 
                    backgroundColor: "red", 
                    data: [2, 1, 3, 4, 1, 5, 4], 
                    stack: 'Stack 1' // For multiple stacking 
                }], 
            }, 
            options: { 
                plugins: { 
                    title: { 
                        display: true, 
                        text: 'Chart.js Bar Chart - Stacked' 
                    }, 
                }, 
                interaction: { 
                    intersect: false, 
                }, 
                scales: { 
                    x: { 
                        stacked: true, 
                    }, 
                    y: { 
                        stacked: true 
                    } 
                }, 
                responsive: true 
            } 
        }); 
    </script> 
</body> 
  
</html>