razvan.deac Report post Posted January 27, 2014 Hi, I have a page with multiple charts on it. There is a problem with the tooltip that is placed behind the chart bars. Chart xml: <chart yaxisname="Y Axis Name" xaxisname="X Axis Name" > <set label="1" value="1" /> <set label="2" value="2" /> <set label="3" value="3" /> <set label="4" value="4"/> </chart> Please see the image attached. Is there any approach to fix this? Thanks, Razvan Share this post Link to post Share on other sites
Guest Sumedh Report post Posted January 28, 2014 Hello Razvan, Are you rendering chart inside some container control? Also, what FusionCharts version you have used? I've tested same chart XML with simple demo and I was unable to replicate the same. Please check refer this screen-cast: http://www.screenr.com/9x7N Share this post Link to post Share on other sites
razvan.deac Report post Posted January 28, 2014 Hi, The charts are rendered in a complex html structure, in specific containers. I'm using FusionCharts version 3.3.1-sr3.21100. Are there any known css properties that can have an impact on the tooltip. Thanks, Razvan Share this post Link to post Share on other sites
Guest Sumedh Report post Posted January 29, 2014 Hello Razvan, Can you please provide more details on your issue? What container control you have used (for e.g. jQuery lightbox, Highslide etc.) Please paste your sample code for testing purposes. It would be helpful, if you can attach a detailed screen-shot. Share this post Link to post Share on other sites
razvan.deac Report post Posted January 29, 2014 Hi Sumedh, Please see the code bellow, if z-index for #chartContainer1 is greater that 999 tooltip is not visible anymore. Thanks, Razvan <!DOCTYPE HTML> <html> <head> <!-- @version fusioncharts/3.3.1-sr3.21100 --> <script type="text/javascript" src="FusionCharts.js"> </script> </head> <style> html { height: 100%; } body { height: 100%; overflow: hidden; } .wrapper { height: 100%; overflow: auto; } #chartContainer1 { position: absolute; z-index: 1000; } </style> <body> <div class="wrapper"> <div id="chartContainer1"></div> </div> <script type="text/javascript"> FusionCharts.setCurrentRenderer('javascript'); var myChart1 = new FusionCharts( "Column3D", "myChartId1", "400", "300", "0"); var xmlData = '<chart numberPrefix="$" sformatNumberScale="1" sNumberPrefix="$" syncAxisLimits="1" rotateValues="1" showSum="0">' + '<set label="SampleText_1" value="232400" link="JavaScript: callback(\'SampleText_1\');"/>' + '<set label="SampleText_2" value="339800"/>' + '<set label="SampleText_3" value="411900"/>' + '<set label="SampleText_4" value="398400"/>' + '<categories>' + '<category label="SampleText_1"/>' + '<category label="SampleText_2"/>' + '<category label="SampleText_3"/>' + '<category label="SampleText_4"/>' + '</categories>' + '<dataset seriesName="SampleName">' + '<set value="232400"/>' + '<set value="232400"/>' + '<set value="339800"/>' + '<set value="411900"/>' + '<set value="398400"/>' + '<dataset seriesName="SampleName">' + '<set value="232400"/>' + '<set value="232400"/>' + '<set value="339800"/>' + '<set value="411900"/>' + '<set value="398400"/>' + '</dataset>' + '<dataset seriesName="SampleName">' + '<set value="232400"/>' + '<set value="232400"/>' + '<set value="339800"/>' + '<set value="411900"/>' + '<set value="398400"/>' + '</dataset>' + '</dataset>' + '<dataset seriesName="SampleName" renderAs="line" parentYAxis="S" showValues="1" valuePosition="BELOW">' + '<set value="147400"/>' + '<set value="189100"/>' + '<set value="219800"/>' + '<set value="289100"/>' + '<set value="209800"/>' + '<dataset seriesName="SampleName" renderAs="line" parentYAxis="S">' + '<set value="214400"/>' + '<set value="214100"/>' + '<set value="284800"/>' + '<set value="323100"/>' + '<set value="324800"/>' + '</dataset>' + '</dataset>' + '<lineset seriesName="Sampletext" valuePosition="BELOW">' + '<set value="104400"/>' + '<set value="104100"/>' + '<set value="144800"/>' + '<set value="213100"/>' + '<set value="214800"/>' + '</lineset>' + '</chart>' myChart1.setXMLData(xmlData); myChart1.render("chartContainer1"); </script> </body> </html> Share this post Link to post Share on other sites
Haritha Report post Posted January 30, 2014 Hi Razvan, The default z-index applied to tooltip is '999'. So, if you are setting the parent container with higher z-index value, you would need to set the z-index for the element having id "fusioncharts-tooltip-element" accordingly. Try the following: #chartContainer1 { position: absolute; z-index: 1000; } #fusioncharts-tooltip-element{ z-index: 2000; } Awaiting your feedback. Share this post Link to post Share on other sites
razvan.deac Report post Posted February 7, 2014 Hi Harita, Thanks for your suggestion, was really helpful, solved my problem. Razvan Share this post Link to post Share on other sites
Haritha Report post Posted February 10, 2014 Happy FusionCharting! Share this post Link to post Share on other sites
