Legend Custom Event Handler

[Rikard Schouwstra]

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]

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.  

 

Link:  https://www.syncfusion.com/feedback/4734/ 

 

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

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/LegendClickEvent2046467795.zip 

 

Regards, 

Dharani. 

[Dharanidharan Dharmasivam]

Hi Rikard, 

 

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

 

Thanks, 

Dharani. 

[Rikard Schouwstra]

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]

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]

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]

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.