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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tooltip Example

Thread ID:

Created:

Updated:

Platform:

Replies:

126284 Oct 5,2016 03:15 PM UTC Oct 6,2016 12:35 PM UTC ASP.NET MVC 1
loading
Tags: Chart
lavanyadeepak
Asked On October 5, 2016 03:15 PM UTC

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

Dharanidharan Dharmasivam [Syncfusion]
Replied On 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. 
 
 
  
  


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.

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

;