Axes have lines to which the tick marks are attached. You can use style properties to hide these lines or change the width of the lines.
To hide the axis line, set the value of the showLine property on the AxisRenderer object to false. The default value is true. The following example sets showLine to false:
<?xml version="1.0"?>
<!-- charts/DisableAxisLines.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:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
id="a1"
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
axis="{a1}"
showLine="false"/>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer
axis="{a1}"
showLine="false"
/>
</mx:verticalAxisRenderers>
<mx:series>
<mx:LineSeries
yField="Profit"
displayName="Profit"
/>
<mx:LineSeries
yField="Expenses"
displayName="Expenses"
/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
You can also apply the showLine property as a CSS style property.
You can change the width, color, and alpha of the axis line with the <mx:axisStroke> tag. You use an <mx:Stroke> child tag to define these properties or define a stroke and then bind it to the axisStroke object, as the following example shows:
<?xml version="1.0"?>
<!-- charts/StyleAxisLines.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:Stroke id="axisStroke"
color="#884422"
weight="8"
alpha=".75"
caps="square"
/>
<mx:Panel title="Line Chart">
<mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
id="a1"
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="a2"/>
</mx:verticalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{a1}">
<mx:axisStroke>{axisStroke}</mx:axisStroke>
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{a2}">
<mx:axisStroke>
<mx:Stroke color="#884422"
weight="8"
alpha=".75"
caps="square"
/>
</mx:axisStroke>
</mx:AxisRenderer>
</mx:verticalAxisRenderers>
<mx:series>
<mx:LineSeries
yField="Profit"
displayName="Profit"
/>
<mx:LineSeries
yField="Expenses"
displayName="Expenses"
/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
For more information about strokes, see Using strokes with chart controls.
You can change the placement of the axis lines (for example, move the axis line from the bottom of the chart control to the top) by using the placement property of the AxisRenderer. For more information, see Positioning chart axes.
You can also apply filters to axis lines to further customize their appearance. For more information, see Using filters with chart controls.