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

Legend Custom Event Handler

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

6 Replies

DD Dharanidharan Dharmasivam Syncfusion Team 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. 



DD Dharanidharan Dharmasivam Syncfusion Team 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. 



RS Rikard Schouwstra 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?


DD Dharanidharan Dharmasivam Syncfusion Team 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. 



RS Rikard Schouwstra 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 


DD Dharanidharan Dharmasivam Syncfusion Team 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.  


Loader.
Live Chat Icon For mobile
Up arrow icon