Aligning data in a Flex LineChart control to horizontal and vertical tick marks

The following example shows how you can align the tick marks along the vertical and horizontal axis using the horizontalTickAligned and verticalTickAligned styles in the GridLines class, as seen in the following snippet:

<mx:GridLines direction="both"
    horizontalTickAligned="false"
    verticalTickAligned="false">

    ...

</mx:GridLines>

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/19/aligning-data-in-a-flex-linechart-control-to-horizontal-and-vertical-tick-marks/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.charts.CategoryAxis;
            import mx.charts.chartClasses.IAxis;

            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return currFormatter.format(item);
            }

            private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
                var datNum:Number = Date.parse(item);
                var tempDate:Date = new Date(datNum);
                return tempDate.date.toString();
            }
        ]]>
    </mx:Script>

    <mx:CurrencyFormatter id="currFormatter" precision="2" />

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/1/2007" open="40.29" close="39.58" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/27/2007" open="40.38" close="40.81" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="direction:">
                <mx:ComboBox id="comboBox">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="both" />
                            <mx:Object label="horizontal" />
                            <mx:Object label="vertical" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="horizontalTickAligned:">
                <mx:CheckBox id="hCheckBox" selected="true" />
            </mx:FormItem>
            <mx:FormItem label="verticalTickAligned:">
                <mx:CheckBox id="vCheckBox" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LineChart id="lineChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%">

        <!-- background elements -->
        <mx:backgroundElements>
            <mx:GridLines direction="{comboBox.selectedItem.label}"
                    horizontalTickAligned="{hCheckBox.selected}"
                    verticalTickAligned="{vCheckBox.selected}">
                <mx:horizontalFill>
                    <mx:SolidColor color="haloBlue" alpha="0.2" />
                </mx:horizontalFill>
                <mx:horizontalAlternateFill>
                    <mx:SolidColor color="haloSilver" alpha="0.2" />
                </mx:horizontalAlternateFill>
                <mx:verticalFill>
                    <mx:SolidColor color="haloBlue" alpha="0.2" />
                </mx:verticalFill>
                <mx:verticalAlternateFill>
                    <mx:SolidColor color="haloSilver" alpha="0.2" />
                </mx:verticalAlternateFill>
            </mx:GridLines>
        </mx:backgroundElements>

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

        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca"
                    categoryField="@date"
                    title="August 2007"
                    labelFunction="categoryAxis_labelFunc" />
        </mx:horizontalAxis>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}" canDropLabels="true" />
        </mx:horizontalAxisRenderers>

        <!-- series -->
        <mx:series>
            <mx:LineSeries yField="@open" displayName="Open" />
            <mx:LineSeries yField="@close" displayName="Close" />
        </mx:series>

        <!-- series filters -->
        <mx:seriesFilters>
            <mx:Array />
        </mx:seriesFilters>
    </mx:LineChart>

</mx:Application>

View source is enabled in the following example.

Tagged as: horizontalTickAligned, verticalTickAligned