Измените цвет других фрагментов при наведении курсора с помощью Chart.js 4 ⇐ Html

[Anonymous]

Я пытаюсь изменить цвет других фрагментов при наведении курсора на один из них, но иногда это немного глючит, и я пытаюсь понять, почему.
Как показано на рисунке например, при наведении от одного фрагмента к другому происходит мерцание и цвета не меняются сразу, а также при выходе из фрагмента цвета должны сбрасываться, но иногда это не работает.

Код: Выделить всё

const colors = ["red", "green", "blue"];
const colorsRGBA = ["rgba(255,0,0,.25)", "rgba(0,255,0,.25)", "rgba(0,0,255,.25)"];

new Chart(document.getElementById("doughnut"), {
type: "doughnut",
data: {
labels: ["A", "B", "C"],
datasets: [
{
data: [1, 2, 3],
backgroundColor: ["red", "green", "blue"],
hoverBackgroundColor: ["red", "green", "blue"]
}
]
},
options: {
plugins: {
tooltip: {
enabled: false
},
legend: {
display: false
}
},
onHover(event, elements, chart) {
if (event.type === "mousemove") {
if (elements.length) {
chart.getDatasetMeta(0).data.forEach((data, index) => {
if (index !== elements[0].index) {
data.options.backgroundColor = colorsRGBA[index];
}
});
} else {
chart.getDatasetMeta(0).data.forEach((data, index) => {
data.options.backgroundColor = colors[index];
});
}
}
}
}
});

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/793 ... chart-js-4