大家好，
我想請問chart.js v3版本的x軸標籤的hover跟onclick事件，要怎麼實現呢?
我的環境是Vite、Vue3、Chart.js v3。
目前我找到的資料，是說chart.js提供的onClick跟onHover函式，只能使用在紅色框框裡

options:{
    //長條圖的滑鼠hover
    onHover: (evt, activeEls) => {
        activeEls.length > 0 ? evt.chart.canvas.style.cursor = 'pointer' : evt.chart.canvas.style.cursor = 'default';
    },
    //長條圖的click事件
    onClick: (evt, el, chart) => {
        if(el[0]){
            console.log('這是el',el[0].index);
        }               
    } 
}

我試著使用套件chartjs-plugin-datalabels，chartjs-plugin-datalabels官網，
官網上寫說，有支援lable的hover跟onclick，不過我照著做，還是沒辦法........不知道哪裡出錯...

以下是我的程式碼，懇請幫忙

<script setup>
    import { onMounted,ref } from '@vue/runtime-core';
    import Chart from 'chart.js/auto';
    //(1)import
    import ChartDataLabels from 'chartjs-plugin-datalabels';

    onMounted(()=>{
        const ctx = document.getElementById('myChart');
        ctx.width = 200;
        ctx.height = 200;
        // (2)registers them for all your charts
        Chart.register(ChartDataLabels); 

        const myChart = new Chart(ctx, {
            type: 'bar',
            //(3)register plugin for only this chart
            plugins: [ChartDataLabels], 
            data: {
                labels: ['Red', 'Blue'],
                datasets: [{
                    label: '',
                    data: [12, 19],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)'    
                    ],
                    borderWidth: 1,
                    barThickness: 25,
                    datalabels: {
                        //(5)監聽onclick事件
                        listeners: {
                            click: function(context) {
                                console.log('label ' + context.dataIndex + ' 被按到了!');
                            }
                        }
                    }
                }]
            },
            options: {
                //(4)啟動事件選單，之後才能被觸發
                events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
                layout:{
                    padding:{
                        top:20
                    }
                },
                bezierCurve : false,
                animations:false,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid:{
                            color: (ctx) => (ctx.tick.value === 0 ? 'rgba(0, 0, 0, 0.1)' : 'transparent'),
                            drawBorder: false,//隱藏y軸(但還有x=0的網格)
                        },
                        suggestedMax: 10  
                    },
                    x:{
                        grid:{
                            drawBorder: false,//隱藏y軸(但還有x=0的網格)
                        }
                    }
                },
                plugins: {
                    datalabels: {
                        anchor: 'end', 
                        align: 'end',
                        formatter: (val) => (`${val}%`),
                        labels: {
                            value: {
                                color: 'blue'
                            }
                        },
                        //(5)監聽hover事件
                        listeners: {
                            enter: function(context) {
                                context.hovered = true;
                                return true;
                            },
                            leave: function(context) {
                                context.hovered = false;
                                return true;
                            }
                        }
                    },
                    legend:false
                },
                //長條圖的滑鼠hover
                onHover: (evt, activeEls) => {
                    activeEls.length > 0 ? evt.chart.canvas.style.cursor = 'pointer' : evt.chart.canvas.style.cursor = 'default';
                },
                //長條圖的click事件
                onClick: (evt, el, chart) => {
                    if(el[0]){
                        console.log('這是el',el[0].index);
                    }               
                } 
            }
        })
    })
</script>

<template>
    <div class="canvasSize">
        <canvas id="myChart"></canvas>
    </div>  
</template>

<style scoped>
    .canvasSize{
        width: 200px;
        height: 200px;
    }
</style>

-----更新說明-----
上面的code會有個bug，如果從長條圖一路滑下去到x軸的lable，
就會發生暫時地"偽hover"的現象，
如果滑鼠再去碰一次長條圖，
再次啟動長條圖的hover，"偽hover"的現象又會消失..