Tooltip Example

[lavanyadeepak]

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]

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, 

Sample Location: http://www.syncfusion.com/downloads/support/forum/126284/ze/trackball_tooltip-457157993  

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.