CODEWITHSUNDEEP
apache-flexcomponents
Michael Delaney
Michael Delaney

Reputation: 113

mx.chart.AxisRenderer labelRotation not working

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>

Upvotes: 1

Views: 2030

Answers (2)

prismaticorb
prismaticorb

Reputation: 905

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>

Upvotes: 1

Michael Delaney
Michael Delaney

Reputation: 113

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.

Upvotes: 0

Related Questions