The ColumnChart control represents data as a series of vertical columns whose height is determined by values in the data. You can use the ColumnChart control to create several variations of column charts, including simple columns, clustered columns, overlaid, stacked, 100% stacked, and high-low. For more information, see Stacking charts.

The following example shows a ColumnChart control with two series:

You use the ColumnSeries chart series with the ColumnChart control to define the data for the chart. The following table describes the properties of the ColumnSeries chart series to define your chart:

The following example creates a ColumnChart control with two series:

<?xml version="1.0"?>
<!-- charts/BasicColumn.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="Column Chart">
     <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                xField="Month" 
                yField="Profit" 
                displayName="Profit"
           />
           <mx:ColumnSeries 
                xField="Month" 
                yField="Expenses" 
                displayName="Expenses"
           />
        </mx:series>
     </mx:ColumnChart>
     <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 columns in a ColumnChart control, you specify a SolidColor and a Stroke object for the fill and stroke properties, respectively. The following example defines a custom SolidColor object and a custom Stroke object, and applies them to the ColumnSeries object in the ColumnChart control.

<?xml version="1.0"?>
<!-- charts/BasicColumnFills.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>

    <!-- Define custom colors for use as column fills. -->
    <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
    <mx:SolidColor id="sc2" color="red" alpha=".3"/>

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

    <mx:Panel title="ColumnChart Control with Custom Column Styles">
        <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
            <mx:horizontalAxis>
                <mx:CategoryAxis 
                    dataProvider="{expenses}" 
                    categoryField="Month"
                />
            </mx:horizontalAxis>
            <mx:series>
                <mx:ColumnSeries 
                    xField="Month" 
                    yField="Profit"
                    displayName="Profit"
                    fill="{sc1}"
                    stroke="{s1}"
                />
                <mx:ColumnSeries 
                    xField="Month" 
                    yField="Expenses"
                    displayName="Expenses"
                    fill="{sc2}"
                    stroke="{s2}"
                />
            </mx:series>
        </mx:ColumnChart>
        <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.

Creating floating column charts

You can also create floating column charts by using the minField property of the chart's data series. This property lets you set the lower level of a column. The following example shows a floating ColumnChart control:

The following code draws this chart:

<?xml version="1.0"?>
<!-- charts/MinFieldColumn.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", Revenue:1200, Expenses:500},
        {Month:"Feb", Revenue:1200, Expenses:550},
        {Month:"Mar", Revenue:1240, Expenses:475},
        {Month:"Apr", Revenue:1300, Expenses:600},
        {Month:"May", Revenue:1420, Expenses:575},
        {Month:"Jun", Revenue:1400, Expenses:600},
        {Month:"Jul", Revenue:1500, Expenses:600},
        {Month:"Aug", Revenue:1600, Expenses:750},
        {Month:"Sep", Revenue:1600, Expenses:735},
        {Month:"Oct", Revenue:1750, Expenses:750},
        {Month:"Nov", Revenue:1800, Expenses:800},
        {Month:"Dec", Revenue:2000, Expenses:850}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Floating Column Chart">
     <mx:ColumnChart 
        dataProvider="{expenses}" 
        showDataTips="true"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
            />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                yField="Revenue" 
                minField="Expenses" 
                displayName="Revenue"
            />
        </mx:series>
     </mx:ColumnChart>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

For more information, see Using the minField property.