I just started using ChartJS and VueChartJS and begin with a simple bar chart. The problem is that all settings for chartOptions do not affect the UI.I used ChartJS 4.4.2 and VueChartJS 5.3.1.
Here’s my code:

<template>
    <div class="scroll-container">
        <div class="chart-container">
            <Bar v-if="loaded" :data="chartData" :options="chartOptions" ref="myChart" />
        </div>
    </div>
</template>

<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, LineController, LineElement, PointElement } from 'chart.js'

// Register the necessary components for both bar and line charts
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, LineController, LineElement, PointElement)

export default {
    name: 'ProjectChart',
    components: { Bar },
    data() {
        return {
            loaded: false,
            chartData: {
                labels: ['A','B','C','D','E','F'],
                datasets: [
                    {
                        label: 'Work Count',
                        data: [15,20,50,12,30,42],
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1,
                        // barThickness: 20,
                    },
                    // {
                    //     label: 'Project Progress (%)',
                    //     data: [60,90,30,21,45,64],
                    //     type: 'line',
                    //     fill: false,
                    //     borderColor: 'rgba(75, 192, 192, 1)',
                    //     tension: 0.1
                    // }
                ]
            },
            chartOptions: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    },
                    x: {
                        barPercentage: 1,
                        categoryPercentage: 1,
                    }
                },
                plugins: {
                    datalabels: {
                        display: true,
                        color: 'red'
                    }
                }
            },
        }
    },
    methods: {
        async fetchData() {
            try {
                this.loaded = true;
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }
    },
    mounted() {
        this.fetchData();
    }
}
</script>

<style scoped>
.scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    height: 400px;
}

.chart-container {
    width: 2000px;
    height: 100%;
}
</style>