This is a migrated thread and some comments may be shown as answers.

dim all other series on legend hover

3 Answers 66 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Morten
Top achievements
Rank 1
Veteran
Iron
Morten asked on 18 Jan 2017, 05:12 AM

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?

3 Answers, 1 is accepted

Sort by
0
Eduardo Serra
Telerik team
answered on 18 Jan 2017, 04:31 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Morten
Top achievements
Rank 1
Veteran
Iron
answered on 19 Jan 2017, 04:37 AM

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

 

0
Eduardo Serra
Telerik team
answered on 23 Jan 2017, 03:17 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Charts
Asked by
Morten
Top achievements
Rank 1
Veteran
Iron
Answers by
Eduardo Serra
Telerik team
Morten
Top achievements
Rank 1
Veteran
Iron
Share this question
or