Using column charts

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.

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:

Property

Description

yField

Specifies the field of the data provider that determines the y-axis location of the top of a column. This field defines the height of the column.

xField

Specifies the field of the data provider that determines the x-axis location of the column. If you omit this property, Flex arranges the columns 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 a column. This property has no effect on overlaid, stacked, or 100% stacked charts. For more information on using the minField property, see Using the minField property.

The following example creates a ColumnChart control with two series:

<?xml version="1.0"?>
<!-- charts/BasicColumn.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">
     
    <fx:Declarations>
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
         <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
         <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Column Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart" dataProvider="{srv.lastResult.data.result}" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis 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}"/>
  </s:Panel>
</s: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 SolidColorStroke object for the fill and stroke properties, respectively. The following example defines a custom SolidColor object and a custom SolidColorStroke object, and applies them to the ColumnSeries object in the ColumnChart control.

<?xml version="1.0"?>
<!-- charts/BasicColumnFills.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
         <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
         <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  

        <!-- 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 SolidColorStrokes for the columns. -->
        <mx:SolidColorStroke id="s1" color="blue" weight="2"/>
        <mx:SolidColorStroke id="s2" color="red" weight="2"/>
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Panel title="ColumnChart Control with Custom Column Styles">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <mx:ColumnChart id="myChart" dataProvider="{srv.lastResult.data.result}" showDataTips="true">
            <mx:horizontalAxis>
                <mx:CategoryAxis 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}"/>
    </s:Panel>
</s: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 SolidColorStroke 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 code creates a floating ColumnChart control:

<?xml version="1.0"?>
<!-- charts/MinFieldColumn.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    height="600">
    
  <fx: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}
     ]);
  ]]></fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Floating Column Chart">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
     <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>
  </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

For more information, see Using the minField property.