react-chartjs-2
react-chartjs-2 copied to clipboard
Hover over legend label and highlight the particular datasetIndex
Hi, I'm currently facing a problem with react chartjs2. I would like to highlight a particular dataset when the mouse is hovered on the legend LABEL. I was unable to capture events from clicking on the legend/axis using the react chartjs-2 functions. (getDatasetAtEvent, onElementsClick, getElementAtEvent). The code below works on the normal chartjs libary. Are there any equivalent way of doing something like this using the react library?
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: isDarkMode ? theme.palette.common.black : theme.palette.common.white,
usePointStyle: true,
padding: 10,
fontSize:12
},
onHover: function(event, legendItem) {
var options = this.options || {};
var hoverOptions = options.hover || {};
var ci = this.chart;
hoveredDatasetIndex = legendItem.datasetIndex;
ci.updateHoverStyle(ci.getDatasetMeta(hoveredDatasetIndex).data, hoverOptions.mode, true);
ci.render();
}
},