Each axis in a chart control can include a title that describes the purpose of the axis to the users. Flex does not add titles to the chart's axes unless you explicitly set them. To add titles to the axes of a chart, you use the title property of the axis object. This is CategoryAxis or one of the NumericAxis subclasses such as DateTimeAxis, LinearAxis, or LogAxis. To set a style for the axis title, use the axisTitleStyleName property of the chart control.

The following example sets the titles of the horizontal and vertical axes (in MXML and ActionScript), and applies the styles to those titles:

<?xml version="1.0"?>
<!-- charts/AxisTitles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="setTitles()">
  <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}
     ]);

     private function setTitles():void {
        la1.title="Dollars";
     }

  ]]></mx:Script>

  <mx:Style>
     .myStyle {
        fontFamily:Verdana;
        fontSize:12;
        color:#4691E1;
        fontWeight:bold;
        fontStyle:italic;
     }
  </mx:Style>

  <mx:Panel title="Axis with title">
     <mx:ColumnChart id="myChart"
        showDataTips="true"
        axisTitleStyleName="myStyle"
        dataProvider="{expenses}"
     >
        <mx:verticalAxis>
           <mx:LinearAxis id="la1"/>
        </mx:verticalAxis>
        <mx:horizontalAxis>
           <mx:CategoryAxis title="FY 2006" 
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <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="{myChart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

You can also use embedded fonts for your axis titles. The following example embeds the font and sets the style for the vertical axis title:

<?xml version="1.0"?>
<!-- charts/AxisTitleEmbedFont.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;
     }
     
     .myEmbeddedStyle {
        fontFamily:myMyriad;
        fontSize:20;
     }
  </mx:Style>

  <mx:Panel title="Axis title with embedded font">
     <mx:ColumnChart id="column"
        showDataTips="true"
        dataProvider="{expenses}" 
        axisTitleStyleName="myEmbeddedStyle"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month" 
                title="FY 2006"
           />
        </mx:horizontalAxis>
        <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:

For information on embedding fonts, see Using embedded fonts.

You can take advantage of the fact that the chart applies the axisTitleStyleName property without explicitly specifying it, as the following example shows:

<?xml version="1.0"?>
<!-- charts/CSSAxisTitle.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>
     .axisTitles {
        color:red;
        fontWeight:bold;
        fontFamily:Arial;
        fontSize:20;
     }

     ColumnChart {
        axisTitleStyleName:axisTitles;
     }
  </mx:Style>

  <mx:Panel title="Styling Axis Titles with CSS">
     <mx:ColumnChart id="column" dataProvider="{expenses}" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month" title="FY 2006"
           />
        </mx:horizontalAxis>
        <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:

You can also apply the title style to the axis, as the following example shows:

<mx:CategoryAxis title="State" styleName="myEmbeddedStyle"/>

To change the appearance of the title on a chart, you can also use the titleRenderer property of the AxisRenderer class. This lets you specify a class that defines the appearance of the title. The class must extend UIComponent and implement the IDataRenderer and IFlexDisplayObject interfaces. Its data property will be the title used in the chart.

Typically, you extend the ChartLabel class to create a custom title renderer. In that class, you must override the createChildren() and updateDisplayList() methods. In the createChildren() method you create an instance of the TextField class that Flex uses to render the title. In the updateDisplayList() method, you set the properties of the TextField object.

The following example is a custom title renderer. It creates a gradient fill background for each of the axis titles.

// charts/MyTextRenderer.as
package {
    import mx.charts.chartClasses.ChartLabel;
    import mx.charts.*;
    import flash.display.*; 
    import flash.geom.Matrix;
    import flash.text.TextField;     
    
    public class MyTextRenderer extends ChartLabel {
    
        // The title is renderered in a TextField.
        private var myText:TextField; 
    
        public function MyTextRenderer() {
            super();            
        }       
        
        override protected function createChildren():void{ 
            super.createChildren();
            myText = new TextField();
        }
        
        override protected function updateDisplayList(w:Number, h:Number):void {
            super.updateDisplayList(w, h);
            
            // The data property provides access to the title text.
            if(data.hasOwnProperty('text')) {
                myText.text = data.text;
            } else {
                myText.text = data.toString();        
            }
            
            this.setStyle("textAlign","center");
            var g:Graphics = graphics; 
            g.clear();  
            var m:Matrix = new Matrix();
            m.createGradientBox(w+100,h,0,0,0);
            g.beginGradientFill(GradientType.LINEAR,[0xFF0000,0xFFFFFF],
                [.1,1],[0,255],m,null,null,0);
            g.drawRect(-50,0,w+100,h);
            g.endFill(); 
        }
    }
}

To use this class in your Flex application, you just point the titleRenderer property to it. This assumes that the class is in your source path. In this case, store both the MyTextRenderer.as and RendererExample.mxml files in the same directory.

The following example applies the custom title renderer to all axis titles.

<?xml version="1.0"?>
<!-- charts/RendererSample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="setupDP()">
    <mx:Script>
     <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.charts.ColumnChart; 
    
        [Bindable]
        private var ac:ArrayCollection;
        
        public function setupDP():void{
            ac =  new ArrayCollection([
              [ "Multiline\nLabel\nOK", 200000],
              [ "Label 2\nCD\nJK", 150000],
              [ "Label 3\nEF\nLM", 40000]
            ]);
        }
     ]]>
    </mx:Script>

    <mx:HBox>
        <mx:ColumnChart id="bc1" 
            axisTitleStyleName="myStyle" 
            showDataTips="true" 
            dataProvider="{ac}" 
        >
            <mx:series>
                <mx:ColumnSeries xField="0" yField="1"/>
            </mx:series>
            <mx:verticalAxis>
                <mx:LinearAxis id="va1" title="values"/>
            </mx:verticalAxis>
            <mx:horizontalAxis >
                <mx:CategoryAxis id="ha1" 
                    dataProvider="{ac}" 
                    categoryField="0" 
                    title="Labels"
                /> 
            </mx:horizontalAxis>
            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer 
                    axis="{ha1}" 
                    canDropLabels="true" 
                    titleRenderer="MyTextRenderer"
                />
            </mx:horizontalAxisRenderers>
            <mx:verticalAxisRenderers>
                <mx:AxisRenderer 
                    axis="{va1}" 
                    canDropLabels="true" 
                    titleRenderer="MyTextRenderer" 
                    verticalAxisTitleAlignment="vertical"
                />
            </mx:verticalAxisRenderers>
        </mx:ColumnChart>   
         
        <mx:Spacer width="50"/>
        
        <mx:BarChart id="bc2" 
            showDataTips="true" 
            dataProvider="{ac}" 
        >
            <mx:series>
                <mx:BarSeries xField="1" yField="0"/>
            </mx:series>
            <mx:horizontalAxis>
                <mx:LinearAxis id="ha2" title="Values"/>
            </mx:horizontalAxis>
            <mx:verticalAxis>
                <mx:CategoryAxis id="va2" 
                    dataProvider="{ac}" 
                    categoryField="0" 
                    title="Labels"
                />
            </mx:verticalAxis>
            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer 
                    axis="{ha2}" 
                    canDropLabels="false" 
                    titleRenderer="MyTextRenderer"
                />
            </mx:horizontalAxisRenderers>
            <mx:verticalAxisRenderers>
                <mx:AxisRenderer 
                    axis="{va2}" 
                    canDropLabels="true" 
                    titleRenderer="MyTextRenderer"
                /> 
            </mx:verticalAxisRenderers>          
        </mx:BarChart>
    </mx:HBox> 
        
</mx:Application>
The executing SWF file for the previous example is shown below: