onhover line

[hrmj008]

Documentation Is:

• [X] Missing or needed?
• [X] 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