Function to add bar graph in a custom page developed using vue js

The following code can be used for adding the bar graph to the custom page using the chart.js library.

/**
         * Renders a bar chart using Chart.js based on the provided chart data.
         * @param {Object} chartData - The data object containing labels, datasets, and other chart configuration.
         */
        renderChart(chartData) {
            const ctx = this.$refs.barChart.getContext('2d');
            if (this.chartInstance) {
                this.chartInstance.destroy();
            }
            this.chartInstance = new Chart(ctx, {
                type: 'bar',
                data: chartData,
                options: {
                    indexAxis: 'y',
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                color: 'black',
                                font: {
                                    size: 16,
                                }
                            }
                        },
                        x: {
                            ticks: {
                                color: 'black',
                                font: {
                                    size: 16,
                                }
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                color: 'black',
                                font: {
                                    size: 18,
                                }
                            }
                        }
                    },
                    barThickness: 15,
                    barPercentage: 0.8,
                    categoryPercentage: 0.0,
                },
            });
        },

Sample chartdata:
 const chartdata= {
      labels: ['Jan-23', 'Feb-23', 'Mar-23', 'Apr-23', 'May-23', 'Jun-23', 'July-23', 'Aug-23', 'Sept-23', 'Oct-23', 'Nov-23', 'Dec-23'],
      datasets: [
       {
        label: 'Dataset 1',
        data: [40, 40, 40, 40, 40, 40,40,40,40,40,40,40],
        backgroundColor: '#88a4c9',
        borderColor: 'rgba(0, 0, 255, 1)',
        borderSkipped: 'bottom',
        barPercentage: 1.0,
        categoryPercentage: 0.65
       },
       {
        label: 'Data Set 2',
        backgroundColor: '#bbe6dd',
        borderColor: 'rgba(255, 165, 0, 1)',
        barPercentage: 1.0,
        categoryPercentage: 0.65,
        data: [40, 40, 40, 40, 40, 40, 40, 40, 40, 40 , 40, 40],
       },
       {
        label: 'Data Set 3',
        backgroundColor: '#ff8696',
        borderColor: 'rgba(128, 128, 128, 1)',
        barPercentage: 1.0,
        categoryPercentage: 0.65,
        data: [40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40],
       },
       {
        label: 'Data Set 4',
        backgroundColor: '#fde8b2',
        borderColor: 'rgba(255, 255, 0, 1)',
        barPercentage: 1.0,
        categoryPercentage: 0.65,
        data: [40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40],
       },
       {
        label: 'Data Set 5',
        backgroundColor: '#adf7b6',
        borderColor: 'rgba(255, 255, 0, 1)',
        barPercentage: 1.0,
        categoryPercentage: 0.65,
        data: [10, 59, 80, 81, 35 , 59, 80, 18, 45, 60, 59, 59, 80, 18, 45, 60, 59,],
       },
      ]
     };