Set bold for Categories in Stacked 2d Bar Chart

[stung]

Is there a way to bold the categories in the stacked 2D Bar Chart?

Besides following 3 attributes:

font	String	Valid font face	Lets you specify font face for the x-axis data labels.
fontSize	Number		Lets you specify font size for the x-axis data labels.
fontColor	Color	Hex Code	Lets you specify font color for the x-axis data labels.

[Guest Basundhara Ghosal]

Hi,

In case you wish to apply bold feature to the category names of the chart using 'Styles', please try setting the 'bold' attribute in the 'Styles' element of the 'font' property to '1'.

Ref.- <styles>

  <definition>

  <style name='MyFirstFontStyle' type='font' face='Verdana' size='12' color='FF0000' bold='1' bgColor='FFFFDD' />

  </definition>

  <application>

  <apply toObject='DataLabels' styles='MyFirstFontStyle'/>

</application>  

</styles>

For further reference, please refer to the link below :-

Ref.- http://www.fusioncharts.com/docs?/Styles/HowToUse.html

http://www.fusioncharts.com/docs?/Styles/Font.html

Hope this helps.

[stung]

Thanks bro,

I will try it!

One more thing I figure out the category name will be trimmed if it is too long, and seems the V3 version has set a hidden width for the ploting area.

If I want to auto wrap the category name in the stacked 2D bar chart, how can I achieve it?

I am using the V3.1 Trail version.

[stung]

Thanks dude, the style setting works fine.

If I want to create a auto wrap categories, how can I achieve it, as the plot area has blocked the rest of the string if my category labels are too long...

I wonder if it can be done using the style part.

Any suggestions?

I am using V3.1 Trail version

[Sanjukta]

Hi,

I am afraid, Stacked Bar 2D chart of the FusionCharts suite natively does not support the feature of wrapping of the category labels, as of now.

As a work-around, please try using " " in between the label name to break the long name.

Ref.- <category label='I love my country' />

Hope this helps.

[stung]

Thanks for the suggestion,

I want to know what the max length of the labels can I set for the following stacked 2d Bar Chart

Call

renderChart("../FusionCharts/StackedBar2D.swf", "", strXML, "Chart", 1200, 600, 0, 0)

The max width is 1200, so what the max length for the label?

The plotting area seems have a min width, and it will block the rest of the my category label string.

I see there is a isHTML setting supported in the style, is it possible to pass a wrapped html code as the category label?

 

 

[Guest Basundhara Ghosal]

Hi,

Thanks for your appreciation. 

so what the max length for the label?

The length of the datalabels supported by a chart depends on various factors like :-

1) The length of the string that is getting displayed as the datalabels.

2) The width of the chart.

3) The value set for the attributes "chartLeftMargin" and "labelPadding" in the <chart> element.

In case you wish to display a long datalabels, please try fixing a small value for the attributes "chartLeftMargin" and "labelPadding" in the <chart> element as well please try using ' '(as already mentioned in our previous post) as a line-break for the long datalabels.

Ref.- http://www.fusioncharts.com/docs?/AttDesc/Padding.html

Also, you can try applying 'Styles' on the 'dataLabels' object using the 'font' attribute to specify a size of the font of the datalabels of your choice.

Ref.- <styles>

  <definition>

  <style name='MyFirstFontStyle' type='font' face='Verdana' size='8' color='FF0000' bold='1' bgColor='FFFFDD' />   </definition>

  <application>

  <apply toObject='Caption' styles='MyFirstFontStyle'/>

</application>  

</styles>

In case you it still does not resolve your issue, please send us the XML codes that you are using as an attachment.

Hope this helps. Awaiting your reply.

 

 

[stung]

Thanks for the advice,

I have create a function auto wrap the long category labels, while the alignment is not so friendly. I wonder is there a easy way to set the alignment for the category labels?

- <chart caption="Top 10 Statements (Highest % of Slightly Agree / Agree / Strongly Agree) - All Staff Levels" rotateValues="1" placeValuesInside="1" palette="1" shownames="1" showYAxisValues="0" showvalues="0" numberPrefix="" numberSuffix="%25" showSum="1" decimals="1" showShadow="1" chartRightMargin="10" chartLeftMargin="30" exportEnabled="1" exportAtClient="1" exportHandler="fcExporter1">

