Setting a ColumnChart control’s item roll over color and item selection color in Flex

The following code shows you how you can customize the item roll over color and item selection color in a Flex ColumnChart control by setting the itemRollOverColor and itemSelectionColor styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/24/setting-a-columnchart-controls-item-roll-over-color-and-item-selection-color-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return numberFormatter.format(item);
            }
        ]]>
    </mx:Script>

    <mx:NumberFormatter id="numberFormatter" precision="3" />

    <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:ColumnChart id="columnChart"
            showDataTips="true"
             dataProvider="{arrColl}"
             selectionMode="single"
             itemRollOverColor="haloSilver"
             itemSelectionColor="haloBlue"
             width="100%"
             height="100%">

        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca"
                    categoryField="name" />
        </mx:horizontalAxis>

        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false"
                    minimum="0.200"
                    maximum="0.310"
                    labelFunction="linearAxis_labelFunc" />
        </mx:verticalAxis>

        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}"
                    canDropLabels="false" />
        </mx:horizontalAxisRenderers>

        <mx:series>
            <mx:ColumnSeries id="columnSeries"
                    xField="name"
                    yField="avg"
                    displayName="avg" />
        </mx:series>

        <mx:seriesFilters>
            <mx:Array />
        </mx:seriesFilters>

    </mx:ColumnChart>

</mx:Application>

View source is enabled in the following example.

You can also set the itemSelectionColor and itemRollOverColor styles using CSS, as seen in the following snippet:

<mx:Style>
    ColumnChart {
        itemRollOverColor: haloSilver;
        itemSelectionColor: haloBlue;
    }
</mx:Style>

Or, you can set the styles using ActionScript, as seen in the following snippet:

columnChart.setStyle("itemRollOverColor", "haloSilver");
columnChart.setStyle("itemSelectionColor", "haloBlue");

Tagged as: itemRollOverColor, itemSelectionColor, selectionMode