Axis Label Wrapping

[MartinS]

I have three charts on a page, and the x-axis labels are the same on both charts.

One chart is 175px high by 350px wide, and the second is the same height but 550px wide.  Only difference is that the second chart has a legend displayed to the right of the chart.  The first chart does not display a legend.

With chart 1, the three labels word wrap, but on the second one they don't - is there a way to force the axis label word wrap?

Thanks

Martin

[Arindam]

Hi,

Could you please charst's attribute labelDisplay='WRAP'?

labelDisplay

String

WRAP, STAGGER, ROTATE or NONE

Using this attribute, you can control how your data labels (x-axis labels) would appear on the chart. There are 4 options: WRAP, STAGGER, ROTATE or NONE. WRAP wraps the label text if it's longer than the allotted area. ROTATE rotates the label in vertical or slanted position. STAGGER divides the labels into multiple lines.

i.e

<chart ...... labelDisplay='WRAP' ..... >

[MartinS]

Hi

Yes, thanks - I have tried that but it does not work for the third chart, even though all three charts are the same type and therefore use the same code.

The sizes differ - one is 350px wide, with no legend, which displays the text correctly, the other chart has a legend, which displays on the right of the chart and the width of the chart is 550px.  if I turn off the legend, and set the width to match the first chart, the text wraps to match chart 1, but with the width set as 550 and the legend off or on, the text does not wrap.

This is the page source for the offending chart:

 <!-- START Code Block for Chart FusionChart3_Chart -->

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="175" name="FusionChart3_Chart">

<param name="allowScriptAccess" value="always" />

<param name="movie" value="../../FusionCharts/StackedColumn2D.swf"/>

<param name="FlashVars" value="&chartWidth=550&chartHeight=175&debugMode=0&dataXML=<chart  labelDisplay='WRAP' animation = '1' bgColor='FFFFFF' showBorder='0' useRoundEdges='1' setAdaptiveYMin='1'  caption = '' xAxisName='' yAxisName =''  xAxisMinValue ='0' xAxisMaxValue ='20' yAxisMinValue ='0' yAxisMaxValue ='0' showDivLineValues ='1' adjustDiv ='0' numDivLines ='1' decimals='2'  showValues='1'  showLegend ='0' legendPosition ='RIGHT' legendShadow='0' legendBorderColor='FFFFFF'  ><categories><category label='Flat contributions'/><category label='RPI-linked contributions'/><category label='Salary-linked contributions'/></categories><dataset seriesName='Cost of accrual'  alpha = '100' includeInLegend ='1'  color='3333CC'  showValues='1'  ><set value = '7.3'/><set value = '7.3'/><set value = '7.3'/></dataset><dataset seriesName='Deficit recovery contribution'  alpha = '100' includeInLegend ='1'  color='CC3333'  showValues='1'  ><set value = '18.9'/><set value = '16.5'/><set value = '16.5'/></dataset><styles><definition><style name='myCaptionFont' type='font' font='Verdana' size='16' color='666666' /><style name='myXAxisTitlesFont' type='font' font='Verdana' size='13' color='666666' bold='0' /><style name='myYAxisTitlesFont' type='font' font='Verdana' size='13' color='666666' bold='0'/></definition><application><apply toObject='Caption' styles='myCaptionFont' /><apply toObject='XAxisName' styles='myXAxisTitlesFont' /><apply toObject='YAxisName' styles='myYAxisTitlesFont' /></application></styles></chart>" />

<param name="quality" value="high" />

<embed src="../../FusionCharts/StackedColumn2D.swf" FlashVars="&chartWidth=550&chartHeight=175&debugMode=0&dataXML=<chart  labelDisplay='WRAP' animation = '1' bgColor='FFFFFF' showBorder='0' useRoundEdges='1' setAdaptiveYMin='1'  caption = '' xAxisName='' yAxisName =''  xAxisMinValue ='0' xAxisMaxValue ='20' yAxisMinValue ='0' yAxisMaxValue ='0' showDivLineValues ='1' adjustDiv ='0' numDivLines ='1' decimals='2'  showValues='1'  showLegend ='0' legendPosition ='RIGHT' legendShadow='0' legendBorderColor='FFFFFF'  ><categories><category label='Flat contributions'/><category label='RPI-linked contributions'/><category label='Salary-linked contributions'/></categories><dataset seriesName='Cost of accrual'  alpha = '100' includeInLegend ='1'  color='3333CC'  showValues='1'  ><set value = '7.3'/><set value = '7.3'/><set value = '7.3'/></dataset><dataset seriesName='Deficit recovery contribution'  alpha = '100' includeInLegend ='1'  color='CC3333'  showValues='1'  ><set value = '18.9'/><set value = '16.5'/><set value = '16.5'/></dataset><styles><definition><style name='myCaptionFont' type='font' font='Verdana' size='16' color='666666' /><style name='myXAxisTitlesFont' type='font' font='Verdana' size='13' color='666666' bold='0' /><style name='myYAxisTitlesFont' type='font' font='Verdana' size='13' color='666666' bold='0'/></definition><application><apply toObject='Caption' styles='myCaptionFont' /><apply toObject='XAxisName' styles='myXAxisTitlesFont' /><apply toObject='YAxisName' styles='myYAxisTitlesFont' /></application></styles></chart>" quality="high" width="550" height="175" name="FusionChart3_Chart"  allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

<!-- END Code Block for Chart FusionChart3_Chart -->

I did think it could be the legend but with legend off, the text still does not wrap.

Any help gratefully received as I need to get this sorted.

Martin

[Arindam]

Hi,

Could you please try with labelDisplay='STAGGER' ?

<chart ...... labelDisplay='STAGGER' ..... >

[MartinS]

Arindam

Stagger does work so we can make it stagger if right hand legend used, otherwise wrap. 

Not ideal though.  I believe this is a bug/issue as with some messing around it appears to be related to size of the chart with the legend on the right - maybe wrapping/chart size is not including the space taken for the legend?

Martin

Edited November 10, 2008 by Guest

[Arindam]

Hi,

I am already used Stagger with legend show its looking great. Could you please see the screen shot and data.xml and try it again? Also you can use smaller font size in x-axis.

Data.zip

[MartinS]

Hi

Yes, the stagger does work (as i stated above), it's the word wrap that doesn't with the legend on the right.  I'd like the charts to use a consistent format for axis labels, and I cannot get it to do this at the moment.

Thanks

Martin

[MartinS]

Can anyone help sort this out?  Is it a bug with fusion and legend positions?

Whatever setting I use, I cannot get the axis text to wrap properly if I set the legend to be on the right.

Thanks

Martin

[Pallav]

Hi Martin,

 

 

 

We're looking into this. Can you please send us your email at support [at] fusioncharts.com so that we can send you an update on this?