Flex charting controls lets you create some of the most common chart types, and also lets you customize the appearance of your charts. The charting controls are located in the mx.charts.* package.

The following table lists the supported chart types, the name of the control class, and the name of the series class that you use to define what data appears in each chart.

Chart type	Chart control class	Chart series class
Area	AreaChart	AreaSeries
Bar	BarChart	BarSeries
Bubble	BubbleChart	BubbleSeries
Candlestick	CandlestickChart	CandlestickSeries
Column	ColumnChart	ColumnSeries
HighLowOpenClose	HLOCChart	HLOCSeries
Line	LineChart	LineSeries
Pie	PieChart	PieSeries
Plot	PlotChart	PlotSeries

All chart controls, except the PieChart class, are subclasses of the CartesianChart class. Cartesian charts are charts that typically represent a set of data points in rectangular-shaped, two-dimensional space. The PieChart class is a subclass of the PolarChart class, which represents data in circular space.

All chart controls inherit basic charting characteristics from the ChartBase class.

A chart control typically has the following structure in MXML:

<mx:ChartName>
    <!-- Define one or more series. -->
    <mx:SeriesName/>

    <!-- Define the axes. -->
    <mx:horizontalAxis>
        <mx:axis_type/>
    </mx:horizontalAxis>
    <mx:verticalAxis>
        <mx:axis_type/>
    </mx:verticalAxis>

    <!-- Style the axes and ticks marks. -->
    <mx:horizontalAxisRenderers>
        <mx:AxisRenderer/>
    </mx:horizontalAxisRenderers>
    <mx:verticalAxisRenderers>
        <mx:AxisRenderer/>
    </mx:verticalAxisRenderers/>

    <!-- Add grid lines and other elements to the chart. -->
    <mx:annotationElements>
        <mx:Array/>
    </mx:annotationElements>
    <mx:backgroundElements>
        <mx:Array/>
    </mx:backgroundElements/>
</mx:ChartName>

<!-- Optionally define the legend. -->
<mx:Legend/>

The following table describes the parts of the chart in more detail:

Part	Description
Chart	(Required) Defines one or two data providers for the chart. Also defines the chart type and sets data tips, mouse sensitivity, gutter styles, and axis styles. This is the top-level tag for a chart control. All other tags are child tags of this tag.
Series	(Required) Defines one or more data series to be displayed on the chart. Also sets the strokes, fills, and renderers (or skins) of the data series, as well as the strokes and fills used by the chart's legend for each series. You can also define a second set of series for each chart, to show multiple data series in a single chart. Each series in a chart can have its own data provider.
Axes	Sets the axis type (numeric or category). Also defines the axis labels, titles, and style properties such as padding. You can also define axes for the second set of series, if there is one.
Axes renderer	(Optional) Sets tick placement and styles, enables or disables labels, and defines axis lines, label rotation, and label gap. You can also define an axis renderer for a second series, if there is one.
Elements	(Optional) Defines grid lines and extra elements to appear on the chart.

For each chart type, Flex supplies a corresponding chart control and chart series. The chart control defines the chart type, the data provider that supplies the chart data, the grid lines, the text for the chart axes, and other properties specific to the chart type. The dataProvider property of the chart control determines what data the chart uses.

A data provider is a collection of objects. It can be an Array of objects or any object that implements the collections API. A data provider can also be an XMLList object with XML nodes, such as the result of an E4X query.

The chart components use a flat, or list-based, data provider similar to a one-dimensional array. The data provider can contain objects such as Strings and Numbers, or even other objects. For more information on supplying chart data, see Defining chart data.

You use the chart series to identify which data from the data provider the chart displays. A data provider can contain more data than you want to show in your chart, so you use the chart's series to specify which points you want to use from the data provider. You can specify a single data series or a second series. You can also use the chart series to define the appearance of the data in the chart.

All chart series inherit the data provider from the chart unless they have a data provider explicitly set on themselves. If you set the value of the dataProvider property on the chart control, you are not required to set the property value on the series. You can, however, define different data providers for each series in a chart.

For example, to create a pie chart, you use the PieChart control with the PieSeries chart series. To create an area chart, you use the AreaChart control with the AreaSeries chart series, as the following example shows:

<?xml version="1.0"?>
<!-- charts/BasicAreaOneSeries.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:series>
     </mx:AreaChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

This example defines an array containing a single <mx:AreaSeries> tag. The <mx:AreaSeries> tag specifies the single data series that is displayed in the chart.

You can add a second <mx:AreaSeries> tag to display two data series, as the following example shows:

<?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:

You are not required to define a data provider on the chart control. Each series can have its own data provider, as the following example shows:

<?xml version="1.0"?>
<!-- charts/MultipleDataProviders.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var profit04:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000},
        {Month:"Feb", Profit:1000},
        {Month:"Mar", Profit:1500}
     ]);
     [Bindable]
     public var profit05:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2200},
        {Month:"Feb", Profit:1200},
        {Month:"Mar", Profit:1700}
     ]);
     [Bindable]
     public var profit06:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2400},
        {Month:"Feb", Profit:1400},
        {Month:"Mar", Profit:1900}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Column Chart">
     <mx:ColumnChart id="myChart" dataProvider="{profit04}" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="Month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                dataProvider="{profit04}" 
                yField="Profit"
                xField="Month" 
                displayName="2004"
           />
           <mx:ColumnSeries 
                dataProvider="{profit05}" 
                yField="Profit"
                xField="Month" 
                displayName="2005"
           />
           <mx:ColumnSeries 
                dataProvider="{profit06}" 
                yField="Profit"
                xField="Month" 
                displayName="2006"
           />
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

To dynamically size the chart to the size of the browser window, set the width and height attributes to a percentage value, as the following example shows:

<?xml version="1.0"?>
<!-- charts/BasicBarSize.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:Panel title="Bar Chart" height="500" width="500">
     <mx:BarChart id="myChart" 
        dataProvider="{expenses}" 
        height="100%"
        width="100%"
        showDataTips="true"
     >
        <mx:verticalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                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}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

If you want the chart to resize when the window resizes, set the size of the chart's parent containers using percentage values too.