<div style="margin-left:5%;margin-right:5%">
        <canvas id="StackGroupbarChartcanvas" style="width:100%;"></canvas>
    </div>
 var StackGroupbarChart = {
            labels: [
                "2016",
                "2017",
                "2018",
                "2019",
                "2020",
                "2021",
                "2023",
                "2022"
            ],
            datasets: [
                {
                    label: "App Developer",
                    backgroundColor: "pink",
                    borderColor: "pink",
                    borderWidth: 1,
                    data: [15, 22, 35, 86, 42, 62, 52, 58],
                    stack: 'Stack 0'
                },
                {
                    label: "Andriod Developer",
                    backgroundColor: "blue",
                    borderColor: "blue",
                    borderWidth: 1,
                    data: [48, 38, 39, 42, 42, 69, 39, 68],
                    stack: 'Stack 0'

                },
                {
                    label: "C# Developer",
                    backgroundColor: "green",
                    borderColor: "green",
                    borderWidth: 1,
                    data: [52, 29, 39, 68, 67, 66, 74, 77],
                    stack: 'Stack 1'
                },
                {
                    label: "Java Developer",
                    backgroundColor: "red",
                    borderColor: "red",
                    borderWidth: 1,
                    data: [52, 29, 39, 68, 67, 66, 74, 77],
                    stack: 'Stack 2'
                }
            ]
        };

        var StackGroupbarChartOptions = {
            responsive: true,
            legend: {
                position: "top"
            },
            interaction: {
                intersect: false,
            },
            scales: {
                x: {
                    stacked: true,
                },
                y: {
                    stacked: true
                }
            },
            title: {
                display: true,
                text: "Chart.js Bar Chart"
            }
        }

        window.onload = function () {
            var chartData = {
                type: "bar",
                data: StackGroupbarChart,
                options: StackGroupbarChartOptions
            }
            new Chart("StackGroupbarChartcanvas", 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