You use the PlotChart control to represent data in Cartesian coordinates where each data point has one value that determines its position along the x-axis, and one value that determines its position along the y-axis. You can define the shape that Flex displays at each data point with the renderer for the data series.

The following image shows an example of a PlotChart control with three series:

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

The following example defines three data series in a PlotChart control:

<?xml version="1.0"?>
<!-- charts/BasicPlot.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:"January", Profit:2000, Expenses:1500, Amount:450},
        {Month:"February", Profit:1000, Expenses:200, Amount:600},
        {Month:"March", Profit:1500, Expenses:500, Amount:300},
        {Month:"April", Profit:500, Expenses:300, Amount:500},
        {Month:"May", Profit:1000, Expenses:450, Amount:250},
        {Month:"June", Profit:2000, Expenses:500, Amount:700}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Plot Chart">
     <mx:PlotChart id="myChart" dataProvider="{expenses}"
     showDataTips="true">
        <mx:series>
           <mx:PlotSeries
                xField="Expenses"
                yField="Profit"
                displayName="Plot 1"
           />
           <mx:PlotSeries
                xField="Amount"
                yField="Expenses"
                displayName="Plot 2"
           />
           <mx:PlotSeries
                xField="Profit"
                yField="Amount"
                displayName="Plot 3"
           />
        </mx:series>
     </mx:PlotChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

To customize the styles of the points in a PlotChart control, you define a SolidColor and a Stroke object for the fill and stroke properties, respectively. The following example defines three SolidColor objects and three custom Stroke objects, and applies them to the PlotSeries objects in the PlotChart control.

<?xml version="1.0"?>
<!-- charts/PlotFills.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:"January", Profit:2000, Expenses:1500, Amount:450},
        {Month:"February", Profit:1000, Expenses:200, Amount:600},
        {Month:"March", Profit:1500, Expenses:500, Amount:300},
        {Month:"April", Profit:500, Expenses:300, Amount:500},
        {Month:"May", Profit:1000, Expenses:450, Amount:250},
        {Month:"June", Profit:2000, Expenses:500, Amount:700}
     ]);
  ]]></mx:Script>

    <!-- Define custom colors for use as plot point fills. -->
    <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="1"/>
    <mx:Stroke id="s2" color="red" weight="1"/>
    <mx:Stroke id="s3" color="green" weight="1"/>

    <mx:Panel title="Plot Chart with custom fills">
        <mx:PlotChart id="myChart" 
            dataProvider="{expenses}"
            showDataTips="true"
        >
            <mx:series>
                <mx:PlotSeries
                    xField="Expenses"
                    yField="Profit"
                    displayName="Plot 1"
                    fill="{sc1}"
                    stroke="{s1}"
                />
                <mx:PlotSeries
                    xField="Amount"
                    yField="Expenses"
                    displayName="Plot 2"
                    fill="{sc2}"
                    stroke="{s2}"
                />
                <mx:PlotSeries
                    xField="Profit"
                    yField="Amount"
                    displayName="Plot 3"
                    fill="{sc3}"
                    stroke="{s3}"
                />
            </mx:series>
        </mx:PlotChart>
        <mx:Legend dataProvider="{myChart}"/>
    </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.

By default, Flex displays the first data series in the chart as a diamond at each point. When you define multiple data series in a chart, Flex rotates the shape for the series (starting with a diamond, then a circle, then a square). If you have more series than there are default renderers, Flex begins again with the diamond.

The diamond shape, like the other shapes, is defined by a renderer class. The renderer classes that define these shapes are in the mx.charts.renderers package. The circle is defined by the CircleItemRenderer class. The following default renderer classes define the appearance of the data points:

• BoxItemRenderer
• CircleItemRenderer
• CrossItemRenderer
• DiamondItemRenderer
• ShadowBoxItemRenderer
• TriangleItemRenderer

You can control the image that is displayed by the chart for each data point by setting the itemRenderer style property of the series. The following example overrides the default renderers for the series:

<?xml version="1.0"?>
<!-- charts/PlotWithCustomRenderer.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:"January", Profit:2000, Expenses:1500, Amount:450},
        {Month:"February", Profit:1000, Expenses:200, Amount:600},
        {Month:"March", Profit:1500, Expenses:500, Amount:300},
        {Month:"April", Profit:500, Expenses:300, Amount:500},
        {Month:"May", Profit:1000, Expenses:450, Amount:250},
        {Month:"June", Profit:2000, Expenses:500, Amount:700}
     ]);
    ]]>
  </mx:Script>

  <mx:Panel title="Plot Chart With Custom Item Renderer">
     <mx:PlotChart id="myChart" dataProvider="{expenses}"
     showDataTips="true">
        <mx:series>
           <mx:PlotSeries
                xField="Expenses"
                yField="Profit"
                displayName="Plot 1"
                itemRenderer="mx.charts.renderers.CrossItemRenderer"
                radius="10"
           />
           <mx:PlotSeries
                xField="Amount"
                yField="Expenses"
                displayName="Plot 2"
                itemRenderer="mx.charts.renderers.DiamondItemRenderer"
                radius="10"
           />
           <mx:PlotSeries
                xField="Profit"
                yField="Amount"
                displayName="Plot 3"
                itemRenderer=
                "mx.charts.renderers.TriangleItemRenderer"
                radius="10"
           />
        </mx:series>
     </mx:PlotChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

You can also use graphics or custom classes to define each plot point. For more information, see Creating custom renderers.