dim all other series on legend hover

[Morten]

I have a line chart with 10+ series. On legend hover I would like to highlight the hovered series and dim all other series

Is this scenario possible?

[Eduardo Serra]

Hello Morten,

Taking advantage of the opacity property of the Kendo UI Chart series, we can adjust the opacity in the legendItemClick event which is triggered when an item in the legend is clicked.

I have prepared a sample for you in the Kendo UI Dojo to show how it could be done; you can take a look at it here. The relevant event:

legendItemClick: function(e){
   console.log(this.options.series[e.seriesIndex]);
   this.options.series.forEach(function(item, index){
      if (index != e.seriesIndex){
         item.opacity = 0.3;
      }
      else{
         item.opacity = 1;
      }
   });
   this.redraw(true);
}

I hope this helps!

Regards,
Eduardo Serra
Telerik by Progress

[Morten]

Hi Eduardo 

thanks for your suggestion. Almost does it.

However, if I put the same code in legendItemHover (replace legendItemClick with legendItemHover) I doesn't work.

I was looking for an event like to restore the opacity of all series (ie. legendAreaExit) and went with plotAreaHover as my best option. Any bettersuggestion?

Also, I noticed the true param in your call to redraw. I can't find this in the documentation. What does it do? (I noticed it disabled the animation)

/Morten

 

[Eduardo Serra]

Hello Morten,

The logic might have to change a little for it to work in the legendItemHover event instead. When changed to be fired then, it works as expected for the first series. The Dojo I shared with you was just a proof-of-concept to get you started. 

The best event to restore opacity might vary depending on the requirements of each application; the process of restoring it would be similar to what we did using the series options for opacity. 

If there's still something missing from your implementation of this functionality, please share a Kendo UI Dojo that represents what you're currently working with so we can jump in and help you by editing it directly.

I hope this helps!

Regards,
Eduardo Serra
Telerik by Progress