You can rotate axis labels by using the labelRotation property of the AxisRenderer object. You specify a number from -90 to 90, in degrees. If you set the labelRotation property to null, Flex determines an optimal angle and renders the axis labels.

The following example shows both sets of axis labels rotated 45 degrees:

To rotate axis labels, you must embed the font in the Flex application. If you rotate the the axis labels without embedding a font, they are rendered horizontally.

The following <mx:Style> block embeds a font in the Flex application, and then applies that font to the chart control that rotates its horizontal and vertical axis labels 45 degrees:

<?xml version="1.0"?>
<!-- charts/RotateAxisLabels.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
  import mx.collections.ArrayCollection;
  [Bindable]
  public var expenses:ArrayCollection = new ArrayCollection([
     {Month: "Jan", Profit: 2000, Expenses: 1500},
     {Month: "Feb", Profit: 1000, Expenses: 200},
     {Month: "Mar", Profit: 1500, Expenses: 500}
  ]);
  ]]></mx:Script>

  <mx:Style>
     @font-face{
        src: url("../assets/MyriadWebPro.ttf");
        fontFamily: myMyriad;
     }

     ColumnChart {
        fontFamily: myMyriad;
        fontSize: 20;
     }
  </mx:Style>

  <mx:Panel title="Rotated Axis Labels">
     <mx:ColumnChart id="column" dataProvider="{expenses}" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis
                dataProvider="{expenses}"
                categoryField="Month"
                title="FY 2006"
                id="a1"
           />
        </mx:horizontalAxis>

        <mx:horizontalAxisRenderers>
           <mx:AxisRenderer labelRotation="45" axis="{a1}"/>
        </mx:horizontalAxisRenderers>
        <mx:verticalAxisRenderers>
           <mx:AxisRenderer labelRotation="45" axis="{a1}"/>
        </mx:verticalAxisRenderers>

        <mx:series>
           <mx:ColumnSeries 
                xField="Month" 
                yField="Profit"
               displayName="Profit"
           />
           <mx:ColumnSeries 
                xField="Month" 
                yField="Expenses"
               displayName="Expenses"
           />
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{column}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

To change the appearance of the axis labels, you can also use the labelRenderer property of the AxisRenderer class. This lets you specify a class that defines the appearance of the label. The class must extend UIComponent and implement the IDataRenderer and IFlexDisplayObject interfaces. Its data property will be the label used in the chart. Typically, you write an ActionScript class that extends the ChartLabel class for the label renderer.

The following example defines a custom component inline by using the <mx:Component> tag. It adds ToolTip objects to the labels along the chart's horizontal axis so that the values of the longer labels are not truncated.

<?xml version="1.0"?>
<!-- charts/LabelRendererWithToolTips.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="setupDP()" width="500" height="600">
    <mx:Script>
     <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.charts.ColumnChart; 
    
        [Bindable]
        private var ac:ArrayCollection;
        
        public function setupDP():void{
            ac =  new ArrayCollection([
              [ "Label 1 is short.", 200000],
              [ "Label 2 is a fairly long label.", 150000],
              [ "Label 3 is an extremely long label. It contains 95 characters " + 
                "and will likely be truncated.", 40000]
            ]);
        }
     ]]>
    </mx:Script>

    <mx:VBox>
        <mx:ColumnChart id="bc1" 
            showDataTips="true" 
            dataProvider="{ac}" 
        >
            <mx:series>
                <mx:ColumnSeries xField="0" yField="1"/>
            </mx:series>
            <mx:verticalAxis>
                <mx:LinearAxis id="va1"/>
            </mx:verticalAxis>
            <mx:horizontalAxis >
                <mx:CategoryAxis id="ha1" 
                    dataProvider="{ac}" 
                    categoryField="0" 
                /> 
            </mx:horizontalAxis>
            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer 
                    axis="{ha1}" 
                    canDropLabels="false" 
                >
                    <mx:labelRenderer>
                        <mx:Component>
                            <mx:Label toolTip="{this.myTip}">
                                <mx:Script><![CDATA[
                                    [Bindable]
                                    private var myTip:String;

                                    override public function set data(value:Object):void{
                                        if(value == null)
                                            return;
                                        myTip = value.text;
                                        var length:int = value.text.toString().length;
                                        if (length > 20) {
                                            text = value.text.toString().substr(0, 20) + "...";
                                        } else {
                                            text = value.text;
                                        }
                                    }
                                ]]></mx:Script>
                            </mx:Label>
                        </mx:Component>
                    </mx:labelRenderer>
                </mx:AxisRenderer>                
            </mx:horizontalAxisRenderers>
            <mx:verticalAxisRenderers>
                <mx:AxisRenderer
                    axis="{va1}" 
                    canDropLabels="false" 
                />                
            </mx:verticalAxisRenderers>
        </mx:ColumnChart>           
        <mx:Label id="l1" color="white" text="Hover over the horizontal axis's labels to see the entire title rendered as a ToolTip."/>        
    </mx:VBox>         
</mx:Application>
The executing SWF file for the previous example is shown below:

For an example of an ActionScript class that extends ChartLabel, see Adding axis titles.