I am trying to change the color of the border line on the hover.
when line is hover then gray the other dataset color
and just show the color of the highlighted dataset border
1- this when the first dataset 1 is hover other line graph is gray
2- this is when dataset 2 is hover other line graph is gray
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)',
},
],
};