Dropping labels in a Flex Chart

In a slightly modified version of a previous example (“Charting in Flex Builder 3 (public beta 1 edition)” — hooray for recycling!), this time we look at removing some of the crowded labels along the horizontal axis by setting the canDropLabels style.

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/10/16/dropping-labels-in-a-flex-chart/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="quotesXML" source="adbe.xml" format="e4x" />
    <mx:XMLListCollection id="adbe" source="{quotesXML.quote}" />

    <mx:String id="ADBE_YAHOO">http://finance.yahoo.com/q?d=t&s=ADBE</mx:String>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="canDropLabels:"
                labelPlacement="left" />
    </mx:ApplicationControlBar>

    <mx:LinkButton
            label="ADBE"
            click="navigateToURL(new URLRequest(ADBE_YAHOO))"
            fontSize="14"
            fontWeight="bold" />

    <mx:HLOCChart id="hlocChart"
            showDataTips="true"
            dataProvider="{adbe}"
            width="100%"
            height="100%">

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false" title="Price" />
        </mx:verticalAxis>

        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="@date" title="Date" />
        </mx:horizontalAxis>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderer>
            <mx:AxisRenderer canDropLabels="{checkBox.selected}" />
        </mx:horizontalAxisRenderer>

        <!-- series -->
        <mx:series>
            <mx:HLOCSeries id="series1"
                    highField="@high"
                    lowField="@low"
                    openField="@open"
                    closeField="@close"/>
        </mx:series>
    </mx:HLOCChart>

</mx:Application>

View source is enabled in the following example.

Tagged as: canDropLabels