1

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",                                      
                                    }
                            },
                        }}              
                            />

Goal would be to have something like that : enter image description here enter image description here

0 Answers0