We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Trigger function when series is set visible/hidden

Hi

I would like to trigger a function when the visibility of a series is changed by clicking on its name in the list below the chart.
Is this possible and if it is, how can this be achieved?

Regards
Bernd

5 Replies

DG Durga Gopalakrishnan Syncfusion Team August 10, 2017 09:47 AM UTC

Hi Bernd, 
  
Thanks for using Syncfusion products. 
  
We have analyzed your query. Your requirement can be achieved by triggering the legendItemClick event. This event will be triggered by clicking the legend item. Find the code snippet below 
  
[Angular 2] 
  
<ej-chart (legendItemClick)='legendItemClick($event)'>  
</ej-chart>  
  
legendItemClick(sender) { 
       alert("SeriesIndex : "+sender.data.legendItem.Style.SeriesIndex); 
} 
  
For your reference we have attached the sample link below. In the sample we have 3 series and while clicking the series name, seriesIndex will be displayed in alert box. You can change the sample according to your requirement. 
 
Sample link: Attachment  
 
Please let us know if you have any concern. 
  
Regards, 
Durga G 
 



BS Bernd Schuhmacher August 10, 2017 11:46 AM UTC

Hi

Thanks for the hint.

I checked this one already out and it works as expected. But If i need the state (visible or hidden) of the series I get the wrong in the moment the event is triggered. So I needed to set a timeout of some milliseconds around the part where I look for the visibility.

Is there a smarter way for getting the correct visibility?

Regards

Bernd



DD Dharanidharan Dharmasivam Syncfusion Team August 11, 2017 12:21 PM UTC

Hi Bernd, 
 
Thanks for your revert. 
 
We have analyzed your query. Now we have modified the sample with respect to your scenario. Here we have displayed the state of each series in alert box using the legendItemClick event. Find the code snippet below. 
 
[Angular 2]  
   
<ej-chart (legendItemClick)='legendItemClick($event)'>   
</ej-chart>   
   
legendItemClick(sender) {  
      var value, str=""; 
        for (var i = 0; i < sender.model.series.length; i++) { 
            if (i == sender.data.legendItem.Style.SeriesIndex) 
                value = sender.model.series[i].visibility == "hidden" ? "visible" : "hidden"; 
            else 
                value = sender.model.series[i].visibility; 
            str += "\nSeries " + i + " : " + value; 
       } 
       alert(str); 
 
 
 
Here we have toggled the visibility of the series using the index value(sender.data.legendItem.Style.SeriesIndex) obtained in the event and displayed in the alert box. 
 
Screenshot: 
 

You can change this with respect to your requirement. Sample for reference can be find from below link. 
 
Thanks, 
Dharani. 



BS Bernd Schuhmacher August 14, 2017 05:14 AM UTC

Hi Dharani


This did the trick. Thanks for helping.

Bernd



DD Dharanidharan Dharmasivam Syncfusion Team August 14, 2017 11:50 AM UTC

Hi Bernd, 

Thanks for the update. 

Kindly revert us, if you need further assistance. 

Dharani. 



Loader.
Live Chat Icon For mobile
Up arrow icon