if you are looking for javascript charting libraries that supported grouped bar charts, then you have come to the right place. In this article, we are going to create a Grouped bar chart using the chart.js’ javascript library. if you are thinking Is it possible to do grouped bar charts using chart.js? then answer is yes and it’s very simple.

Using ChartJS to create a multiple grouped bar chart Example

we can provide multiple datasets using the datasets property of the chart js, as we know that datasets are an array containing data for each bar chart. Every dataset contains a series of values in data that are related to the labels.

If you are very new to using ChartJs then don’t worry this article is for you, if you are having difficulties with making a grouped bar chart that using ChartJs then don’t worry just look below example.

<!DOCTYPE html>
<html>
<head>
    <title>Grouped 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="GroupedbarChartcanvas" style="width:100%;"></canvas>
    </div>
    <script>
        var GroupedbarChartData = {
            labels: [
                "2016",
                "2017",
                "2018",
                "2019",
                "2020",
                "2021",
                "2023",
                "2022"
            ],
            datasets: [
                {
                    label: "JavaScript Developer'",
                    backgroundColor: "pink",
                    borderColor: "pink",
                    borderWidth: 1,
                    data: [50, 55, 66, 87, 83, 75, 96, 72]
                },
                {
                    label: "React Developer",
                    backgroundColor: "blue",
                    borderColor: "blue",
                    borderWidth: 1,
                    data: [44, 27, 63, 96, 100, 57, 34, 56]
                },
                {
                    label: "Chart Js Developer",
                    backgroundColor: "green",
                    borderColor: "green",
                    borderWidth: 1,
                    data: [100, 47, 44, 76, 59, 77, 53, 88]
                }
            ]
        };

        var BarchartOptions = {
            responsive: true,
            legend: {
                position: "top"
            },
            title: {
                display: true,
                text: "Chart.js Bar Chart"
            }
        }

        window.onload = function ()
        {
            var chartData= {
                type: "bar",
                data: GroupedbarChartData,
                options: BarchartOptions
            }
            new Chart("GroupedbarChartcanvas", chartData);
        };

    </script>

</body>
</html>

How to display Grouped Bar Chart Using Chart

Code Explanation

The GroupedbarChartData is the variable that contains all the data and styling properties of the Grouped Bar Chart graph. It is a javascript object with multiple properties to create the Grouped Bar Chart.

The labels property in GroupedbarChartData variable is an array that represents the x-axis points in the Bargraph and the datasets property is also an array that contains information such as Bar Chart title, backgroundColor,borderColor, label, and data is an array that represents the Y-axis values of Bar graph.

Now what’s awesome about this is that this is HTML, this is responsive, it’s using canvas. There are eight different chart types and it’s totally open source. So I can’t imagine a reason why you wouldn’t want to use this project over some other charting solutions. Now there are things like D3, D3  is an amazing package in the ecosystem. However, D3 is going to be overkill if you need a simple chart like one of these.

And these charts aren’t even that simple, to be honest. But if you need a chart, you know, learning D3 is great. if you need advanced visualizations, then D3 is probably going to be more up your alley. But if you’re just doing beautiful charts, check out chart js.

Really, all that matters is that you load this and you have someplace to write JavaScript that is going to be recognized by this HTML document. Okay, let’s head back to the browser from Charjs.org. You’re going to see that we have documentation.

Before we check out documentation, you can see that we have some cool stuff in chart. Js. We have mixed chart types where you can have bar charts on top of whatever line charts . we have things like different chart axes where you can move the axes to be inverse or something like that. And you can animate everything.

And you could see just how beautiful the bar chart is And honestly, you can make them more beautiful if you hate them. So we can also make a radar chart, which is something you might see to describe attributes. We have a polar area chart which is sort of like a pie chart, but it adds an extra dimension where you can have this branching out here.

The post [Simple Trick]-How to display Grouped Bar Chart Using Chart Js? appeared first on Software Development | Programming Tutorials.



Read More Articles