Limiting the Labels Shown on an Axis

When graphing large data sets, there is often too much data for every item to get its own label on the axis. To help you, there is a AxisRenderer that you can use to customize the rendering of the axis.

The syntax for an AxisRenderer looks like this:

<mx:horizontalAxisRenderer>   <mx:AxisRenderer   canDropLabels="true|false"   canStagger="true|false"   showLabels="true|false"   showLine="true|false"   tickLength="Default depends on axis"   tickPlacement="inside|outside|cross|none"   title="No default"/> </mx:horizontalAxisRenderer> 

Note

This is only a subset of the elements that can be set on an AxisRenderer.

1.	Open ComparisonChart.mxml from your flexGrocer/views/dashboard directory. Alternately, you can open ComparisonChart_legend from the intermediate directory and save it as ComparisonChart.mxml in your flexGrocer/views/dashboard directory.
2.	Between the open <mx:ColumnChart> tag and the first <mx:horizontalAxis> tag, add an <mx:horizontalAxisRenderer> tag pair. Inside the pair, add an <mx:AxisRenderer> tag, setting the canDropLabels attribute to true. <mx:ColumnChart dataProvider="{dp}" width="100%" height="100%"> <mx:horizontalAxisRenderer> <mx:AxisRenderer canDropLabels="true"/> </mx:horizontalAxisRenderer> <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{dp}" categoryField="DTSALE" labelFunction="renderDate"/> </mx:horizontalAxis> ... </mx:ColumnChart> This tells the horizontal axis that if there is not room for every label, it is okay to render the labels that fit. Labels will be rendered at regular intervals (such as every other item, every third item, and so on).
3.	Save and test the application. You should now see that regardless how many days, weeks, or months of data you are viewing, the labels are always rendered legibly.