mx.chart.AxisRenderer labelRotation not working - apache-flex

Question

I'm attempting to rotate the category labels on my flex chart, but the labelRotation property seems to not work. Based on examples and the livedocs, I can't seem to figure out what I'm doing wrong.
<mx:BarChart id="barchartX" left="40" right="40" bottom="40" paddingBottom="40"
dataProvider="{chartDataObj.series}" showDataTips="false"
itemClick="editItem_clickHandler(event)" includeIn="BAR" visible="true">
<mx:verticalAxis>
<mx:CategoryAxis id="vaxis" categoryField="title"
title="click here to rename this axis" />
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{vaxis}" labelRotation="45"
click="axis_clickHandler(event)"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:LinearAxis id="haxis" title="click here to rename this axis" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{haxis}" labelRotation="0"
click="axis_clickHandler(event)"/>
</mx:horizontalAxisRenderers>
<mx:series>
<mx:BarSeries labelPosition="none" yField="title" xField="value"
fills="{chartDataObj.colors}"/>
</mx:series>

Answer 1

I am including my answer to a similar question, https://stackoverflow.com/a/9129992/892191
The key to making the labelRotation work is embedding of fonts.
There is a good article on Flex 4.6 here
A simple code example would be to add a style to the mxml file,
<fx:Style>
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face{
src: local("Arial");
fontFamily: Arial;
embedAsCFF: false;
}
mx|ColumnChart {
fontFamily: Arial;
fontSize: 10;
}
</fx:Style>

Answer 2

Okay, after searching through the actual code of the AxisRenderer I came up with this:
<fx:Script>
[Embed(source='../assets/verdana.ttf',
fontName='verdanaFontMX',
mimeType='application/x-font',
embedAsCFF='false')]
private var font2:Class;
</fx:Script>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{vaxis}" labelRotation="90"
labelClass="mx.controls.Label"
fontFamily="verdanaFontMX" canStagger="false"
click="axis_clickHandler(event)"/>
</mx:verticalAxisRenderers>
When using a CategoryAxis for an MX chart in a mobile project, the category labels are rendered as Spark Labels, but the rest of the axis labels are rendered as MX Labels. The label rotation works, but a warning is thrown and the category is rendered using the device font instead. To fix this, use the MX Label class instead (labelClass="mx.controls.Label"). I know it doesn't render quickly as the Spark label, but it will render in the font you want.
Next, if you have a category label that's very long, somehow there is division by zero and the whole thing crashes. To avoid this, set canStagger="false" or canDropLabels="true". This avoids whatever measurement errors were happening. However, if the fontSize is set, and the label ends up being too large, the automatic sizing crashes again. So, I guess the easiest solution would be to keep the category labels short.
There is also the possibility of truncating the text as found here: http://help.adobe.com/en_US/flex/using/WS02f7d8d4857b1677355f601a126b41ed60e-8000.html
or, using a custom labelRenderer, but this can get very involved and can have diminishing returns on the amount of work versus the benefit to the look.