Rotating labels in a Flex chart axis using the labelRotation style

The following example shows how you can rotate the vertical and horizontal axis renderer’s label by setting the labelRotation style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/15/rotating-labels-in-a-flex-chart-axis-using-the-labelrotation-style/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Arial");
            font-family: EmbeddedArial;
        }

        BarChart {
            font-family: EmbeddedArial;
        }
    </mx:Style>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
                <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
                <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
                <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
                <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormHeading label="labelRotation" />
            <mx:FormItem label="horizontalAxisRenderer:">
                <mx:HSlider id="horizontalLabelRotation"
                        minimum="-90"
                        maximum="90"
                        value="0"
                        liveDragging="true"
                        snapInterval="10"
                        tickInterval="10" />
            </mx:FormItem>
            <mx:FormItem label="verticalAxisRenderer:">
                <mx:HSlider id="verticalLabelRotation"
                        minimum="-90"
                        maximum="90"
                        value="0"
                        liveDragging="true"
                        snapInterval="10"
                        tickInterval="10" />
            </mx:FormItem>
        </mx:Form>

        <mx:Spacer width="100%" />

        <mx:Legend dataProvider="{barChart}"/>
    </mx:ApplicationControlBar>

    <mx:BarChart id="barChart"
             showDataTips="true"
             dataProvider="{arrColl}"
             width="100%"
             height="100%">

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="name" title="Player"/>
        </mx:verticalAxis>

        <!-- vertical axis renderer -->
        <mx:verticalAxisRenderer>
            <mx:AxisRenderer labelRotation="{verticalLabelRotation.value}" />
        </mx:verticalAxisRenderer>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderer>
            <mx:AxisRenderer labelRotation="{horizontalLabelRotation.value}" />
        </mx:horizontalAxisRenderer>

        <!-- series -->
        <mx:series>
            <mx:BarSeries id="obpSeries"
                    yField="name"
                    xField="obp"
                    displayName="obp" />
            <mx:BarSeries id="slgSeries"
                    yField="name"
                    xField="slg"
                    displayName="slg" />
            <mx:BarSeries id="avgSeries"
                    yField="name"
                    xField="avg"
                    displayName="avg" />
        </mx:series>
    </mx:BarChart>

</mx:Application>

View source is enabled in the following example.

Tagged as: horizontalAxisRenderer, labelRotation, verticalAxisRenderer