<div style="margin-left:5%;margin-right:5%">
        <canvas id="GroupedbarChartcanvas" style="width:100%;"></canvas>
    </div>
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);
        };

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js