Hi, guys, welcome back to Appsloveworld. In our previous article, we learned about creating a Multi-Line Chart Using Chart.js in detail. And now in this article, we are going to talk about another striking feature of Chart Js i.eHow we can create a Vertically stacked bar chart with chart.js.

A stacked bar chart is a very important and useful chart that uses bars to show comparisons between different types of data, but with the capability to break down and compare parts of a whole data. Each bar in the graph represents a whole or complete, and parts in the bar represent different parts that total data.

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.

Vertical stacked bar chart with chart.js

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.

 

How to Create a Stacked Bar Chart Using Chart Js Example

<!DOCTYPE html>
<html>
<head>
    <title>Create stacked bar chart using chart.js</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/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

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.

Stacked bar charts Example with different values in stacks

<!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/chart.js@3.7.1/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

The post How to Create a Stacked Bar Chart Using Chart Js Example? appeared first on Software Development | Programming Tutorials.



Read More Articles