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

ejchart tooltip position is incorrect

We are using following code to display custom tooltip in ejchart.

   var displayToolTip = (sender) => {

                var dataItem = chartData[sender.data.pointIndex];
                var ly_or_ld = sender.data.seriesIndex == 0 ? "LY" : "LD";

                sender.data.currentText =
                    "<table>" +
                    "<tr>" +
                    "<td colspan='2'><b>" + dataItem.HrchyLevel1Descr + "</b></td>" +
                    "</tr>" +
                    "<tr>" +
                    "<td>" + ttLabelDate + "</td>" +
                    "<td>" + dataItem[ly_or_ld + "_Date"] + "</td>" +
                    "</tr>" +
                    "<tr>" +
                    "<td>" + ttLabelVlzMR + "</td>" +
                    "<td>" + dataItem[ly_or_ld + "_NavPC"] + "</td>" +
                    "</tr>" +
                    "<tr>" +
                    "<td>" + "%" + "</td>" +
                    "<td>" + dataItem[ly_or_ld + "_Weight"] + "</td>" +
                    "</tr>" +

                return false;


                    toolTipInitialize: displayToolTip,

But the tool tip is positioned incorrectly. Please see the attached screenshot.

Any idea how to fix this?

Attachment: TTPosition_38cd43ab.zip

3 Replies

AT Anandaraj T Syncfusion Team November 17, 2016 10:19 AM UTC

Hi Balasubramanian, 

Thanks for using Syncfusion products. 

We have analyzed your code snippet and found that table tag is added to tooltip through tooltipInitialize event. We suggest you to use tooltip template to display a table inside chart tooltip. 

We have also prepared a sample using the code snippet and it can be downloaded from the following link 
Please refer the following code snippet to use tooltip template 

    <div id="chartTooltip" style="background-color:white;display:none"></div> 
    <div id="container" style="width:500px;"> 
      // . . . other code snippets 
              dataSource: data, xName: "X", yName: "Y",  
                  template: "chartTooltip" 
        toolTipInitialize: displayToolTip 

Our online documentation for tooltip template is available in the following link 

Please let us know if you have any concern. 


BR Balasubramanian Ramanathan November 17, 2016 04:02 PM UTC

Thank you. Really it helped me to solve the issue.

AT Anandaraj T Syncfusion Team November 18, 2016 10:27 AM UTC

Hi Balasubramanian, 
Most welcome. 
Please let us know if you need further assistance on this. 

Live Chat Icon For mobile
Up arrow icon