[Simple Trick]-How to display Grouped Bar Chart Using Chart Js?

If you're searching for JavaScript charting libraries that can make grouped bar charts, you're in luck. In this article, we'll use the Chart.js JavaScript library to create one. If you're wondering whether it's possible to create grouped bar charts with Chart.js, the answer is yes, and it's quite straightforward.

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/[email protected]/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>

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.

var GroupedbarChartData = {...}: Defines an object that holds the data for the grouped bar chart. It specifies the labels (years) and datasets, each representing a group of bars.

labels: An array containing the labels for the x-axis (years).

datasets: An array of objects representing each group of bars. Each object specifies the label, color, border color, border width, and data points for the bars.

var BarchartOptions = {...}: Defines an object that holds the options for configuring the appearance and behavior of the chart.

responsive: true: Makes the chart responsive to screen size changes.

legend: Specifies the position of the legend.

var chartData = {...}: Defines an object that specifies the type of chart, the data, and the options for the chart.

new Chart("GroupedbarChartcanvas", chartData): Instantiates a new Chart.js chart on the canvas element with the id "GroupedbarChartcanvas", using the configuration defined in the chartData object.

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.

[Simple Trick]-How to display Grouped Bar Chart Using Chart Js?

Using ChartJS to create a multiple grouped bar chart Example

Code Explanation

Read Similar Articles