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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ejchart tooltip position is incorrect

Thread ID:





127446 Nov 16,2016 10:13 AM UTC Nov 18,2016 10:27 AM UTC JavaScript 3
Tags: ejChart
Balasubramanian Ramanathan
Asked On November 16, 2016 10:13 AM UTC

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

Anandaraj T [Syncfusion]
Replied On 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. 


Balasubramanian Ramanathan
Replied On November 17, 2016 04:02 PM UTC

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

Anandaraj T [Syncfusion]
Replied On November 18, 2016 10:27 AM UTC

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


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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