You can place axes on the left, right, top, or bottom of the chart control. This includes the axis line as well as labels and any tick marks you added. You can place horizontal axes at the top or bottom of the chart (or both, if you have multiple vertical axes). You can place vertical axes at the left or right of the chart (or both, if you have multiple horizontal axes).
To change the location of axes, you use the placement property of the AxisRenderer. Valid values for this property for a vertical axis are top and bottom. Valid values for this property for a horizontal axis are left and right.
The following example creates a ColumnChart control with the default axis locations (bottom and left). You can select new locations by using the ComboBox controls at the bottom of the panel.
<?xml version="1.0"?>
<!-- charts/AxisPlacementExample.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}
]);
[Bindable]
private var horChoices:Array = ["bottom","top"];
[Bindable]
private var vertChoices:Array = ["left","right"];
]]></mx:Script>
<mx:Panel title="Variable Axis Placement">
<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxisRenderers>
<mx:AxisRenderer id="horAxisRend"
axis="{axis1}"
placement="{myHorBox.selectedItem}"
/>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer id="vertAxisRend"
axis="{axis2}"
placement="{myVertBox.selectedItem}"
/>
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:CategoryAxis id="axis1"
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="axis2"/>
</mx:verticalAxis>
<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:Form>
<mx:FormItem label="Horizontal Axis Location:">
<mx:ComboBox id="myHorBox" dataProvider="{horChoices}"/>
</mx:FormItem>
<mx:FormItem label="Vertical Axis Location:">
<mx:ComboBox id="myVertBox" dataProvider="{vertChoices}"/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below: