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:

yField

xField

minField

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.

 Twitter™ and Facebook posts are not covered under the terms of Creative Commons.