Chartjs-Chartjs Chart is not getting displayed

$(document).ready(function () {
    var ctx = $("#multiChart")[0].getContext('2d');
    const DATA_COUNT=5;
    const NUMBER_CFG={ count: DATA_COUNT, min: 0, max: 100 };

    const labels=Samples.utils.months({ count: 7 });
    const data={
        labels: ['Overall Yay', 'Overall Nay', 'Group A Yay', 'Group A Nay', 'Group B Yay', 'Group B Nay', 'Group C Yay', 'Group C Nay'],
        datasets: [
            {
                backgroundColor: ['#AAA', '#777'],
                data: [21, 79]
            },
            {
                backgroundColor: ['hsl(0, 100%, 60%)', 'hsl(0, 100%, 35%)'],
                data: [33, 67]
            },
            {
                backgroundColor: ['hsl(100, 100%, 60%)', 'hsl(100, 100%, 35%)'],
                data: [20, 80]
            },
            {
                backgroundColor: ['hsl(180, 100%, 60%)', 'hsl(180, 100%, 35%)'],
                data: [10, 90]
            }
        ]
    };
    var myChart = new Chart(ctx, {

        type: 'pie',
        data: data,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    labels: {
                        generateLabels: function (chart) {

                            // Get the default label list
                            const original=Chart.overrides.pie.plugins.legend.labels.generateLabels;
                            const labelsOriginal=original.call(this, chart);

                            // Build an array of colors used in the datasets of the chart
                            let datasetColors=chart.data.datasets.map(function (e) {
                                return e.backgroundColor;
                            });
                            datasetColors=datasetColors.flat();

                            // Modify the color and hide state of each label
                            labelsOriginal.forEach(label => {
                                // There are twice as many labels as there are datasets. This converts the label index into the corresponding dataset index
                                label.datasetIndex=(label.index-label.index%2)/2;

                                // The hidden state must match the dataset's hidden state
                                label.hidden=!chart.isDatasetVisible(label.datasetIndex);

                                // Change the color to match the dataset
                                label.fillStyle=datasetColors[label.index];
                            });

                            return labelsOriginal;
                        }
                    },
                    onClick: function (mouseEvent, legendItem, legend) {
                        // toggle the visibility of the dataset from what it currently is
                        legend.chart.getDatasetMeta(
                            legendItem.datasetIndex
                        ).hidden=legend.chart.isDatasetVisible(legendItem.datasetIndex);
                        legend.chart.update();
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function (context) {
                            const labelIndex=(context.datasetIndex*2)+context.dataIndex;
                            return context.chart.data.labels[labelIndex]+': '+context.formattedValue;
                        }
                    }
                }
            }
        },
    });
});

<div>
 <canvas id="multiChart" width="400" height="600"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.chartjs.org/samples/2.9.4/utils.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>