Flex 2 Developer's Guide > Charting Components > Chart Types > Using area charts

Using area charts

You use the AreaChart control to represent data as an area bounded by a line connecting the values in the data. 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:

An area chart

You can use the AreaChart control to represent a number of chart variations, including overlaid, stacked, 100 percent stacked, and high-low areas. For more information, see Stacking charts.

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:

Property	Description
`yField`	Specifies the field of the data provider that determines the y-axis location of each data point.
`xField`	Specifies the field of the data provider that determines the x-axis location of each data point. If you omit this field, Flex arranges the data points in the order of the data in the data provider.
`minField`	Specifies the field of the data provider that determines the y-axis location of the bottom of an area. This property is optional. If you omit it, the bottom of the area is aligned with the x-axis. This property has no effect on overlaid, stacked, or 100 percent stacked charts. For more information on using the `minField` property, see Using the minField property.
`form`	Specifies the way in which the data series is shown in the chart. Valid values are: segment Draws lines as connected segments that are angled to connect at each data point in the series. This is the default. step Draws lines as horizontal and vertical segments. At the first data point, draws a horizontal line, and then a vertical line to the second point. Repeats this action for each data point. reverseStep Draws lines as horizontal and vertical segments. At the first data point, draws a vertical line, and then a horizontal line to the second point. Repeats this action for each data point. vertical Draws only the vertical line from the y-coordinate of the first point to y-coordinate of the second point at the x-coordinate of the second point. Repeats this action for each data point. horizontal Draws only the horizontal line from the x-coordinate of the first point to x-coordinate of the second point at the y-coordinate of the first point. Repeats this action for each data point. curve Draws curves between data points.

The following example shows the available forms for an AreaSeries series:

The six types of AreaSeries charts

You can set the type property on an AreaChart control to stack and group series data in the chart. For more information, see Stacking charts.

Flex 2

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/2/docs/00001227.html