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

Tooltip Example

Team,

In my Line Chart I have the following requirements.

There are three Y lines. I need to show tooltip for each Y and also a common tooltip for the chart itself. How do I show these tooltips.

Also I need to show a label in the Y corresponding to the start of each Y line. Kindly let me know how to show the same.

Thanks,

Deepak

1 Reply

DD Dharanidharan Dharmasivam Syncfusion Team October 6, 2016 12:35 PM UTC

Hi Deepak, 
 
Thanks for using syncfusion product. 
We have analyzed  your query. To show tooltip for each series you can use trackball option. To use the trackball for each series, kindly follow the code snippet below, 
 
Code snippet: 
ASP.NET MVC 
 
@(Html.EJ().Chart("container") 
//... 
.Crosshair(cr => cr.Visible(true).Type(CrosshairType.Trackball).TrackballTooltipSettings(tl => tl.Mode(TrackballDisplayMode.Float))) 
//... 
) 
 
 
To show common tooltip we have created work around. Using trackToolTip event we have collected all the series tooltip text and shown in a single tooltip. Kindly find the code snippet. 
ASP.NET MVC 
@(Html.EJ().Chart("container") 
//... 
.TrackToolTip("tooltip") 
//... 
) 
 
var width, textCollection = []; 
   function tooltip(sender) { 
     var locX, locY, padding = 10; 
     if (sender.data.serIndex == 0) 
     locX = sender.data.Location.X; 
     locY = sender.data.Location.Y; 
     textCollection.push(sender.data.currentText); 
      
       var divEle = document.getElementById("trackTooltip"); 
       $('#trackTooltip').empty(); 
       divEle.innerHTML = divEle.innerHTML + sender.data.currentText; 
       width = divEle.clientWidth; 
            
        
       $('#customTooltip').remove(); 
       if (locX != undefined && sender.data.serIndex == 0) { 
           var tooltip = $("<div></div>").attr({ 'id': 'customTooltip' }); 
           for (var l = 0; l < textCollection.length; l++) { 
               var para = document.createElement("p"); 
               var text = document.createTextNode(textCollection[l]); 
               para.appendChild(text); 
               tooltip.append(para); 
           } 
           $(document.body).append(tooltip); 
           textCollection = []; 
          
           if ((locX + width) >= (sender.model.m_AreaBounds.X + sender.model.m_AreaBounds.Width)) 
               locX = locX - 4 * (width); 
           $(tooltip).css({ 
               "left": locX + width + 10, 
               "top": locY + 10, 
               "display": "block", 
               "position": "absolute", 
               "z-index": "13000", 
               "cursor": "default", 
               "font-family": "Segoe UI", 
               "color": "#707070", 
               "font-size": "12px", 
               "background-color": "#FFFFFF", 
               "border": "1px solid black" 
           }); 
       } 
   } 
 
Screenshot: 
 
 
For your reference we have attached the sample. Kindly find the sample from below link, 
We are not clear with query Also I need to show a label in the Y corresponding to the start of each Y line. Kindly provide us more information on this query, so that we can provide solution sooner.  
  
Thanks, 
Dharani. 
 
 
  
  


Loader.
Live Chat Icon For mobile
Up arrow icon