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 Update On trackToolTip

I need to update the text in the legend when the user moves over a point in the chart.  I have created an event handler for the trackToolTip event and calculated the new legend text but I do not know how to make the legend update with the new value. 

                    trackToolTip: function (args) {
                        if (args && args.data && args.model) {
                            var series = args.model.series[args.data.serIndex];
                            var point = series.dataSource[args.data.pointIndex];
                            var i = series.name.lastIndexOf("~");
                            if (i >= 0) {
                                series.name = series.name.substr(0, i) + "~" + point.Value;
                            else {
                                series.name = series.name + "~" + point.Value;

Is there any way to accomplish this? 

1 Reply

JA Jayavigneshwaran Syncfusion Team January 21, 2015 06:51 AM UTC

Hi Josh,

Thanks for using Syncfusion product.

We have analyzed this. This is not possible to achieve with in chart sample code.

Because the tooltip text is got on hovering it on a point. At that time legend item is already rendered. So if we assign tooltip text to legend text and call redraw() method, No effect will be taken in DOM.

The below code snippet shows a way to achieve this.


         function track(sender){                                     // method is called on tooltipInitialize

                                var id = this.svgObject.id;                            // to get id

                                var element = $("#" + id + "_Legend0").children()[1];  // to get the legend item element

                                element.textContent= sender.data.currentText;          // changes the text



We have also made a sample to illustrate this. Find it form the below location.

Please find the below screen shot of the attached sample.

Please let us know if you have any concern.



Live Chat Icon For mobile
Up arrow icon