dim all other series on legend hover

4 posts, 0 answers
  1. Morten
    Morten avatar
    301 posts
    Member since:
    Jul 2012

    Posted 17 Jan Link to this post

    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?

  2. Eduardo Serra
    Admin
    Eduardo Serra avatar
    91 posts

    Posted 18 Jan Link to this post

    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.
  3. Morten
    Morten avatar
    301 posts
    Member since:
    Jul 2012

    Posted 18 Jan in reply to Eduardo Serra Link to this post

    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

     

  4. Eduardo Serra
    Admin
    Eduardo Serra avatar
    91 posts

    Posted 23 Jan Link to this post

    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.
Back to Top