Legend Highlight

[nehamahajan]

Hi CanvasJS Team,

I know it’s possible to highlight chart series when user hovers over a legend, but is it possible to highlight a legend when user hovers over the chart series.

Thank You,
Neha Mahajan

[Manoj Mohan]

Neha Mahanjan,

Highlighting legend on hover over chart series is not available as an inbuilt as of now. However you can achieve this functionality by updating legendMarkerColor within mousemove & mouseout events of dataseries as shown in this below codesnippet

for(var i=0; i<chart.options.data.length; i++) {
    chart.options.data[i].mouseover =  highlightLegend;
    chart.options.data[i].mouseout =  dimLegend;
  } 

  chart.render();

  function highlightLegend(e) {
    for(var i=0; i<e.chart.options.data.length; i++) {
      if(i !== e.dataSeriesIndex)
        e.chart.options.data[i].legendMarkerColor = "grey";  
    } 

    e.chart.render();
  }
  function dimLegend(e) {
    for(var i=0; i<e.chart.options.data.length; i++) {
      e.chart.options.data[i].legendMarkerColor = undefined;
    }
    e.chart.render();
  }

Also, check out this JSFiddle for complete working code.

—
Manoj Mohan
Team CanvasJS

[nehamahajan]

Hi Manoj,

Along with changing marker color can we change the fontWeight, fontSize and fontColor of the legend text.

Thanks,
Neha

[Manoj Mohan]

Neha,

We don’t support setting fontColor, fontSize and fontWeight for each individual legend items as of now.

—-
Manoj Mohan
Team CanvasJS