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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Legend Custom Event Handler

Thread ID:

Created:

Updated:

Platform:

Replies:

143109 Mar 5,2019 11:52 AM UTC Mar 20,2019 11:53 AM UTC ASP.NET Core - EJ 2 6
loading
Tags: Charts
Rikard Schouwstra
Asked On March 5, 2019 11:52 AM UTC

Hi,

I need to change the click event handler of legends on a line chart to a custom function in javascript, how could this be achieved?

Regards

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 6, 2019 06:12 AM UTC

Hi Rikard , 
 
Greetings from Syncfusion. 
 
We have analyzed the requested requirement. Currently we do not have support to achieve your requirement, but we have already logged a feature request To Provide Support for legend click event in chart. This will be available in can be tracked through our feedback portal below.  
 
 
Please upvote this feature to make this our priority. While this feature itself is important we can’t provide definite timeline on when this feature will be available and we will prioritize the features every release, based on the user demands.  
  
If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal. 
 
However, we can achieve this requirement by using chartMouseClick event. In this event we can get the target element and based on that we can customize the chart. We have prepared a sample in which we we have changed fill color of the chart series when click on the legend. Please find below snippet, 
 
Code Snippet: 
 
  function chartMouseClick(args) { 
        if (((args.target).indexOf('chart_legend_text') > -1))….. { 
            var chart1 = document.getElementById("container").ej2_instances[0]; 
            chart1.series[0].fill = "red"; 
            chart1.series[1].fill = "blue"; 
            chart1.refresh(); 
        } 
    } 
 
Screenshots: 
 
Before Click 
After Click 
 
 
 
 
Regards, 
Dharani. 


Dharanidharan Dharmasivam [Syncfusion]
Replied On March 11, 2019 12:49 PM UTC

Hi Rikard, 
 
Most welcome. Kindly revert us, if you need further assistance. We are always happy in assisting you. 
 
Thanks, 
Dharani. 


Rikard Schouwstra
Replied On March 11, 2019 01:37 PM UTC

Thank you very much for the reply. What if I have multiple charts, is there a way to check which chart is clicked in the arguments passed through?

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 13, 2019 06:02 PM UTC

Hi Rikard, 
 
We have analyzed your query. Using the chartMouseClick event. From the target(id) obtained from this event, we can know about the information on which chart the click is made. Find the code snippet below. 
 
 
<ejs-chart id="container1" chartMouseClick="chartMouseClick"> 
  </ejs-chart> 
 
function chartMouseClick(args) { 
        console.log(args.target); 
    } 
 
 
Screenshot:  
 
 
Here we have clicked on three chart and shown the target in the console window. The selected part is the id of the chart rendered. This can be changed based on your scenario. 
 
Thanks, 
Dharani. 


Rikard Schouwstra
Replied On March 20, 2019 09:27 AM UTC

Thank you very much, I have one last question. I need to find the text of the specific legend clicked if that is possible, and the color of the legend shape clicked? If all my questions could be found on documentation could you please give me the link as well.

Regards 

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 20, 2019 11:53 AM UTC

Hi Rikard, 
 
Thanks for the update. Your requirement can be achieved using the chartMouseClick event. In this event, we can get the legend text on which we have clicked and color of the legend’s shape. Find the code snippet below to achieve this requirement. 
 
 
<ejs-chart chartMouseClick="chartMouseClick"> 
</ejs-chart> 
 
function chartMouseClick(args) { 
       if (((args.target).indexOf('chart_legend_shape') > -1) ||    
                   (args.target).indexOf('chart_legend_shape_marker_') > -1) { 
                          //Shown the color here 
                          alert(document.getElementById(args.target).getAttribute("fill")); 
        } else if ((args.target).indexOf('chart_legend_text')> -1) { 
            //Shown the text here 
            alert(document.getElementById(args.target).innerHTML); 
        } 
    } 
 
 
 
In the above code, we have shown the text and color in an alert box, you can change this based on your requirement. 
 
Thanks, 
Dharani.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon