You use the AreaChart control to represent data as an area bounded by a line connecting the data values. The area underneath the line is filled in with a color or pattern. You can use an icon or symbol to represent each data point along the line, or you can show a simple line without icons.

The following image shows an example of an area chart:

The following example creates an AreaChart control:

<?xml version="1.0"?>
<!-- charts/BasicArea.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, Amount:450},
        {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
        {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Area Chart">
     <mx:AreaChart id="myChart" dataProvider="{expenses}"
     showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis
                dataProvider="{expenses}"
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:AreaSeries
                yField="Profit"
                displayName="Profit"
           />
           <mx:AreaSeries
                yField="Expenses"
                displayName="Expenses"
           />
        </mx:series>
     </mx:AreaChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

An area chart is essentially a line chart with the area underneath the line filled in; therefore, area charts and line charts share many of the same characteristics. For more information, see Using line charts.

You use the AreaSeries chart series with the AreaChart control to define the data for the chart. The following table describes properties of the AreaSeries chart series that you commonly use to define your chart:

The following example shows the available forms for an AreaChart control's series:

You can use the type property of the AreaChart control to represent a number of chart variations, including overlaid, stacked, 100% stacked, and high-low areas. For more information, see Stacking charts. To customize the fills of the series in an AreaChart control, you use the areaFill and areaStroke properties. For each fill, you specify a SolidColor and a Stroke object. The following example defines three custom SolidColor objects and three custom Stroke objects, and applies them to the three AreaSeries objects in the AreaChart control.

<?xml version="1.0"?>
<!-- charts/AreaChartFills.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        private var expensesAC:ArrayCollection = new ArrayCollection( [
            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
        ]]>
    </mx:Script>

    <!-- Define custom colors for use as fills in the AreaChart control. -->
    <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
    <mx:SolidColor id="sc2" color="red" alpha=".3"/>
    <mx:SolidColor id="sc3" color="green" alpha=".3"/>

    <!-- Define custom Strokes. -->
    <mx:Stroke id="s1" color="blue" weight="2"/>
    <mx:Stroke id="s2" color="red" weight="2"/>
    <mx:Stroke id="s3" color="green" weight="2"/>

    <mx:Panel title="AreaChart Control with Custom Fills Example" 
        height="100%" width="100%" layout="horizontal">
        <mx:AreaChart id="Areachart" 
            height="100%" 
            width="70%"
            paddingLeft="5" 
            paddingRight="5" 
            showDataTips="true" 
            dataProvider="{expensesAC}"
        >                 
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Month"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:AreaSeries 
                    yField="Profit" 
                    displayName="Profit" 
                    areaStroke="{s1}" 
                    areaFill="{sc1}"
                />
                <mx:AreaSeries 
                    yField="Expenses" 
                    displayName="Expenses" 
                    areaStroke="{s2}" 
                    areaFill="{sc2}"
                />
                <mx:AreaSeries 
                    yField="Amount" 
                    displayName="Amount" 
                    areaStroke="{s3}" 
                    areaFill="{sc3}"
                />
            </mx:series>
        </mx:AreaChart>            
        <mx:Legend dataProvider="{Areachart}"/>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

For more information on using fills, see Using fills with chart controls. For more information on using the Stroke class, see Using strokes with chart controls.