ejchart tooltip position is incorrect

[Balasubramanian Ramanathan]

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>" +

                    "</div>";

                return false;

            };

    $("#chart").ejChart(

                {

                    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]

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 

Tooltip Template 

Please refer the following code snippet to use tooltip template 

[HTML] 

 

    <div id="chartTooltip" style="background-color:white;display:none"></div> 

    <div id="container" style="width:500px;"> 

 

    <script> 

      // . . . other code snippets 

      $("#container").ejChart({ 

          commonSeriesOptions:{  

              dataSource: data, xName: "X", yName: "Y",  

              tooltip:{ 

                  visible:true, 

                  template: "chartTooltip" 

              } 

          }, 

        toolTipInitialize: displayToolTip 

      });     

    </script> 

 

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

https://help.syncfusion.com/js/chart/user-interactions#tooltip-template 

Please let us know if you have any concern. 

Regards, 

Anand

[Balasubramanian Ramanathan]

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

[Anandaraj T]

Hi Balasubramanian, 

 

Most welcome. 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Anand