Sparkline with ToolTip

[ww1711]

Hello,

 

I'm having an issue with the ToolTip popping up outside of the chart canvas (rendered with JS).

 

Please see the screenshot attached.

 

Any thoughts on how to make the ToolTip show within the constraints of the chart canvas?

 

 

Thanks

[Guest Sashibhusan]

Hi,

 

We have tested with a sample Sparkline chart and it is not showing the issue of "cutting the tooltip", as per your screen shot.

 

Could you please provide the chart data along with the chart dimension, to better look into this issue/

 

Also, as per the screen shot, it seems, the tooltip hides inside the container where chart renders. So, could you please try once by reducing the Z-Index of the container and see if it helps?

 

Hope this helps!

 

[ww1711]

Hello Sashibhusan,

 

I increased my chart height by 5 pixels (from 35 to 40) and the tooltip now renders as expected; for low points, the tooltip shows above the point, as opposed to below it.

 

Just for testing of the solution, I decreased the height back down to 35 pixels, and adjusted the z-index of the div the chart is housed within; no changes.

 

Here is the chart data:

<chart palette='2' caption='' bgAlpha='100' setAdaptiveYMin='1' highColor='00CC33' lowColor='FF0000' showOpenAnchor='0' showCloseAnchor='0'  showHighLowValue='1' showOpenValue='1' showCloseValue='1' decimals='1' showToolTip='1' bgColor='FFFFFF'><dataset><set value='86.7000000000' toolText='86.7 - Mar 2013'/><set value='84.0000000000' toolText='84.0 - Apr 2013'/><set value='94.0000000000' toolText='94.0 - May 2013'/><set value='89.9000000000' toolText='89.9 - Jun 2013'/><set value='80.8000000000' toolText='80.8 - Jul 2013'/><set value='93.5000000000' toolText='93.5 - Aug 2013'/><set value='94.5000000000' toolText='94.5 - Sep 2013'/><set value='94.3000000000' toolText='94.3 - Oct 2013'/><set value='83.8000000000' toolText='83.8 - Nov 2013'/><set value='83.8000000000' toolText='83.8 - Dec 2013'/><set value='99.1000000000' toolText='99.1 - Jan 2014'/><set value='89.8000000000' toolText='89.8 - Feb 2014'/></dataset></chart>

Dimensions:

285w x 35h

 

As I said, I "fixed" the problem by increasing the height, so this is no longer a real issue on my page, but a solution would be perfect so this can be avoided where chart size calls to be smaller.

 

 

Thanks

[ww1711]

UPDATE:

 

The issue is still present even with the increase in chart height. The lower-most points render correctly, but now points that are a few points higher in value, render the tooltip below, and outside, the chart container.

Edited February 28, 2014 by ww1711

[Guest Sashibhusan]

Hi,

 

Please note that for smaller chart dimension (width and height), if the tooltip of an anchor is not fit within the canvas/chart area, it will float out of the chart area with higher Z-index and complete tooltip will show.

 

Please find the screen shot of the chart rendered with dimension: 285w x 35h and using the provided XML data, for your reference.

 

As you could see in the screen shot, the actual DIV container (which renders chart) with white background and the tooltip shown out of this area with higher Z-index.

 

However, if feasible please provide the scaled down sample, so that we could test and replicate the issue (cutting of tooltip) from our end and step ahead to investigate more on it.

 

Awaiting your valuable response.

 

[Guest Sashibhusan]

Also, could you please let me know the exact version of FusionWidgets XT you are using? (To know the version details, open the "FusionCharts.js" file in any text editor and view first few commented lines)