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");

3 thoughts on “Setting a ColumnChart control’s item roll over color and item selection color in Flex

  1. Is there a way to manually set the selected chart column? I have a ColumnChart with a column for each user. The user that is logged in, their column in the chart I would like to be pre-selected so the different color is applied on creation. Is this possible? If so how?

  2. Sorry about that, I was trying to find a property on the ColumnChart tag to set the selected but I was rather slow to not realize that the property/properties I’m looking for is on the ColumnSeries tag (selectedIndex, selectedItem, selectedItems, etc.). Thanks for the awesome examples! I find this far easier to find the answers I need.

  3. Is it possible to set itemRollOverColor and itemSelectionColor for individual series? Is it possible to do something similar for individual wedges of a pie chart? If these things are possible, I would appreciate any instructions you can give me. Thanks.

Comments are closed.