I am using react and chart.js.
I have a Line chart, and I would love to have a highlight on one of the series when the mouse is hovering the according legend.
I found some help but it looks like the code is only working for previous version of chart.js.
Here is the current code I am using, that doesn't work for what I want :
<Line
data={data}
options={{maintainAspectRatio: false,
responsive: true,
interaction: {
mode: "index",
intersect: true,
},
plugins: {
tooltips: {
mode: "nearest",
intersect: false,
},
hover:
{
mode: "nearest",
intersect: true,
},
datalabels: {
display: false,
color: "black",
},
title: {
display: true,
text: "Limit"
},
legend: {
onHover: function(event, legendItem, legend) {
console.log('allo')
var me = this;
var options = me.options || {};
var hoverOptions = options.hover || {mode: 'nearest'};
var index = legendItem.datasetIndex;
var ci = legend.chart;
for (var i=0; i < ci.$datalabels._datasets.length-1; i++) {
var elements = ci.getDatasetMeta(i).data; ci.updateHoverStyle(elements, hoverOptions.mode, false) ; // <<<--- turn off higlight
}
var elements = ci.getDatasetMeta(index).data;
ci.updateHoverStyle(elements, hoverOptions.mode, true) // <<-- Turn on
ci.render();
},
display: true,
position: "right",
}
},
}}
/>