onhover line

[hrmj008]

Documentation Is:

• Missing or needed?
• Confusing
• Not sure?

Please Explain in Detail...

just want to change point coler when hover line, where to implement onhover function

following is my code

const line_chart = new Chart(ctx, {
    type: 'line',
    data: data2,
    options: {
        interaction: {
            mode: 'point'
        },
        onHover: (_, elements) => {
                line_chart.data.datasets[0].pointBackgroundColor = 'red'
                line_chart.update()
        },
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
           
            legend: {
                // position: 'top',
                display: false,
            },
            title: {
                display: false,
    
            },
            tooltip: {
                // Disable the on-canvas tooltip
                enabled: false,
    
                external: function(context) {
                    // line_chart.data.datasets[0].pointBackgroundColor = 'red'
                    // Tooltip Element
                    let tooltipEl = document.getElementById('dashboard_chart_tooltip');
                    tooltipEl.style.display = 'flex';
                    
                    const tooltipModel = context.tooltip;
                    if (tooltipModel.opacity === 0) {
                        tooltipEl.style.display = 'none';
                        // line_chart.data.datasets[0].pointBackgroundColor = 'transparent'
                        // line_chart.update()
                        return;
                    }
    
                 
                    const position = context.chart.canvas.getBoundingClientRect();
                    const bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);
                    // let data = fake_data.daily.find(item => item.label == tooltipModel.title[0])
                    document.getElementById('dashboard_chart_tooltip_item_title').innerHTML = 1
                    document.getElementById('dashboard_chart_tooltip_item_alert_data').innerHTML = 2
                    document.getElementById('dashboard_chart_tooltip_item_feedback_data').innerHTML = 3
                    document.getElementById('dashboard_chart_tooltip_item_feedback_in_time_data').innerHTML = 4
                    // Display, position, and set styles for font
                    tooltipEl.style.opacity = 1;
                    tooltipEl.style.position = 'absolute';
                    tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
                    tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
                    tooltipEl.style.font = bodyFont.string;
                    tooltipEl.style.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px';
                    tooltipEl.style.pointerEvents = 'none';
                    tooltipEl.style.marginLeft = '20px';
                    // line_chart.update()
                }
            }
            
        },
        scales: {
            x: {
                display: false,
                
            },
            y: {
                display: false
               
            }
        }
        
    },
});

but on hover function trigger when mouse reach canvas (not line)

Your Proposal for Changes

need code example

Example

No response