Legend Text Overlapping

[chris.parker]

Hello,

 

I am using FusionCharts XT (js version - according to FusionCharts.js it's 3.2.4-release.8565, but according to the charts it's 3.2.2) and am having some problems with the legends on a few graphs. The text is overlapping, which causes the graph to look rather poor. I've tried a bunch of the options available for styling the legend area, but nothing really seems to help. This behavior is most pronounced in Internet Explorer, but can be seen in other browsers as well.

 

Here is the xml being used to generate the chart:

 

<chart   clickURL='/_jam/providers/measure/trends.engage?data[Graph][name]=graph_ff&interval=-30 days' showBorder='0' showLegend='1' bgAlpha='0,0' hoverCapBg='FFECAA' hoverCapBorder='F47E00' formatNumberScale='0' decimalPrecision='0' showValues='0' useRoundEdges='0' numDivLines='5' divLineColor='AAAAAA' showAlternateHGridColor='0' alternateHGridColor='' alternateHGridAlpha='100' yAxisMinValue='0' yAxisValueDecimals='1' yAxisName='' showNames='1' showLabels='1' rotateNames='1' labelDisplay='ROTATE' rotateLabels='1' slantLabels='1' outCnvBaseFont='10' outCnvBaseFontSize='Arial' chartLeftMargin='0' chartRightMargin='0' chartTopMargin='10' chartBottomMargin='0' showShadow='0' use3DLighting='0' canvasBorderAlpha='0' legendBorderAlpha='0' legendShadow='0' plotGradientColor=' ' labelStep='2' divLineAlpha='10' is3D='0' showAlternateVGridColor='0' adjustDiv='1' legendNumColumns='' reverseLegend='1'><categories> <category name='21 Jan' /><category name='22 Jan' /><category name='23 Jan' /><category name='24 Jan' /><category name='25 Jan' /><category name='26 Jan' /><category name='27 Jan' /><category name='28 Jan' /><category name='29 Jan' /><category name='30 Jan' /><category name='31 Jan' /><category name='01 Feb' /><category name='02 Feb' /><category name='03 Feb' /><category name='04 Feb' /><category name='05 Feb' /><category name='06 Feb' /><category name='07 Feb' /><category name='08 Feb' /><category name='09 Feb' /><category name='10 Feb' /><category name='11 Feb' /><category name='12 Feb' /><category name='13 Feb' /><category name='14 Feb' /><category name='15 Feb' /><category name='16 Feb' /><category name='17 Feb' /><category name='18 Feb' /><category name='19 Feb' /><category name='20 Feb' /></categories> <dataset seriesName='Total growth' color='1AD6B2' anchorBorderColor='1AD6B2' anchorBgColor='1AD6B2' renderAs='column'><set value='1' /><set value='5' /><set value='3' /><set value='5' /><set value='3' /><set value='3' /><set value='2' /><set value='3' /><set value='1' /><set value='7' /><set value='2' /><set value='6' /><set value='1' /><set value='4' /><set value='4' /><set value='3' /><set value='5' /><set value='3' /><set value='3' /><set value='5' /><set value='5' /><set value='4' /><set value='4' /><set value='2' /><set value='4' /><set value='2' /><set value='2' /><set value='3' /><set value='-14' /><set value='2' /><set value='2' /></dataset> <dataset seriesName='Twitter following' color='6F3BF1' anchorBorderColor='6F3BF1' anchorBgColor='6F3BF1' renderAs='column'><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='1' /><set value='1' /><set value='1' /><set value='1' /><set value='1' /><set value='1' /><set value='-4' /><set value='-4' /><set value='-4' /></dataset> <dataset seriesName='Twitter followers' color='13B5EA' anchorBorderColor='13B5EA' anchorBgColor='13B5EA' renderAs='column'><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='0' /><set value='1' /><set value='1' /><set value='1' /><set value='-1' /><set value='-1' /><set value='-1' /><set value='-1' /><set value='-1' /><set value='-1' /><set value='-1' /><set value='-1' /><set value='-1' /><set value='-1' /><set value='-1' /><set value='1' /><set value='1' /><set value='1' /><set value='1' /><set value='1' /><set value='-12' /><set value='-12' /><set value='-12' /></dataset> <dataset seriesName='Facebook likes' color='EC008C' anchorBorderColor='EC008C' anchorBgColor='EC008C' renderAs='column'><set value='1' /><set value='5' /><set value='3' /><set value='5' /><set value='3' /><set value='3' /><set value='2' /><set value='3' /><set value='1' /><set value='6' /><set value='2' /><set value='6' /><set value='2' /><set value='4' /><set value='4' /><set value='3' /><set value='5' /><set value='3' /><set value='3' /><set value='5' /><set value='5' /><set value='4' /><set value='4' /><set value='1' /><set value='4' /><set value='2' /><set value='2' /><set value='3' /><set value='2' /><set value='2' /><set value='2' /></dataset> <styles><definition><style name='html-ize' type='font' isHTML='1' /></definition><application><apply toObject='Caption' styles='html-ize' /></application></styles></chart>

The graph type is "line", and the graph is being sized to 517px*300px

 

Let me know if you need any more information from me. I'm subscribed to this topic and will get back to you as soon as I am able.

 

Thank You!

 

Chris

[Swarnam]

Hi Chris,

 

Welcome to FusionCharts Forum.

 

Rendering the chart using Internet Explorer browser, I'm unable to replicate the issue for any overlapping issue in the legend. Can you please elaborate on the issue faced?

 

Please find the attached screenshot for your reference(Using IE8).

[chris.parker]

I guess that I should have noted that I'm using the js rendering engine. (ie FusionCharts.setCurrentRenderer('javascript')). If I switch to flash, everything works as expected. I threw the graph on a separate page all by itself just to be sure, and I was able to reproduce it. To make things easier, here's the full source from that:

 

(The forum ate my html -- even in a code block. See the attached txt Looks like I can't upload it either. Here's a pastebin... http://pastebin.com/ZepukHfL)

 

Thank you for your continued efforts,

 

Chris

Edited February 21, 2013 by chris.parker

[Swarnam]

Hey Chris,

 

Using JavaScript rendering, legend text does not overlaps.

 

Please find the attached screenshot for your reference.