- <categories>

  <category name="My immediate manager/supervisor listens to and understands my opinion. (4.39)" />

  <category name="Fusion Chart Company provides an equal opportunity environment (i.e. a working environment free from sex, race, religion, marital status, pregnancy, family status or disability discrimination) for employees." />

  <category name="My immediate manager/supervisor gives clear directions to enable me to do my job well. (3.86)" />

  <category name="My immediate manager/supervisor has enough functional / operational knowledge. (4.85)" />

  <category name="My immediate manager/supervisor transfers knowledge and skills effectively. (5.01)" />

  <category name="My immediate manager/supervisor is fair to all in our department. (4.39)" />

  <category name="My immediate manager/supervisor shows respect to his/her subordinates. (4.21)" />

  <category name="Top Management shows respect to staff at all levels in the Company. (3.86)" />

  <category name="My department management shows respect to staff at all levels in the department. (4.85)" />

  <category name="My immediate superior holds regular meetings with me to discuss my work and progress. (5.01)" />

  </categories>

- <dataset seriesName="Slightly Agree" color="C38EC7" showvalues="1">

  <set value="28.6" showValue="1" />

  <set value="27.3" showValue="1" />

  <set value="28.7" showValue="1" />

  <set value="20.9" showValue="1" />

  <set value="25.4" showValue="1" />

  <set value="13.9" showValue="1" />

  <set value="22.1" showValue="1" />

  <set value="15.9" showValue="1" />

  <set value="12.3" showValue="1" />

  <set value="11.8" showValue="1" />

  </dataset>

- <dataset seriesName="Agree" color="F87431" showvalues="1">

  <set value="54.3" showValue="1" />

  <set value="47.7" showValue="1" />

  <set value="50.4" showValue="1" />

  <set value="36.2" showValue="1" />

  <set value="26.7" showValue="1" />

  <set value="14.3" showValue="1" />

  <set value="14.2" showValue="1" />

  <set value="16.1" showValue="1" />

  <set value="20.2" showValue="1" />

  <set value="19.3" showValue="1" />

  </dataset>

- <dataset seriesName="Strongly Agree" color="347C17" showvalues="1">

  <set value="14.3" showValue="1" />

  <set value="14.2" showValue="1" />

  <set value="2.1" showValue="1" />

  <set value="16.1" showValue="1" />

  <set value="20.2" showValue="1" />

  <set value="41.9" showValue="1" />

  <set value="32.9" showValue="1" />

  <set value="36.5" showValue="1" />

  <set value="35.2" showValue="1" />

  <set value="36.4" showValue="1" />

  </dataset>

- <styles>

- <definition>

  <style name="MyFirstFontStyle" type="font" face="Verdana" size="16" color="000000" bold="1" bgColor="" />

  <style name="DataLabelFontStyle" type="font" face="Verdana" size="11" color="000000" bold="1" bgColor="" isHTML="1" />

  </definition>

- <application>

  <apply toObject="Caption" styles="MyFirstFontStyle,MyFirstShadow" />

  <apply toObject="DataLabels" styles="DataLabelFontStyle" />

  </application>

  </styles>

  </chart>

[Guest Basundhara Ghosal]

Hi,

Please refer to the sample that we are sending you as an attachment.

Hope this helps.

barchart_sample.zip

[stung]

Thanks for the sample,

But what settings should I change?

Please advise!!

[Sanjukta]

Hi,

You are welcome.

Please try changing the following settings:

1) The length of the string that is getting displayed as the datalabels is shortened using the line break " ".

2) The width of the chart is slightly increased.

3) The value for the attributes "chartLeftMargin" and "labelPadding" in the <chart> element are decreased as much possible.

For further details on point (3), please refer to the following link:

Ref.- http://www.fusioncharts.com/docs?/AttDesc/Padding.html

Also, with the help of applying 'Styles' on the 'dataLabels' object, the 'font' attribute is set to a comparatively smaller size.

Also, please refer to the XML file format that is present in the barchart sample.zip file attached with the previous post, for details on the issue.

Hope this helps.

Edited May 28, 2010 by Guest