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.
Unfortunately, activation email could not send to your email. Please try again.

ejchart tooltip position is incorrect

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 [Syncfusion]
Replied On November 17, 2016 05:19 AM

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 

[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 

Please let us know if you have any concern. 

Regards, 
Anand

Balasubramanian Ramanathan
Replied On November 17, 2016 11:02 AM

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

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

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


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.

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.

;