Stacking charts -- Flex 2.01

When you chart multiple data series using the AreaChart, BarChart, and ColumnChart controls, you can control how Flex displays the series using the type property of the controls. The following table describes the values that the type property supports:

The following example creates an AreaChart control that has four data series, stacked on top of each other:

Property	Description
`clustered`	Chart elements for each series are grouped by category. This is the default value for BarChart and ColumnChart controls.
`overlaid`	Chart elements for each series are rendered on top of each other, with the element corresponding to the last series on top. This is the default value for AreaChart controls.
`stacked`	Chart elements for each series are stacked on top of each other. Each element represents the cumulative value of the elements beneath it.
`100%`	Chart elements are stacked on top of each other, adding up to 100%. Each chart element represents the percentage that the value contributes to the sum of the values for that category.

<?xml version="1.0"?>
<!-- charts/AreaStacked.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="Line Chart">
     <mx:AreaChart  
        dataProvider="{expenses}" 
        showDataTips="true" 
        type="stacked"
     >
        <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:Panel>
</mx:Application>

With an overlay, the last series appears on top, and can obscure the data series below it unless you use the alpha property of the fill to make it transparent. For more information, see Using fills.

If you set the type property to 100%, the control draws each series stacked on top of each other, adding up to 100% of the area. Each column represents the percentage that the value contributes to the sum of the values for that category, as the following example shows:

You can use the ColumnSet, BarSet, and AreaSet classes to combine groups of chart series, and thereby use different types of series within the same chart. The following example uses BarSet classes to combine clustered and stacked BarSeries in a single chart. The example shows how to do this in MXML and ActionScript:

<?xml version="1.0"?>
<!-- charts/UsingBarSets.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()">
  <mx:Script><![CDATA[
     import mx.charts.Legend;
     import mx.charts.BarChart;
     import mx.charts.series.BarSet;
     import mx.charts.series.BarSeries;
     import mx.collections.ArrayCollection;

     [Bindable]
     private var yearlyData:ArrayCollection = new ArrayCollection([
        {month:"January", revenue:120, costs:45,
            overhead:102, oneTime:23},
        {month:"February", revenue:108, costs:42,
            overhead:87, oneTime:47},
        {month:"March", revenue:150, costs:82,
            overhead:32, oneTime:21},
        {month:"April", revenue:170, costs:44,
            overhead:68},
        {month:"May", revenue:250, costs:57,
            overhead:77, oneTime:17},
        {month:"June", revenue:200, costs:33,
            overhead:51, oneTime:30},
        {month:"July", revenue:145, costs:80,
            overhead:62, oneTime:18},
        {month:"August", revenue:166, costs:87,
            overhead:48},
        {month:"September", revenue:103, costs:56,
            overhead:42},
        {month:"October", revenue:140, costs:91,
            overhead:45, oneTime:60},
        {month:"November", revenue:100, costs:42,
            overhead:33, oneTime:67},
        {month:"December", revenue:182, costs:56,
            overhead:25, oneTime:48},
        {month:"May", revenue:120, costs:57,
            overhead:30}
     ]);

     private function initApp():void {
        var c:BarChart = new BarChart();
        c.dataProvider = yearlyData;

        var vAxis:CategoryAxis = new CategoryAxis();
        vAxis.categoryField = "month";
        c.verticalAxis = vAxis;

        var mySeries:Array = new Array();

        var outerSet:BarSet = new BarSet();
        outerSet.type = "clustered";
        var series1:BarSeries = new BarSeries();
        series1.xField = "revenue";
        series1.displayName = "Revenue";
        outerSet.series = [series1];

        var innerSet:BarSet = new BarSet();
        innerSet.type = "stacked";
        var series2:BarSeries = new BarSeries();
        var series3:BarSeries = new BarSeries();
        series2.xField = "costs";
        series2.displayName = "Recurring Costs";
        series3.xField = "oneTime";
        series3.displayName = "One-Time Costs";
        innerSet.series = [series2, series3];

        c.series = [outerSet, innerSet];

        var l:Legend = new Legend();
        l.dataProvider = c;

        panel2.addChild(c);
        panel2.addChild(l);
     }
  ]]></mx:Script>

  <mx:Panel title="Mixed Sets Chart Created in MXML" id="panel1">
     <mx:BarChart id="myChart" dataProvider="{yearlyData}">
        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="month"/>
        </mx:verticalAxis>
        <mx:series>
            <mx:BarSet type="clustered">
                <mx:BarSeries xField="revenue" 
                    displayName="Revenue"/>
                <mx:BarSet type="stacked">
                    <mx:BarSeries 
                        xField="costs" 
                        displayName="Recurring Costs"/>
                    <mx:BarSeries 
                        xField="oneTime" 
                        displayName="One-Time Costs"/>
                </mx:BarSet>
            </mx:BarSet>
        </mx:series>
     </mx:BarChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
  <mx:Panel title="Mixed Sets Chart Created in ActionScript"
    id="panel2">
  </mx:Panel>
</mx:Application>

The resulting chart shows two clustered series; one is a standalone series, and the other is a stacked series, as the following example shows:

Current page: http://livedocs.adobe.com/flex/201/html/charts_formatting_110_46.html