Formatting tick marks

There are two types of tick marks on a Flex chart: major and minor. Major tick marks are the indications along an axis that correspond to an axis label. The text for the axis labels is often derived from the chart's data provider. Minor tick marks are those tick marks that appear between the major tick marks. Minor tick marks help the user to visualize the distance between the major tick marks.

You use the tickPlacement and minorTickPlacement properties of the AxisRenderer object to determine whether or not Flex displays tick marks and where Flex displays tick marks.

The following table describes valid values of the tickPlacement and minorTickPlacement properties:

Value	Description
`cross`	Places tick marks across the axis.
`inside`	Places tick marks on the inside of the axis line.
`none`	Hides tick marks.
`outside`	Places tick marks on the outside of the axis line.

You can align the tick marks with labels by using the tickAlignment property.

Flex also lets you set the length of tick marks and the number of minor tick marks that appear along the axis. The following table describes the properties that define the length of tick marks on the chart's axes:

Property	Description
`tickLength`	The length, in pixels, of the major tick mark from the axis.
`minorTickLength`	The length, in pixels, of the minor tick mark from the axis.

The minor tick marks overlap the placement of major tick marks. So, if you hide major tick marks but still show minor tick marks, the minor tick marks appear at the regular tick-mark intervals.

The following example sets tick marks to the inside of the axis line, sets the tick mark's length to 12 pixels, and hides minor tick marks:

<?xml version="1.0"?>
<!-- charts/TickStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
      [Bindable]
      public var FRED:Array = [
         {date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75},
         {date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19},
         {date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22},
         {date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71},
         {date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99},
         {date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65},
         {date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82},
         {date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38},
         {date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44},
         {date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1}
      ];
  ]]></mx:Script>

  <mx:Style>
     .myAxisStyle {
        placement:bottom;
        minorTickPlacement:none;
        tickLength:12;
        tickPlacement:inside;
     }
  </mx:Style>

    <mx:HLOCChart id="mychart" 
        dataProvider="{FRED}" 
        showDataTips="true"
    >
    <mx:horizontalAxisRenderers>
        <mx:AxisRenderer axis="{a2}" styleName="myAxisStyle"/>
    </mx:horizontalAxisRenderers>

    <mx:verticalAxis>
        <mx:LinearAxis id="a1" minimum="30" maximum="50"/>
    </mx:verticalAxis>

    <mx:horizontalAxis>
        <mx:LinearAxis id="a2"/>
    </mx:horizontalAxis>

    <mx:series>
        <mx:HLOCSeries
            dataProvider="{FRED}"
            openField="open"
            highField="high"
            lowField="low"
            closeField="close"
            displayName="Ticker Symbol: FRED"
        />
     </mx:series>
  </mx:HLOCChart>
  <mx:Legend dataProvider="{mychart}"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

Adobe Flex 3 Help

Formatting tick marks