Estoy tratando de cambiar el color de la línea del borde al pasar el mouse. cuando se pasa el cursor por encima de la línea, se pone gris el otro color del conjunto de datos y solo se muestra el color del borde del conjunto de datos resaltado

1- esto cuando el primer conjunto de datos 1 está flotando, otro gráfico de líneas es gris

2- esto es cuando el conjunto de datos 2 está flotando, otro gráfico de líneas es gris

 import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, } from 'chart.js'; import { Line } from 'react-chartjs-2'; import faker from 'faker'; export const options = { responsive: true, interaction: { mode: 'dataset', }, plugins: { legend: { position: 'top', }, title: { display: true, text: 'Chart.js Line Chart', }, }, }; const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; console.log(labels.map(() => faker.datatype.number({ min: -1000, max: 1000 }))); export const data = { labels, datasets: [ { label: 'Dataset 1', data: [100, -87, 200, 120, 150, 134, 43], borderColor: 'rgba(145,147,148,0.7)', backgroundColor: 'rgba(255, 99, 132, 0.5)', pointHoverBackgroundColor: 'red', hoverBorderColor: "red", hoverBackgroundColor: "#FC496BFF" }, { label: 'Dataset 2', data: [20, -357, 5, 10, 131, 134, 43], borderColor: 'rgb(252,73,107)', hoverBorderColor: "blue", backgroundColor: 'rgba(255, 99, 132, 0.5)', }, { label: 'Dataset 3', data: [30, -197, 25, 139, 96, 134, 43], borderColor: 'rgba(145,147,148,0.7)', hoverBorderColor: "blue", backgroundColor: 'rgba(53, 162, 235, 0.5)', }, ], };