javascript - Chartjs disable color change on hover withouth disabling tooltips

Question

I have been trying to disable all color changes when hovering on a chart canvas but I still have not been able to remove all the color changes without disabling all tooltips and other interactions on the chart. The code I use to set the colors is:

const color = array.map(a => getRandomColorWithAlphaOf(0.7))
    const dataTest = {
        labels: turns,
        datasets: array.map((a,i) => (
            {
            label: a.nick,
            fill: false,
            data: a.data.map(d => d.cost),
            borderColor: color[i],
            backgroundColor: color[i],
            hoverBackgroundColor: color[i],
            hoverBorderColor: color[i],
            pointBackgroundColor: color[i],
            pointBorderColor: color[i],
            pointHoverBackgroundColor: color[i],
            pointHoverBorderColor: color[i]
        }
        ))
    }

Still when hovering on the points it changes the colors.

Chart creation code is here:

const lineChart = new Chart (ctx, {
        type: "line",
        data: dataTest,
        options: {
            legend: {
                display: false
            },
            legendCallback: (chart) => {
                var text = [];
                text.push('<ul>');
                for (var i=0; i <chart.data.datasets.length; i++) {
                    console.log(chart.data.datasets[i]); 
                    text.push('<li>');
                    text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' +" &nbsp;  &nbsp;  &nbsp; " +'</span>');
                    text.push('<span">' + chart.data.datasets[i].label + '</span>');
                    text.push('</li>');
                }
                text.push('</ul>');
                return text.join("");
            }
    }
    })

Is there a way to get rid of all color changes without using something like "event: []" that would disable tooltips at the same time?

EDIT: moving color generation inside useEffect fixed the problem. I guess it generated colors multiple different times.

question from:https://stackoverflow.com/questions/66059117/chartjs-disable-color-change-on-hover-withouth-disabling-tooltips

Answer 1

Solved it with moving color generation inside useEffect. I guess it generated colors multiple different times.