react-chartjs-2 icon indicating copy to clipboard operation
react-chartjs-2 copied to clipboard

Hover over legend label and highlight the particular datasetIndex

Open Nutties93 opened this issue 6 years ago • 0 comments

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();
                            }
                          },

Nutties93 avatar Jun 28 '19 09:06 Nutties93