The LinearAxis subclass is the simplest of the three NumericAxis subclasses. It maps numeric values evenly between minimum and maximum values along a chart axis. By default, Flex determines the minimum, maximum, and interval values from the charting data to fit all of the chart elements on the screen. You can also explicitly set specific values for these properties. The following example sets the minimum and maximum values to 40 and 50, respectively:

<?xml version="1.0"?> 
<!-- charts/LinearAxisSample.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
 
    <fx:Declarations> 
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/stocks-xml.aspx"/> 
        <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/stocks.aspx -->  
    </fx:Declarations> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <s:Panel title="LineChart control with a linear axis"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
        <mx:LineChart id="myChart" 
            dataProvider="{srv.lastResult.data.result}" 
            showDataTips="true" 
            height="300" width="400"> 
            <mx:verticalAxis> 
                <mx:LinearAxis 
                    title="linear axis" 
                    minimum="40" 
                    maximum="50" 
                    interval="1"/> 
            </mx:verticalAxis> 
 
            <mx:horizontalAxis>        
                <mx:CategoryAxis categoryField="date"/> 
            </mx:horizontalAxis> 
 
            <mx:series> 
                <mx:LineSeries 
                    yField="close" 
                    displayName="FRED close"/> 
            </mx:series> 
        </mx:LineChart> 
        <mx:Legend dataProvider="{myChart}"/> 
    </s:Panel> 
</s:Application>

The LogAxis subclass is similar to the LinearAxis subclass, but it maps values to the axis logarithmically rather than linearly. You use a LogAxis object when the data in your chart has such a wide range that clusters of data points are lost to scale. LogAxis data also cannot be rendered if it is negative. For example, if you track the stock price of a successful company since 1929, it is useful to represent the data logarithmically rather than linearly so that the chart is readable.

When you use a LogAxis object, you set a multiplier that defines the values of the labels along the axis. You set the multiplier with the interval property. Values must be even powers of 10, and must be greater than or equal to 0. A value of 10 generates labels at 1, 10, 100, and 1000. A value of 100 generates labels at 1, 100, and 10,000. The default value of the interval property is 10. The LogAxis object rounds the interval to an even power of 10, if necessary.

As with the vertical and horizontal axes, you can also set the minimum and maximum values of a LogAxis object, as the following example shows:

<?xml version="1.0"?> 
<!-- charts/LogAxisSample.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv_fe.send();srv_big.send()" 
    height="600"> 
 
     <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/stocks.aspx -->  
    <fx:Declarations> 
        <!-- View source of the following pages to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv_fe" url="http://examplesserver/chart_examples/stocks-xml.aspx?tickerSymbol=FE"/> 
        <mx:HTTPService id="srv_big" url="http://examplesserver/chart_examples/stocks-xml.aspx?tickerSymbol=BIG"/> 
    </fx:Declarations> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <s:Panel title="LineChart control with a logarithmic axis"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
        <mx:LineChart id="myChart" 
            showDataTips="true" 
            height="300" width="400"> 
            <mx:verticalAxis> 
                <mx:LogAxis title="Log axis" 
                    interval="10" 
                    minimum="1" 
                    maximum="5000"/> 
            </mx:verticalAxis> 
 
            <mx:horizontalAxis> 
               <mx:DateTimeAxis id="h1" dataUnits="days"/> 
            </mx:horizontalAxis> 
 
            <mx:series> 
                <mx:LineSeries dataProvider="{srv_fe.lastResult.data.result}" 
                    yField="close" 
                    displayName="FE close"/> 
                <mx:LineSeries dataProvider="{srv_big.lastResult.data.result}" 
                    yField="close" 
                    displayName="BIG close"/> 
            </mx:series> 
        </mx:LineChart> 
        <mx:Legend dataProvider="{myChart}"/> 
    </s:Panel> 
</s:Application>

The DateTimeAxis subclass maps time-based values to a chart axis. The DateTimeAxis subclass calculates the minimum and maximum values to align with logical date and time units (for example, the nearest hour or the nearest week). The DateTimeAxis subclass also selects a time unit for the interval so that the chart renders a reasonable number of labels.

The dataUnits property of the DateTimeAxis subclass specifies how Flex should interpret the Date objects. Flex determines this property by default, but you can override it. To display data in terms of days, set the dataUnits property to days, as the following example shows:

 <mx:DateTimeAxis dataUnits="days"/>

Valid values for the dataUnits property are milliseconds, seconds, minutes, hours, days, weeks, months, and years.

When assigning appropriate label units, a DateTimeAxis object does not assign any unit smaller than the units represented by the data. If the dataUnits property is set to days, the chart does not render labels for every hour, no matter what the minimum or maximum range is. To achieve this, you must set the value explicitly.

When using the DateTimeAxis class, you can filter out units when you set the dataUnits property to days. This lets you create a chart that shows a "work week" or some other configuration that omits certain days of the week. For more information, see Omitting days on a DateTimeAxis object.

Some series use the value of the dataUnits property to affect their rendering. Specifically, most columnar series (such as Column, Bar, Candlestick, and HLOC controls) use the value of dataUnits to determine how wide to render their columns. If, for example, the ColumnChart control's horizontal axis has its labels set to weeks and dataUnits set to days, the ColumnChart control renders each column at one-seventh the distance between labels.

Data points on the DateTimeAxis object support the Date, String, and Number data types.

• Date: If the value of the data point is an instance of a Date object, it already represents an absolute date-time value and needs no interpretation. To pass a Date object as a data value, use the parseFunction property of the DateTimeAxis subclass. The parseFunction property returns a Date object. For more information, see Using the parseFunction property.

• String: You can use any format that the Date.parse() method supports. The supported formats are:

  • MM/YYYY (for example, 02/2005)

  • Day Month DD Hours:Minutes:Seconds GMT Year (for example, Tue Feb 1 12:00:00 GMT-0800 2005)

  • Day Month DD YYYY Hours:Minutes:Seconds AM|PM (for example, Tue Feb 1 2005 12:00:00 AM)

  • Day Month DD YYYY (for example, Tue Feb 1 2005)

  • MM/DD/YYYY (for example, 02/01/2005)

  You can also write custom logic that uses the parseFunction property of the DateTimeAxis to take any data type and return a Date. For more information, see Using the parseFunction property.

• Number: If you use a number, it is assumed to be the number of milliseconds since Midnight, 1/1/1970; for example, 543387600000. To get this value on an existing Date object, use the Date object's getTime() method.

The following example specifies that the dates are displayed in units of days:

<?xml version="1.0"?> 
<!-- charts/DateTimeAxisSample.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    height="600"> 
    
  <fx:Script><![CDATA[ 
     import mx.collections.ArrayCollection 
     [Bindable] 
     public var deck:ArrayCollection = new ArrayCollection([ 
        {date:"08/01/2005", close:42.71}, 
        {date:"08/02/2005", close:42.99}, 
        {date:"08/03/2005", close:42.65} 
     ]); 
  ]]></fx:Script> 
  
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Sample DateTimeAxis"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:LineChart id="myChart" 
        dataProvider="{deck}" 
        showDataTips="true"> 
        <mx:horizontalAxis> 
           <mx:DateTimeAxis dataUnits="days"/> 
        </mx:horizontalAxis> 
        <mx:series> 
           <mx:LineSeries 
                yField="close" 
                xField="date" 
                displayName="DECK"/> 
        </mx:series> 
     </mx:LineChart> 
     <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

You use the parseFunction property of the DateTimeAxis object to specify a method that customizes the value of the data points. With this property, you specify a method that accepts a value and returns a Date object. The Date object is then used in the DateTimeAxis object of the chart. This lets you provide customizable input strings and convert them to Date objects, which Flex can then interpret for use in the DateTimeAxis.

The parsing method specified by the parseFunction property is called every time a value for the DateTimeAxis must be calculated. It is called each time a data point is encountered when the user interacts with the chart. Consequently, Flex might call the parsing method often, which can degrade an application's performance. Therefore, you should try to keep the amount of code in the parsing method to a minimum.

Flex passes only one parameter to the parsing method. This parameter is the value of the data point that you specified for the series. Typically, it is a String representing some form of a date. You cannot override this parameter or add additional parameters.

The following example shows a parsing method that creates a Date object from String values in the data provider that match the "YYYY, MM, DD" pattern:

<?xml version="1.0"?> 
<!-- charts/DateTimeAxisParseFunction.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    height="600"> 
 
  <fx:Script> 
    <![CDATA[ 
     import mx.collections.ArrayCollection; 
     [Bindable] 
     public var ABC:ArrayCollection = new ArrayCollection([ 
        {date:"2005, 8, 1", close:42.71}, 
        {date:"2005, 8, 2", close:42.99}, 
        {date:"2005, 8, 3", close:44} 
     ]); 
 
     public function myParseFunction(s:String):Date { 
        // Get an array of Strings from the 
        // comma-separated String passed in. 
        var a:Array = s.split(","); 
 
        // Trace out year, month, and day values. 
        trace("y:" + a[0]); 
        trace("m:" + a[1]); 
        trace("d:" + a[2]); 
 
        // To create a Date object, you pass "YYYY,MM,DD", 
        // where MM is zero-based, to the Date() constructor. 
        var newDate:Date = new Date(a[0],a[1]-1,a[2]); 
        return newDate; 
     } 
    ]]> 
  </fx:Script> 
  
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="DateTimeAxis with parseFunction"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
    <mx:LineChart id="myChart" 
        dataProvider="{ABC}" 
        showDataTips="true"> 
     <mx:horizontalAxis> 
        <mx:DateTimeAxis 
            dataUnits="days" 
            parseFunction="myParseFunction"/> 
     </mx:horizontalAxis> 
     <mx:series> 
        <mx:LineSeries 
            yField="close" 
            xField="date" 
            displayName="ABC"/> 
     </mx:series> 
    </mx:LineChart> 
    <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

When assigning the units to display along the axis, the DateTimeAxis object uses the largest unit allowed to render a reasonable number of labels. The following table describes the default label format and the minimum range for each unit type:

You can restrict the list of valid units for a particular chart instance to a subset that makes sense for the use case. As with a LinearAxis object, you can specify minimum, maximum, and interval values for a DateTimeAxis object.

When rounding off values, the DateTimeAxis object determines if values passed to it should be displayed in the local time zone or UTC. You can set the displayLocalTime property to true to instruct the DateTimeAxis object to treat values as local time values. The default value is false.

To change the values of the labels, use the labelFunction property of the DateTimeAxis object. This property is inherited from the NumericAxis class and is described in Defining axis labels.

You can define the range of values that any axis uses by setting the values of the minimum and maximum properties on that axis. For the DateTimeAxis class, however, you must use Date objects and not Numbers or Strings to define that range. To do this, you create bindable Date objects and bind the values of the minimum and maximum properties to those objects.

When creating Date objects, remember that the month parameter in the constructor is zero-based. The following example sets the minimum date for the axis to the first day of December 2006, and the maximum date for the axis to the first day of February 2007. The result is that Flex excludes the first and last data points in the ArrayCollection because those dates fall outside of the range set on the axis:

<?xml version="1.0"?> 
<!-- charts/DateTimeAxisRange.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    height="600"> 
    
  <fx:Script><![CDATA[ 
     import mx.collections.ArrayCollection; 
 
     // To create a Date object, you pass "YYYY,MM,DD", 
     // where MM is zero-based, to the Date() constructor. 
     [Bindable] 
     public var minDate:Date = new Date(2006, 11, 1); 
     [Bindable] 
     public var maxDate:Date = new Date(2007, 1, 1); 
 
     [Bindable] public var myData:ArrayCollection = new 
     ArrayCollection([ 
        {date: "11/03/2006", amt: 12345}, 
        {date: "12/02/2006", amt: 54331}, 
        {date: "1/03/2007", amt: 34343}, 
        {date: "2/05/2007", amt: 40299} 
     ]); 
 
  ]]></fx:Script> 
  
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="DateTimeAxis with range"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:ColumnChart id="myChart" 
        dataProvider="{myData}" 
        showDataTips="true"> 
        <mx:horizontalAxis> 
           <mx:DateTimeAxis 
                dataUnits="months" 
                minimum="{minDate}" 
                maximum="{maxDate}"/> 
        </mx:horizontalAxis> 
        <mx:series> 
           <mx:ColumnSeries 
                yField="amt" 
                xField="date" 
                displayName="My Data"/> 
        </mx:series> 
     </mx:ColumnChart> 
     <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

You can also represent the range of dates in MXML by using the following syntax:

 <mx:horizontalAxis> 
 	<mx:DateTimeAxis dataUnits="months"> 
 		<mx:minimum> 
 			<mx:Date fullYear="2005" month="11" date="1"/> 
 		</mx:minimum> 
 		<mx:maximum> 
 			<mx:Date fullYear="2007" month="1" date="1"/> 
 		</mx:maximum> 
 	</mx:DateTimeAxis> 
 </mx:horizontalAxis>

You can exclude particular days or ranges of days from a chart. This lets you create charts that show only the days of the work week or that exclude other days of the week for other reasons.

For example, if you create a LineChart control that shows a stock price over the course of an entire month, the source data typically includes pricing data only for Monday through Friday. Values for the weekend days are typically not in the data. So, the chart control extrapolates values by extending the line through the weekend days on the chart, which makes it appear as though there is data for those days. If you disable the weekend days, the chart control removes those days from the chart and the line draws only the days that are not disabled. There is no breakage or other indicator that there are omitted days.

To disable days of the week or ranges of days in your charts, you must set the dataUnits property of the DateTimeAxis object to days. You then use the disabledDays or disabledRanges properties of the DateTimeAxis object.

The value of the disabledDays property of DateTimeAxis is an Array of numbers. These numbers correspond to days of the week, with 0 being Sunday, 1 being Monday, and so on, up until 6 being Saturday.

The following example excludes Saturdays and Sundays from the chart by setting the value of the disabledDays property to an Array that contains 0 and 6:

<?xml version="1.0"?> 
<!-- charts/WorkWeekAxis.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
 
    <fx:Declarations> 
        <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/stocks.aspx -->  
        <!-- View source of the following pages to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/stocks-xml.aspx"/> 
    </fx:Declarations> 
 
  <fx:Script><![CDATA[ 
     /* Create an Array that specifies which days to exclude. 
        0 is Sunday and 6 is Saturday. */ 
     [Bindable] 
     private var offDays:Array = [0,6]; 
     
  ]]></fx:Script> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="WorkWeekAxis Example"> 
     <s:layout> 
         <s:HorizontalLayout/> 
     </s:layout> 
     <mx:LineChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true"> 
        <mx:horizontalAxis> 
           <mx:DateTimeAxis dataUnits="days" 
            disabledDays="{offDays}"/> 
        </mx:horizontalAxis> 
        <mx:series> 
           <mx:LineSeries 
                yField="close" xField="date" 
                displayName="FRED"/> 
        </mx:series> 
     </mx:LineChart> 
     <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

To exclude a range of dates from the DateTimeAxis object, you use the disabledRanges property. This property takes an of objects. Each object specifies two dates: a rangeStart and rangeEnd property. The following example excludes August 13, and then the range of days between August 27 and August 31:

<?xml version="1.0"?> 
<!-- charts/DisabledDateRanges.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="init()" 
    height="600"> 
  
  <fx:Script><![CDATA[ 
     import mx.collections.ArrayCollection 
     [Bindable] 
     public var deck:ArrayCollection = new ArrayCollection([ 
        {date:"08/01/2007", close:42}, 
        {date:"08/02/2007", close:43}, 
        {date:"08/03/2007", close:43}, 
        {date:"08/06/2007", close:42}, 
        {date:"08/07/2007", close:38}, 
        {date:"08/08/2007", close:37}, 
        {date:"08/09/2007", close:39}, 
        {date:"08/10/2007", close:41}, 
        {date:"08/13/2007", close:45}, 
        {date:"08/14/2007", close:47}, 
        {date:"08/15/2007", close:48}, 
        {date:"08/16/2007", close:42}, 
        {date:"08/17/2007", close:43}, 
        {date:"08/20/2007", close:45}, 
        {date:"08/21/2007", close:50}, 
        {date:"08/22/2007", close:51}, 
        {date:"08/23/2007", close:55}, 
        {date:"08/24/2007", close:51}, 
        {date:"08/27/2007", close:49}, 
        {date:"08/28/2007", close:51}, 
        {date:"08/29/2007", close:50}, 
        {date:"08/30/2007", close:49}, 
        {date:"08/31/2007", close:54} 
     ]); 
     
     private function myParseFunction(s:String):Date { 
        var a:Array = s.split("/"); 
        var newDate:Date = new Date(a[2],a[0]-1,a[1]); 
        return newDate; 
     }    
     private var d1:Date, d2:Date, d3:Date; 
 
     [Bindable] 
     private var offRanges:Array = new Array ([]); 
 
     private function init():void { 
        d1 = new Date("08/13/2007"); 
        d2 = new Date("08/27/2007"); 
        d3 = new Date("08/31/2007"); 
        offRanges = [ {rangeStart:d1, rangeEnd:d1},{rangeStart:d2, rangeEnd:d3} ]; 
     }     
     
     private var series1:LineSeries; 
 
  ]]></fx:Script> 
  
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Disabled Date Ranges"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:LineChart id="myChart" 
        dataProvider="{deck}" 
        showDataTips="true"> 
        <mx:horizontalAxis> 
           <mx:DateTimeAxis 
            dataUnits="days" 
            parseFunction="myParseFunction" 
            disabledRanges="{offRanges}"/> 
        </mx:horizontalAxis> 
        
        <mx:series> 
           <mx:LineSeries id="mySeries" 
                yField="close" 
                xField="date" 
                displayName="DECK"/> 
        </mx:series> 
    </mx:LineChart> 
    <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

The following example expands on the previous example, except it adds a DateChooser control. You can select days on the DateChooser that are then removed from the chart.

<?xml version="1.0"?> 
<!-- charts/DisabledDateRangesWithDateChooser.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="init()" 
    height="600"> 
  
  <fx:Script><![CDATA[ 
     import mx.collections.ArrayCollection; 
 
     [Bindable] 
     public var deck:ArrayCollection = new ArrayCollection([ 
        {date:"08/01/2007", close:42}, 
        {date:"08/02/2007", close:43}, 
        {date:"08/03/2007", close:43}, 
        {date:"08/06/2007", close:42}, 
        {date:"08/07/2007", close:38}, 
        {date:"08/08/2007", close:37}, 
        {date:"08/09/2007", close:39}, 
        {date:"08/10/2007", close:41}, 
        {date:"08/13/2007", close:45}, 
        {date:"08/14/2007", close:47}, 
        {date:"08/15/2007", close:48}, 
        {date:"08/16/2007", close:42}, 
        {date:"08/17/2007", close:43}, 
        {date:"08/20/2007", close:45}, 
        {date:"08/21/2007", close:50}, 
        {date:"08/22/2007", close:51}, 
        {date:"08/23/2007", close:55}, 
        {date:"08/24/2007", close:51}, 
        {date:"08/27/2007", close:49}, 
        {date:"08/28/2007", close:51}, 
        {date:"08/29/2007", close:50}, 
        {date:"08/30/2007", close:49}, 
        {date:"08/31/2007", close:54} 
     ]); 
 
     // Define weekend days to be removed from chart. 
     [Bindable] 
     private var offDays:Array = [0,6];     
     
     [Bindable] 
     private var dateChooserDisabledRanges:Array = []; 
     
     private function init():void { 
        // Limit selectable range to August of 2007 on DateChooser. 
        dateChooserDisabledRanges = [ 
            {rangeEnd: new Date(2007, 6, 31)}, 
            {rangeStart: new Date(2007, 8, 1)} 
        ]; 
        // Disable weekend days on DateChooser. 
        dc1.disabledDays = [0, 6]; 
     } 
     
     [Bindable] 
     private var offRanges:Array = new Array([]); 
 
     private function onDateChange(e:Event):void { 
        // Get the start and end date of the range. 
        var startDate:Date = e.currentTarget.selectedRanges[0].rangeStart; 
        var endDate:Date = e.currentTarget.selectedRanges[0].rangeEnd; 
        var d:Object = {rangeStart:startDate, rangeEnd:endDate};        
        
        // Add object to list of ranges to disable on chart. 
        offRanges.push(d); 
                        
        // Refresh the chart series with the new offRanges. 
        var mySeries:Array = [];       
        mySeries.push(series1); 
        myChart.series = mySeries;        
        // Show the current ranges. 
        ta1.text = "";        
        for (var i:int = 0; i < offRanges.length; i++) { 
            for (var s:String in offRanges[i]) { 
                ta1.text += s + ":" + offRanges[i][s] + "\n"; 
            } 
        }        
     }     
     private function clearAllDisabledDates():void { 
        offRanges = []; 
        dc1.selectedDate = null; 
        ta1.text = ""; 
     } 
     
  ]]></fx:Script> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Disabled date ranges"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    <mx:LineChart id="myChart" 
       dataProvider="{deck}" 
       showDataTips="true"> 
       <mx:horizontalAxis> 
          <mx:DateTimeAxis 
             id="dtAxis" 
             dataUnits="days" 
             disabledDays="{offDays}" 
             disabledRanges="{offRanges}"/> 
       </mx:horizontalAxis> 
 
       <mx:verticalAxis> 
           <mx:LinearAxis minimum="30" maximum="60"/> 
       </mx:verticalAxis> 
 
       <mx:series> 
          <mx:LineSeries id="series1" 
               yField="close" 
               xField="date" 
               displayName="DECK"/> 
       </mx:series> 
    </mx:LineChart> 
    <mx:DateChooser id="dc1" 
        showToday="false" 
        click="onDateChange(event)" 
        displayedMonth="7" 
        displayedYear="2007" 
        disabledRanges="{dateChooserDisabledRanges}"/> 
    <mx:Legend dataProvider="{myChart}"/> 
    
    <s:Button id="b1" label="Refresh" click="clearAllDisabledDates()"/> 
    <s:TextArea id="ta1" width="600" height="400"/> 
  </s:Panel> 
</s:Application>

You can disable labels by setting the value of the showLabels property to false on the AxisRenderer object, as the following example shows:

<?xml version="1.0"?> 
<!-- charts/DisabledAxisLabels.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
     
    <fx:Declarations> 
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
         <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> 
         <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <s:Panel title="Disabled Axis Labels"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
        <mx:ColumnChart id="column" 
            dataProvider="{srv.lastResult.data.result}" 
            showDataTips="true"> 
            <mx:horizontalAxis> 
                <mx:CategoryAxis id="a1" categoryField="month"/> 
            </mx:horizontalAxis> 
 
            <mx:horizontalAxisRenderers> 
                <mx:AxisRenderer 
                    axis="{a1}"                 
                    showLabels="false"/> 
            </mx:horizontalAxisRenderers> 
 
            <mx:verticalAxisRenderers> 
                <mx:AxisRenderer axis="{a1}" showLabels="false"/> 
            </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}"/> 
    </s:Panel> 
</s:Application>

Note that any time you want to use an AxisRenderer, you must explicitly set the axis to which it is applied with the renderer's axis property.

You can customize the value of axis labels by using the labelFunction callback function of the axis. The function specified in labelFunction returns a String, Number, or Date object that Flex displays as the axis label.

The callback function signature for a NumericAxis object (including the DateTimeAxis, LinearAxis, and LogAxis classes) is:

 function_name(labelValue:Object, previousLabelValue:Object, axis:IAxis):return_type

The callback function signature for a CategoryAxis object is:

 function_name(labelValue:Object, previousLabelValue:Object, axis:axis_type, labelItem:Object):return_type

The following table describes the parameters of the callback function:

return "$" + labelItem.Profit;

When you use the labelFunction, you must be sure to import the class of the axis or the entire charts package; for example:

 import mx.charts.*;

The following example defines a labelFunction for the horizontal CategoryAxis object. In that function, Flex appends '10 to the axis labels, and displays the labels as Jan '10, Feb '10, and Mar '10. For the vertical axis, this example specifies that it is a LinearAxis, and formats the values to include a dollar sign and a thousands separator (by setting the useGrouping property to true on the NumberFormatter). The NumberFormatter also removes decimal values by setting the fractionalDigits property to 0. The return types of the label formatting functions are Strings.

<?xml version="1.0"?> 
<!-- charts/CustomLabelFunction.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
 
    <fx:Declarations> 
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
         <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> 
         <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
         <s:NumberFormatter id="numForm" useGrouping="true" fractionalDigits="0"/>  
    </fx:Declarations> 
 
  <fx:Script><![CDATA[ 
    import mx.charts.*; 
 
    // This method customizes the values of the axis labels. 
    // This signature (with 4 arguments) is for a CategoryAxis. 
    public function defineLabel(cat:Object, 
                                    pcat:Object, 
                                    ax:CategoryAxis, 
                                    labelItem:Object):String 
    { 
        // Show contents of the labelItem: 
        for (var s:String in labelItem) { 
            trace(s + ":" + labelItem[s]); 
        } 
 
        // Return the customized categoryField value: 
        return cat + " '10"; 
 
        // Note that if you did not specify a categoryField, 
        // cat would refer to the entire object and not the 
        // value of a single field. You could then access 
        // fields by using cat.field_name. 
    } 
 
    // For a NumericAxis, you do not use the labelItem argument. 
    // This example uses a NumberFormatter to add a thousands 
    // separator (by setting useGrouping to true) and removes decimal values 
    // (by setting fractionalDigits to 0). 
    public function defineVerticalLabel( 
                                        cat:Object, 
                                        pcat:Object, 
                                        ax:LinearAxis):String 
    { 
        return "$" + numForm.format(cat); 
    } 
 
  ]]></fx:Script> 
  
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Custom Label Function"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:ColumnChart id="column" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true"> 
        <mx:horizontalAxis> 
           <mx:CategoryAxis 
                categoryField="month" 
                title="Expenses" 
                labelFunction="defineLabel"/> 
        </mx:horizontalAxis> 
 
        <mx:verticalAxis> 
            <mx:LinearAxis title="Income" 
                minimum="0" maximum="2500" 
                labelFunction="defineVerticalLabel"/> 
        </mx:verticalAxis> 
 
        <mx:series> 
           <mx:ColumnSeries 
                xField="month" 
                yField="profit" 
                displayName="Profit"/> 
           <mx:ColumnSeries 
                xField="month" 
                yField="expenses" 
                displayName="Expenses"/> 
        </mx:series> 
     </mx:ColumnChart> 
  </s:Panel> 
</s:Application>

In the previous example, if you use a CategoryAxis but do not specify the value of the categoryField property on the axis, the label format function receives an object rather than a value for the first argument. In that case, you must drill down into the object to return a formatted String.

You can also customize labels by using the labelFunction property of the AxisRenderer class. This lets you control the labels if you use multiple axes. The callback function signature for the AxisRenderer's label function is:

 function_name(axisRenderer:IAxisRenderer, label:String):String

Because this particular callback function takes an argument of type IAxisRenderer, you must import that class when you use this function:

 import mx.charts.chartClasses.IAxisRenderer;

The following example specifies the value of the labelFunction property for one of the vertical axis renderers. The resulting function, CMstoInches(), converts centimeters to inches for the axis' labels.

<?xml version="1.0"?> 
<!-- charts/CustomLabelsOnAxisRenderer.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    height="600">  
    
    <fx:Script>  
    <![CDATA[ 
        import spark.formatters.NumberFormatter; 
        import mx.charts.chartClasses.IAxisRenderer;   
        import mx.collections.ArrayCollection;  
        
        private function CMstoInches(ar:IAxisRenderer, strCMs:String):String { 
            var n:NumberFormatter = new NumberFormatter(); 
            // Set precision to 1 decimal place: 
            n.fractionalDigits = 1; 
            return n.format((Number(strCMs) * 0.393700787).toString()); 
        } 
        
        [Bindable] 
        private var SampleHeightData:ArrayCollection = new ArrayCollection([ 
            { Age: "Birth", height: 53}, 
            { Age: "3", height: 57 }, 
            { Age: "6", height: 64 }, 
            { Age: "9", height: 70 }, 
            { Age: "12", height: 82 }, 
            { Age: "15", height: 88 } 
        ]); 
            
        [Bindable] 
        private var HeightData:ArrayCollection = new ArrayCollection([ 
            { Age: "Birth", 5: 52, 10: 53, 25:54, 50:58, 75:60, 90:62, 95:63 }, 
            { Age: "3", 5: 56, 10: 57, 25:58, 50:62, 75:64, 90:66, 95:67 }, 
            { Age: "6", 5: 62, 10: 63, 25:64, 50:68, 75:70, 90:72, 95:73 }, 
            { Age: "9", 5: 66, 10: 67, 25:68, 50:72, 75:74, 90:76, 95:77 }, 
            { Age: "12", 5: 70, 10: 71, 25:72, 50:76, 75:80, 90:82, 95:83 }, 
            { Age: "15", 5: 74, 10: 75, 25:76, 50:80, 75:84, 90:86, 95:87 } 
        ]); 
    ]]> 
    </fx:Script> 
 
    <fx:Declarations> 
        <mx:SolidColorStroke id="s1" weight="1"  /> 
    </fx:Declarations> 
     
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <s:Panel title="Multiple Axis Example, Boys: Age - Height percentiles" 
        height="100%" width="100%">          
        <s:layout> 
            <s:HorizontalLayout/> 
        </s:layout> 
        <mx:ColumnChart id="linechart" height="100%" width="100%" 
            paddingLeft="5" 
            paddingRight="5" 
            showDataTips="true" 
            dataProvider="{HeightData}"> 
 
            <mx:seriesFilters> 
                <fx:Array/> 
            </mx:seriesFilters> 
            <mx:backgroundElements> 
                <mx:GridLines gridDirection="both"/> 
            </mx:backgroundElements>    
            <mx:horizontalAxis> 
                <mx:CategoryAxis id="h1" 
                    categoryField="Age" 
                    title="Age in Months" 
                    ticksBetweenLabels="false"/> 
            </mx:horizontalAxis> 
 
            <mx:verticalAxis> 
                <mx:LinearAxis id="v1" 
                    title="Height" 
                    baseAtZero="false"/> 
            </mx:verticalAxis> 
 
            <mx:verticalAxisRenderers>                
                <mx:AxisRenderer 
                    axis="{v1}" 
                    placement="right"/> 
                <mx:AxisRenderer 
                    axis="{v1}" 
                    placement="right" 
                    labelFunction="CMstoInches" 
                    highlightElements="true"/> 
            </mx:verticalAxisRenderers> 
 
            <mx:horizontalAxisRenderers> 
                <mx:AxisRenderer axis="{h1}" placement="bottom"/> 
                <mx:AxisRenderer axis="{h1}" placement="top"/> 
            </mx:horizontalAxisRenderers> 
 
            <mx:series> 
                <mx:LineSeries yField="5"  form="curve" displayName="5%"/> 
                <mx:LineSeries yField="10" form="curve" displayName="10%"/> 
                <mx:LineSeries yField="25" form="curve" displayName="25%"/> 
                <mx:LineSeries yField="50" form="curve" displayName="50%"/> 
                <mx:LineSeries yField="75" form="curve" displayName="75%"/> 
                <mx:LineSeries yField="90" form="curve" displayName="90%"/> 
                <mx:LineSeries yField="95" form="curve" displayName="95%"/> 
                <mx:ColumnSeries displayName="Height of Child X" 
                    dataProvider="{SampleHeightData}" 
                    yField="height" 
                    fills="{[0xCC6600]}"/> 
            </mx:series> 
        </mx:ColumnChart> 
        <mx:Legend dataProvider="{linechart}"/> 
    </s:Panel> 
</s:Application>

Another way to customize the labels on an axis is to set a custom data provider for the labels. This can be done if you are using the CategoryAxis and not the NumericAxis class for the axis values. For more information, see About the CategoryAxis class.

For the PieChart control, you can customize labels with the label function defined on the PieSeries class. For more information, see Using data labels with PieChart controls.

Flex determines the minimum and maximum values along an axis and sets the interval based on the settings of the NumericAxis object. You can override the values that Flex calculates. By changing the range of the data displayed in the chart, you also change the range of the tick marks.

The following table describes the properties of the axis that define the ranges along the axes:

The following example defines the range of the y-axis:

<?xml version="1.0"?> 
<!-- charts/LinearAxisSample.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
 
    <fx:Declarations> 
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/stocks-xml.aspx"/> 
        <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/stocks.aspx -->  
    </fx:Declarations> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <s:Panel title="LineChart control with a linear axis"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
        <mx:LineChart id="myChart" 
            dataProvider="{srv.lastResult.data.result}" 
            showDataTips="true" 
            height="300" width="400"> 
            <mx:verticalAxis> 
                <mx:LinearAxis 
                    title="linear axis" 
                    minimum="40" 
                    maximum="50" 
                    interval="1"/> 
            </mx:verticalAxis> 
 
            <mx:horizontalAxis>        
                <mx:CategoryAxis categoryField="date"/> 
            </mx:horizontalAxis> 
 
            <mx:series> 
                <mx:LineSeries 
                    yField="close" 
                    displayName="FRED close"/> 
            </mx:series> 
        </mx:LineChart> 
        <mx:Legend dataProvider="{myChart}"/> 
    </s:Panel> 
</s:Application>

In this example, the minimum value displayed along the y‑axis is 10, the maximum value is 100, and the interval is 10. Therefore, the label text is 10, 20, 30, 40, and so on.

To set the minimum and maximum values on a DateTimeAxis, you must use Date objects rather than Strings or Numbers in the axis's tag. For more information, see Setting minimum and maximum values on a DateTimeAxis.

For information about setting the length and location of tick marks, see Formatting tick marks.

By default, BarSeries, ColumnSeries, and PieSeries objects do not display data labels. To enable data labels on BarSeries and ColumnSeries objects, set the value of the labelPosition property to inside or outside. To enabled data labels on PieSeries, set the value of the labelPosition property to inside, outside, callout, or insideWithCallout.

The default value of the labelPosition property is none.

Because labelPosition property is a style property, you can set it either inline in the series' tag or by using the setStyle() method, as the following example shows:

 mySeries.setStyle("labelPosition", "outside");

The contents of the data label are determined by several factors, in order of precedence:

• labelField—Specifies a field in the data provider that sets the contents of the data label. This overrides any method specified by the labelFunction property.

• labelFunction—Specifies a method that takes several arguments and returns a String that the chart series uses for the data label's contents. For more information, see Customizing data label values.

• Default—If neither the labelField nor the labelFunction are specified, the default content of the data label is the value that the series uses to draw the chart element. This is the xField value for a ColumnSeries and the yField value for a BarSeries. For a PieSeries, the default content of the data labels is the value of the field property.

Setting the labelPosition property to inside restricts the amount of styling you can perform on the data labels. If the data labels are inside the chart elements (for example, inside the column in a ColumnSeries), their size is restricted by the available space within that element. A data label cannot be bigger than the chart element that contains it. If you try to set a data label to be larger than its underlying chart element, Flex scales and possibly truncates the contents of the data label. As a result, you should usually set the value of the labelPosition property to outside. For information about styling your data labels, see Styling data labels.

For 100%, stacked, and overlaid charts, the values of the series's labelPosition property can only be inside. If you set the labelPosition property to outside for these types of bar and column series, the value is ignored and the labels are rendered as if the labelPosition was inside.

If you set the labelPosition property to inside, you cannot rotate data labels.

You can style the data labels so that their appearance fits into the style of your application. You can apply the following styles to data labels:

• fontFamily

• fontSize

• fontStyle

• fontWeight

• labelAlign (when the labelPosition property is set to inside only)

• labelPosition

• labelSizeLimit

You can apply these styles by using type or class selectors in CSS or by using the setStyle() method. You can also set these properties inline in the series's MXML tag.

The following example shows how to use CSS class selectors to set the labelPosition and other properties that affect the appearance of data labels in a chart:

<?xml version="1.0"?> 
<!-- charts/StylingDataLabels.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
 
    <fx:Declarations> 
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> 
        <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
      <!-- Style properties on series that affect data labels: 
        fontFamily; fontSize; fontStyle; fontWeight; 
        labelPosition; labelRotation; labelSizeLimit --> 
       <fx:Style> 
         .incomeSeries { 
             fontSize:9; 
             fontWeight:bold; 
             labelPosition:inside; 
             labelAlign:top; 
         } 
     
         .expensesSeries { 
             fontSize:8; 
             labelPosition:inside; 
             labelAlign:middle; 
         } 
     
       </fx:Style>  
       
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
       <s:Panel title="Column Chart"> 
             <s:layout> 
                 <s:HorizontalLayout/> 
             </s:layout> 
          <mx:ColumnChart id="myChart" 
             dataProvider="{srv.lastResult.data.result}" 
             showDataTips="true"> 
             <mx:horizontalAxis> 
                <mx:CategoryAxis categoryField="month"/> 
             </mx:horizontalAxis> 
             
             <mx:verticalAxis> 
                 <mx:LinearAxis minimum="0" maximum="2500"/> 
             </mx:verticalAxis> 
             
             <mx:series> 
                <mx:ColumnSeries 
                     xField="month" 
                     yField="profit" 
                     displayName="Profit" 
                     styleName="incomeSeries"/> 
                <mx:ColumnSeries xField="month" yField="expenses" 
                     displayName="Expenses" styleName="expensesSeries"/> 
             </mx:series> 
          </mx:ColumnChart> 
          <mx:Legend dataProvider="{myChart}"/>          
       </s:Panel> 
</s:Application>

Labels are scaled and possibly truncated if they are too big for the area. Labels will never overlap each other or other chart elements.

For PieSeries objects, you can also specify the gap and stroke of callout lines that associate a data label with a particular wedge in the pie. For more information, see Using data labels with PieChart controls.

<?xml version="1.0"?> 
<!-- charts/RotatingDataLabels.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
 
    <fx:Declarations> 
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> 
        <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
    <fx:Style> 
        @font-face{ 
            src: url("../assets/MyriadWebPro.ttf"); 
            fontFamily: myMyriad; 
            embedAsCFF: false; 
        } 
 
        @namespace mx "library://ns.adobe.com/flex/mx"; 
 
        mx|ColumnSeries { 
            labelPosition:outside; 
            labelRotation:45; 
        }    
        mx|ColumnChart { 
            fontFamily: myMyriad;    
        } 
    </fx:Style>  
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <s:Panel title="Rotating Data Labels in a Column Chart"> 
         <s:layout> 
             <s:VerticalLayout/> 
         </s:layout> 
        <mx:ColumnChart id="myChart" 
            dataProvider="{srv.lastResult.data.result}" 
            showDataTips="true"> 
            
            <mx:horizontalAxis> 
                <mx:CategoryAxis id="a1" categoryField="month"/> 
            </mx:horizontalAxis> 
 
            <mx:verticalAxis> 
                <mx:LinearAxis id="a2" minimum="0" maximum="2500"/> 
            </mx:verticalAxis> 
 
            <mx:series> 
                <mx:ColumnSeries displayName="Profit" 
                    xField="month" 
                    yField="profit"/> 
                <mx:ColumnSeries displayName="Expenses" 
                    xField="month" 
                    yField="expenses"/> 
            </mx:series> 
        </mx:ColumnChart> 
    </s:Panel> 
</s:Application>

You can customize the value of your data labels. For example, you can prepend a dollar sign ($) or apply numeric formatters to the data labels to make your chart more readable. You can change the value of the data label altogther if you want.

To customize the contents of a data label, you use the labelFunction property of the series to specify a callback function. The function specified in labelFunction returns a String that Flex displays as the data label. Flex calls this callback function for each chart element in the series when the data labels are first rendered, and calls this method any time the labels are rendered again (for example, if the data changes).

The exact signature of the custom label callback function depends on the series that you are using it with. For BarSeries and ColumnSeries objects, the function takes two arguments (see Customizing data labels for ColumnSeries and BarSeries objects); for PieSeries objects, the function takes four arguments (see Customizing data labels for PieSeries objects).

To make the information in the DataTip more understandable to users, you can define the series of your chart with names that are easily understood. Adobe^® Flash^® Player or Adobe^® AIR™ displays this name in the DataTip, as the following image shows:

The following example names the data series by using the displayName property of the series:

<?xml version="1.0"?> 
<!-- charts/DataTipsDisplayName.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
 
    <fx:Declarations> 
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
         <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> 
         <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Bar Chart"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:BarChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true"> 
        <mx:verticalAxis> 
           <mx:CategoryAxis categoryField="month"/> 
        </mx:verticalAxis> 
        <mx:series> 
           <mx:BarSeries 
                yField="month" 
                xField="profit" 
                displayName="--==Profit==--"/> 
           <mx:BarSeries 
                yField="month" 
                xField="expenses" 
                displayName="--==Expenses==--"/> 
        </mx:series> 
     </mx:BarChart> 
     <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

You can also name the axis to display labels in the DataTip by using the displayName property. When the axis has a name, this name appears in the DataTip in italic font before the label data, as the following image shows:

In some cases, you add an axis solely for the purpose of adding the label to the DataTip. The following example names both axes so that both data points are labeled in the DataTip:

<?xml version="1.0"?> 
<!-- charts/DataTipsAxisNames.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
    
    <fx:Declarations> 
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
         <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> 
         <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
     <s:Panel title="Bar Chart"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
         <mx:BarChart id="myChart" 
            dataProvider="{srv.lastResult.data.result}" 
            showDataTips="true"> 
            <mx:verticalAxis> 
               <mx:CategoryAxis categoryField="month" 
                    displayName="Month"/> 
            </mx:verticalAxis> 
 
            <mx:horizontalAxis> 
               <mx:LinearAxis displayName="Amount"/> 
            </mx:horizontalAxis> 
 
            <mx:series> 
               <mx:BarSeries 
                    yField="month" 
                    xField="profit" 
                    displayName="Profit"/> 
               <mx:BarSeries 
                    yField="month" 
                    xField="expenses" 
                    displayName="Expenses"/> 
            </mx:series> 
         </mx:BarChart> 
         <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

You can display more than one DataTip by using the dataTipMode property on the chart control. The display options are single and multiple. When dataTipMode is set to multiple, the chart displays all DataTip objects within range of the cursor. The following example sets the value of a ColumnChart control's dataTipMode property to multiple:

<?xml version="1.0"?> 
<!-- charts/DataTipsMultiple.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
 
    <fx:Declarations> 
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
         <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> 
         <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Bar Chart"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:BarChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true" 
        mouseSensitivity="50" 
        dataTipMode="multiple"> 
        <mx:verticalAxis> 
           <mx:CategoryAxis categoryField="month"/> 
        </mx:verticalAxis> 
        <mx:series> 
           <mx:BarSeries 
                yField="month" 
                xField="profit" 
                displayName="Profit"/> 
           <mx:BarSeries 
                yField="month" 
                xField="expenses" 
                displayName="Expenses"/> 
        </mx:series> 
     </mx:BarChart> 
     <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

The following example shows DataTip objects when the dataTipMode property is set to multiple:

The default value of dataTipMode depends on the chart type. Its setting is based on the likelihood that there are overlapping DataTip objects in that chart type. The default value of the dataTipMode property for the following chart types is single:

• BarChart

• CandlestickChart

• ColumnChart

• HLOCChart

• PieChart

The default value is multiple for the dataTipMode property for all other chart types.

To determine the size of the interactive area around a data point, you set the mouseSensitivity property. The mouseSensitivity property configures the distance, in pixels, around the data points where Flex reacts to mouse events such as click and mouseOver. With this property, you can trigger DataTip objects to appear when the user moves the mouse pointer near the data point rather than onto the data point. For more information, see Changing mouse sensitivity.

You can also show all the available data tips on a chart at one time by setting the value of the chart control's showAllDataTips property to true. The result is that all data tips are visible at all times. When you do this, you typically set the value of the showDataTips property to false so that a second data tip does not appear when you mouse over a chart item.

You can customize the text displayed in a DataTip by using the dataTipFunction callback function. When you specify a dataTipFunction callback function, you can access the data of the DataTip before Flex renders it and customizes the text.

The argument to the callback function is a HitData object. As a result, you must import mx.charts.HitData when using a DataTip callback function.

Flex displays whatever the callback function returns in the DataTip box. You must specify a String as the callback function's return type.

The following example defines a new callback function, dtFunc, that returns a formatted value for the DataTip:

<?xml version="1.0"?> 
<!-- charts/CustomDataTips.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
     
    <fx:Declarations> 
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
         <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> 
         <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
  <fx:Script><![CDATA[ 
     import mx.charts.HitData; 
 
     public function dtFunc(hd:HitData):String { 
        return hd.item.month + ": " + 
        "<B>$" + hd.item.profit + "</B>"; 
     } 
  ]]></fx:Script> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Bar Chart"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:BarChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true" 
        dataTipFunction="dtFunc"> 
        <mx:verticalAxis> 
           <mx:CategoryAxis categoryField="month" displayName="Month"/> 
        </mx:verticalAxis> 
 
        <mx:horizontalAxis> 
           <mx:LinearAxis displayName="Amount"/> 
        </mx:horizontalAxis> 
 
        <mx:series> 
           <mx:BarSeries 
                yField="month" 
                xField="profit" 
                displayName="Profit"/> 
           <mx:BarSeries 
                yField="month" 
                xField="expenses" 
                displayName="Expenses"/> 
        </mx:series> 
     </mx:BarChart> 
     <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

You can also use the HitData object to get information about the series in which that data item appears. To do this, you cast the HitData object to a Series class, as the following example shows:

<?xml version="1.0"?> 
<!-- charts/HitDataCasting.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
     
    <fx:Declarations> 
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> 
        <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
  <fx:Script><![CDATA[ 
     import mx.charts.HitData; 
     import mx.charts.series.ColumnSeries; 
 
     public var b:Boolean = true; 
 
     public function myDataTipFunction(e:HitData):String { 
        var s:String; 
        s = ColumnSeries(e.element).displayName + "\n"; 
        s += "Profit: $" + (e.item.profit - e.item.expenses); 
        return s; 
     } 
 
  ]]></fx:Script> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Casting HitData Objects"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:ColumnChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true" 
        dataTipFunction="myDataTipFunction"> 
        <mx:horizontalAxis> 
           <mx:CategoryAxis categoryField="month"/> 
        </mx:horizontalAxis> 
        <mx:series> 
           <mx:ColumnSeries 
                yField="profit" 
                displayName="Income '09"/> 
           <mx:ColumnSeries 
                yField="expenses" 
                displayName="Expenses '09"/> 
        </mx:series> 
     </mx:ColumnChart> 
     <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

The series item is also accessible from the HitData object in a custom DataTip function. The chartItem property refers to an instance of a subclass of the ChartItem class. The type depends on the series type; for example, the chartItem for a ColumnSeries is an instance of the ColumnSeriesItem class.

In the following example, the yValue of the ColumnSeriesItem represents the percentage which a series takes up in a 100% chart:

<?xml version="1.0"?> 
<!-- charts/HitDataCastingWithPercent.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
     
    <fx:Declarations> 
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> 
        <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
  <fx:Script><![CDATA[ 
     import mx.charts.HitData; 
     import mx.charts.series.ColumnSeries; 
     import mx.charts.series.items.ColumnSeriesItem; 
 
     public var b:Boolean = true; 
 
     public function myDataTipFunction(e:HitData):String { 
 
        var s:String; 
        s = "<B>" + ColumnSeries(e.element).displayName + "</B>\n"; 
 
        s += "<I>Profit:</I> <FONT COLOR='#339966'>$" + 
            e.item.profit + "</FONT>\n"; 
        s += "<I>Expenses:</I> <FONT COLOR='#FF0000'>$" + 
            e.item.expenses + "</FONT>\n"; 
        s += "------------------------\n"; 
        s += "<I>Difference:</I> $" + (e.item.profit - e.item.expenses) + "\n"; 
 
        // The value of the Profit will always be 100%, 
        // so exclude adding that to the DataTip. Only 
        // add percent when the user gets the Amount DataTip. 
        var percentValue:Number = Number(ColumnSeriesItem(e.chartItem).yValue); 
        if (percentValue < 100) { 
            s += "Profit was equal to about <B>" + 
                Math.round(percentValue) + "</B>% of the total.\n"; 
        } 
        return s; 
     } 
  ]]></fx:Script> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Accessing ChartItems from HitData Objects"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:ColumnChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        type="100%" 
        dataTipFunction="myDataTipFunction" 
        showDataTips="true"> 
        <mx:horizontalAxis> 
           <mx:CategoryAxis categoryField="month"/> 
        </mx:horizontalAxis> 
        <mx:series> 
           <mx:ColumnSeries 
                yField="profit" 
                displayName="Profit '09"/> 
           <mx:ColumnSeries 
                yField="expenses" 
                displayName="Expenses '09"/> 
        </mx:series> 
     </mx:ColumnChart> 
     <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

For more information on using the HitData object of chart events, see Using the HitData object.

The DataTip callback function can render simple HTML for formatted DataTip objects. Flex supports a small subset of HTML tags including <FONT>, <B>, <I>, and <BR>.

You can create a custom class that defines the appearance of the data tip. This class must implement the IFlexDisplayObject and IDataRenderer interfaces.

You typically create a custom ActionScript class that extends DataTip, and override the updateDisplayList() method. In the updateDisplayList() method, you define the appearance of the box for the data tip and apply styles that apply to the text for the data tip.

The following example class creates a custom data tip:

// charts/MyDataTip.as 
package { 
    import mx.charts.chartClasses.DataTip; 
    import mx.charts.*; 
    import flash.display.*; 
    import flash.geom.Matrix; 
    
    public class MyDataTip extends DataTip { 
 
        public function MyDataTip() { 
            super();            
        }       
        
        override protected function updateDisplayList(w:Number, h:Number):void { 
            super.updateDisplayList(w, h); 
            
            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 the custom data tip, you set the value of the dataTipRenderer style property of the chart control to the custom class. The following sample application applies the custom data tip to the chart control.

<?xml version="1.0"?> 
<!-- charts/CustomDataTipRenderer.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send();applyCustomDataTips();" 
    height="600"> 
 
    <fx:Declarations> 
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
         <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> 
         <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
  <fx:Script><![CDATA[ 
    private function applyCustomDataTips():void { 
        myChart.setStyle("dataTipRenderer",MyDataTip);    
    } 
  ]]></fx:Script> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Bar Chart"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:BarChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true"> 
        <mx:verticalAxis> 
           <mx:CategoryAxis categoryField="month"/> 
        </mx:verticalAxis> 
        <mx:series> 
           <mx:BarSeries 
                yField="month" 
                xField="profit" 
                displayName="Profit"/> 
           <mx:BarSeries 
                yField="month" 
                xField="expenses" 
                displayName="Expenses"/> 
        </mx:series> 
     </mx:BarChart> 
     <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

If you want to prevent the data tip's box from displaying when you mouse over a chart item, you can set the dataTipRenderer style property to a dummy class, such as ProgrammaticSkin; for example:

 myChart.setStyle("dataTipRenderer",mx.skins.ProgrammaticSkin);

If you want to change the text of the data tip, you use the dataTipFunction callback function on the chart control, as described in Customizing DataTip values.

You use the Legend class to add a legend to your charts. The Legend control displays the label for each data series in the chart and a key that shows the chart element for the series.

The simplest way to create a Legend control is to bind a chart to it by using the dataProvider property, as the following example shows:

<?xml version="1.0"?> 
<!-- charts/LegendNamedSeries.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
     
    <fx:Declarations> 
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> 
        <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Bar Chart with Legend"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:BarChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true"> 
        <mx:verticalAxis> 
           <mx:CategoryAxis categoryField="month"/> 
        </mx:verticalAxis> 
        <mx:series> 
           <mx:BarSeries 
                xField="amount" 
                displayName="Amount (in $USD)"/> 
           <mx:BarSeries 
                xField="profit" 
                displayName="Profit (in $USD)"/> 
           <mx:BarSeries 
                xField="expenses" 
                displayName="Expense (in $USD)"/> 
        </mx:series> 
     </mx:BarChart> 
     <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

You add a Legend to a chart in ActionScript by instantiating a new object of type Legend, and then calling the container's addElement() method to add the Legend to the container, as the following example shows:

<?xml version="1.0"?> 
<!-- charts/LegendInAS.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
    
    <fx:Declarations> 
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx" result="createLegend()"/> 
        <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx -->  
    </fx:Declarations> 
 
  <fx:Script><![CDATA[ 
     import mx.charts.Legend; 
 
     private function createLegend():void { 
        var myLegend:Legend = new Legend(); 
        myLegend.dataProvider = myChart; 
        panel1.addElement(myLegend); 
     } 
  ]]></fx:Script> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel id="panel1" title="Bar Chart with Legend (Created in ActionScript)"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:BarChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true"> 
        <mx:verticalAxis> 
           <mx:CategoryAxis categoryField="month"/> 
        </mx:verticalAxis> 
        <mx:series> 
           <mx:BarSeries 
                xField="amount" 
                displayName="Amount (in $USD)"/> 
           <mx:BarSeries 
                xField="profit" 
                displayName="Profit (in $USD)"/> 
           <mx:BarSeries 
                xField="expenses" 
                displayName="Expense (in $USD)"/> 
        </mx:series> 
     </mx:BarChart> 
  </s:Panel> 
</s:Application>

The Legend control creates the legend using information from the chart control. It matches the colors and names of the LegendItem markers to the fills and labels of the chart's data series. In the previous example, Flex uses the BarSeries control's displayName property to define the LegendItem label.

Legend controls require that elements of the charts be named. If they are not named, the Legend markers appear, but without labels.

A Legend control for a PieChart control uses the nameField property of the data series to find values for the legend. The values that the nameField property point to must be Strings.

The following example sets the nameField property of a PieChart control's data series to item. Flex uses the value of the item field in the data provider in the Legend control.

<?xml version="1.0"?> 
<!-- charts/LegendNameField.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()" 
    height="600"> 
 
    <fx:Declarations> 
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/budget-xml.aspx"/> 
        <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/budget.aspx -->  
    </fx:Declarations> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Pie Chart with Legend"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:PieChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true"> 
        <mx:series> 
           <mx:PieSeries field="amount" nameField="item"/> 
        </mx:series> 
     </mx:PieChart> 
     <mx:Legend dataProvider="{myChart}"/> 
  </s:Panel> 
</s:Application>

The nameField property also defines the series for the DataTip objects and labels.

You can create a custom Legend control in MXML by defining the <mx:Legend> tag and populating it with <mx:LegendItem> tags. The following example creates a custom legend for the chart with multiple axes:

<?xml version="1.0"?> 
<!-- charts/MultipleAxesWithCustomLegend.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv_fe.send();srv_strk.send();" 
    height="600"> 
 
    <fx:Declarations> 
        <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/stocks.aspx -->  
        <!-- View source of the following pages to see the structure of the data that Flex uses in this example. --> 
        <mx:HTTPService id="srv_fe" url="http://examplesserver/chart_examples/stocks-xml.aspx?tickerSymbol=FE"/> 
        <mx:HTTPService id="srv_strk" url="http://examplesserver/chart_examples/stocks-xml.aspx?tickerSymbol=STRK"/> 
 
          <mx:SolidColorStroke id="h1Stroke" 
                color="{feColor}" 
                weight="8" alpha=".75" 
                caps="square"/> 
 
          <mx:SolidColorStroke id="h2Stroke" 
                color="{strkColor}" 
                weight="8" alpha=".75" 
                caps="square"/> 
    </fx:Declarations> 
 
  <fx:Script><![CDATA[ 
    [Bindable] 
    public var strkColor:Number = 0x224488; 
 
    [Bindable] 
    public var feColor:Number = 0x884422; 
  ]]></fx:Script> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Column Chart With Multiple Axes"> 
     <s:layout> 
         <s:VerticalLayout/> 
     </s:layout> 
     <mx:ColumnChart id="myChart" showDataTips="true"> 
        <mx:horizontalAxis> 
           <mx:DateTimeAxis id="h1" dataUnits="days"/> 
        </mx:horizontalAxis> 
 
        <mx:horizontalAxisRenderers> 
            <mx:AxisRenderer placement="bottom" axis="{h1}"/> 
        </mx:horizontalAxisRenderers> 
 
        <mx:verticalAxisRenderers> 
            <mx:AxisRenderer placement="left" axis="{v1}"> 
                <mx:axisStroke>{h1Stroke}</mx:axisStroke> 
            </mx:AxisRenderer> 
            <mx:AxisRenderer placement="left" axis="{v2}"> 
                <mx:axisStroke>{h2Stroke}</mx:axisStroke> 
            </mx:AxisRenderer> 
        </mx:verticalAxisRenderers> 
 
        <mx:series> 
           <mx:ColumnSeries id="cs1" 
                horizontalAxis="{h1}" 
                dataProvider="{srv_fe.lastResult.data.result}" 
                yField="close" 
                xField="date" 
                displayName="FE"> 
                <mx:fill> 
                    <mx:SolidColor color="{feColor}"/> 
                </mx:fill>                
                <mx:verticalAxis> 
                   <mx:LinearAxis id="v1"/> 
                </mx:verticalAxis>           
           </mx:ColumnSeries>           
           <mx:LineSeries id="cs2" 
                horizontalAxis="{h1}" 
                dataProvider="{srv_strk.lastResult.data.result}" 
                yField="close" 
                xField="date" 
                displayName="STRK"> 
                <mx:verticalAxis> 
                    <mx:LinearAxis id="v2"/>           
                </mx:verticalAxis> 
 
                <mx:lineStroke> 
                    <mx:SolidColorStroke 
                        color="{strkColor}" 
                        weight="4" 
                        alpha="1"/> 
                </mx:lineStroke> 
           </mx:LineSeries> 
        </mx:series> 
     </mx:ColumnChart> 
     <mx:Legend> 
        <mx:LegendItem label="FE" fontWeight="bold"> 
           <mx:fill> 
            <mx:SolidColor color="{feColor}"/> 
           </mx:fill> 
           <mx:stroke> 
            <mx:SolidColorStroke color="0xCCCCCC" weight="2"/> 
           </mx:stroke> 
        </mx:LegendItem> 
        <mx:LegendItem label="STRK" fontWeight="bold"> 
           <mx:fill> 
            <mx:SolidColor color="{strkColor}"/> 
           </mx:fill> 
           <mx:stroke> 
            <mx:SolidColorStroke color="0xCCCCCC" weight="2"/> 
           </mx:stroke> 
         </mx:LegendItem> 
     </mx:Legend> 
  </s:Panel> 
</s:Application>

To create a custom Legend control in ActionScript, you create a container and add LegendItem objects to it. You then apply the appropriate styles and properties to the LegendItem objects. You can get each LegendItem's label and fill color from the corresponding series in the chart's series array.

The following example creates a custom legend in ActionScript. It lays the LegendItem objects out in a grid, with GridRows and GridItems. This example lets the user customize the number of LegendItem objects in each GridRow. You can use any layout container you want to get the desired appearance of your custom legend.

<?xml version="1.0"?> 
<!-- charts/CustomLegendInActionScript.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="drawLegend()" 
    height="600"> 
    
  <fx:Script><![CDATA[ 
     import mx.containers.GridItem; 
     import mx.containers.GridRow; 
     import mx.graphics.SolidColor; 
     import mx.charts.LegendItem; 
     import mx.collections.ArrayCollection; 
 
     [Bindable] 
     public var expenses:ArrayCollection = new ArrayCollection([ 
        {Expense:"Taxes", April:2000, May:321, June:131, July:1100, August:200, September:1400, October:42}, 
        {Expense:"Rent", April:1000, May:95, June:313, July:600, August:400, September:200, October:52}, 
        {Expense:"Taxes", April:2000, May:321, June:131, July:90, August:500, September:900, October:300}, 
        {Expense:"Bills", April:100, May:478, June:841, July:400, August:600, September:1100, October:150} 
     ]); 
     
     [Bindable] 
     private var rowSize:int = 5; 
     
     [Bindable] 
     private var rowSizes:ArrayCollection = new ArrayCollection( 
          [ {label:"1 Per Row", data:1}, 
            {label:"2 Per Row", data:2}, 
            {label:"3 Per Row", data:3}, 
            {label:"4 Per Row", data:4}, 
            {label:"5 Per Row", data:5}, 
            {label:"6 Per Row", data:6}, 
            {label:"7 Per Row", data:7} ]); 
     
     private function drawLegend():void { 
          clearLegend(); 
 
          // Use a counter for the series. 
          var z:int = 0; 
 
          var numRows:int; 
          if (myChart.series.length % rowSize == 0) { 
               // The number of series is exactly divisible by the rowSize.               
               numRows = Math.floor(myChart.series.length / rowSize);                
          } else { 
               // One extra row is needed if there is a remainder. 
               numRows = Math.floor(myChart.series.length / rowSize) + 1; 
          } 
 
          for (var j:int = 0; j < numRows; j++) { 
          var gr:GridRow = new GridRow(); 
          myGrid.addChild(gr); 
          
          for (var k:int = 0; k < rowSize; k++) { 
               // As long as the series counter is less than the number of series... 
               if (z < myChart.series.length) { 
                    var gi:GridItem = new GridItem(); 
                    gr.addChild(gi); 
                    
                    var li:LegendItem = new LegendItem(); 
                    
                    // Apply the current series' displayName to the LegendItem's label. 
                    li.label = myChart.series[z].displayName; 
          
                    // Get the current series' fill. 
                    var sc:SolidColor = myChart.series[z].getStyle("fill"); 
                    
                    // Apply the current series' fill to the corresponding LegendItem. 
                    li.setStyle("fill", sc); 
                    
                    // Apply other styles to make the LegendItems look uniform. 
                    li.setStyle("textIndent", 5); 
                    li.setStyle("labelPlacement", "left"); 
                    li.setStyle("fontSize", 9); 
          
                    gi.setStyle("backgroundAlpha", "1"); 
                    gi.setStyle("backgroundColor", sc.color); 
                    gi.width = 80; 
                                             
                    // Add the LegendItem to the GridItem. 
                    gi.addChild(li); 
                    
                    // Increment any time a LegendItem is added. 
                    z++; 
               } 
          }                                  
          } 
     } 
     
     private function clearLegend():void { 
          myGrid.removeAllChildren(); 
     } 
     
     private function changeRowSize(e:Event):void { 
          rowSize = ComboBox(e.target).selectedItem.data; 
          drawLegend(); 
     } 
  ]]></fx:Script> 
  
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <s:Panel title="Custom Legend in Grid" width="500" height="750"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
     <mx:BarChart id="myChart" dataProvider="{expenses}" height="400" showDataTips="true"> 
        <mx:verticalAxis> 
           <mx:CategoryAxis dataProvider="{expenses}" categoryField="Expense"/> 
        </mx:verticalAxis> 
        <mx:series> 
           <mx:BarSeries xField="April" displayName="April"/> 
           <mx:BarSeries xField="May" displayName="May"/> 
           <mx:BarSeries xField="June" displayName="June"/> 
           <mx:BarSeries xField="July" displayName="July"/> 
           <mx:BarSeries xField="August" displayName="August"/> 
           <mx:BarSeries xField="September" displayName="September"/> 
           <mx:BarSeries xField="October" displayName="October"/> 
        </mx:series> 
     </mx:BarChart> 
 
     <mx:HRule width="100%"/> 
     <mx:Grid id="myGrid"/> 
     <mx:HRule width="100%"/> 
 
     <s:HGroup> 
          <s:Label text="Select the number of rows in the Legend."/> 
          <s:ComboBox id="cb1" 
               dataProvider="{rowSizes}" 
               close="changeRowSize(event)" selectedIndex="4"/>   
     </s:HGroup> 
  </s:Panel> 
</s:Application>

Note that in this example, you use the addChild() method to add the Legend to the Grid container. MX containers use the addChild() method, while Spark containers use the addElement() method.