hover over legend to highlight points

[nljuba]

Ok, I have had a specific need to highlight a serie on hover over that serie name in the chart legend, so I did it like this:

Code: Select all

chart = new Highcharts.Chart(options,function(chart){
   $(chart.series).each(function(i, serie){
      $(serie.legendItem.element).hover(function(){
         highlight(chart.series, serie.index, true);
      }, function(){
         highlight(chart.series, serie.index, false);
      })
   });
});

/**   Bolje oznacava grupe na grafiku */
function highlight(series, index, hide) {
   $(series).each(function (i, serie) {
      if(i != index) {
         $.each(serie.data, function (k, data) {
            if (data.graphic) {
               data.graphic.attr("fill", (hide ? '#D4D4D4' : (data.selected ? "white" : serie.color)));
               data.graphic.attr("stroke", (hide ? "#D4D4D4": (data.selected ? "black" : serie.color)));
            }
         });
      } else {
         
         serie.group.toFront();
         $.each(serie.data, function (k, data) {
            if (data.graphic) {
               data.graphic.attr("stroke", (hide ? "black": (data.selected ? "black" : serie.color)));
               data.graphic.attr("stroke-width", (hide ? (data.selected ? "2px" : "1px") : (data.selected ? "2px" : "0")));
            }
         });
      }
   });
}

The idea is to dimm out other points and leave the hovered over serie in regular color with a 1px black border (and also preserve selected points view), and it works fine, but the problem are the labels, so my question is: How can I dynamically change the display of a point label (turn them off completely or dim them like the points), from the series that are not "hovered over".

I have tried messing around with dataLabels-> formatter: function() but it looks like it fires only on redraw.

This chart is a scatter chart.

[Fusher]

You can simply hide/show using jQuery : $($("#container .highcharts-data-labels")[index]).hide(); and $($("#container .highcharts-data-labels")[index]).show();

[nljuba]

oh yes, thank you - works like a charm!

Here is the code if someone runs into the similar problem:

Code: Select all

chart = new Highcharts.Chart(options,function(chart){
               $(chart.series).each(function(i, serie){
                  $(serie.legendItem.element).hover(function(){
                     highlight(chart.series, serie.index, true);
                  }, function(){
                     highlight(chart.series, serie.index, false);
                  })
               });
            });
            
            /**   Bolje oznacava grupe na grafiku */
            function highlight(series, index, hide) {
               $(series).each(function (i, serie) {
                  if(i != index) { //ova serija nije u pitanju!
                     $.each(serie.data, function (k, data) {
                        if (data.graphic) {
                           data.graphic.attr("fill", (hide ? '#D4D4D4' : (data.selected ? "white" : serie.color)));
                           data.graphic.attr("stroke", (hide ? "#D4D4D4": (data.selected ? "black" : serie.color)));
                        }
                     });
                     
                     if(hide){
                        $($('#container .highcharts-data-labels')[i]).hide();
                     }else{
                        $($('#container .highcharts-data-labels')[i]).show();
                     }
                     
                  } else { //ova serija je u pitanju
                     if(hide){
                        $($('#container .highcharts-data-labels')[i]).show();
                     }else{
                        $($('#container .highcharts-data-labels')[i]).hide();
                     }
                     
                     serie.group.toFront();
                     $.each(serie.data, function (k, data) {
                        if (data.graphic) {
                           data.graphic.attr("stroke", (hide ? "black": (data.selected ? "black" : serie.color)));//(hide ? '#D4D4D4' : serie.color));
                           data.graphic.attr("stroke-width", (hide ? (data.selected ? "2px" : "1px") : (data.selected ? "2px" : "0")));
                        }
                     });// selected
                  }
               });
            }