Flex Examples

The following example shows how you can create custom labels for a ColumnChart control’s ColumnSeries in Flex, as well as creating custom label functions for a linear axis and custom data tips for the ColumnChart control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/25/adding-custom-labels-to-a-flex-columnchart-controls-column-series/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.charts.ChartItem;
            import mx.charts.HitData;
            import mx.charts.chartClasses.IAxis;
            import mx.charts.chartClasses.Series;
            import mx.charts.series.ColumnSet;
            import mx.charts.series.items.ColumnSeriesItem;
            import mx.utils.StringUtil;

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

            private function columnChart_dataTipFunc(item:HitData):String {
                var cSI:ColumnSeriesItem = item.chartItem as ColumnSeriesItem;
                var col:String = ColumnSeries(item.element).yField;
                return StringUtil.substitute("<b>{0}</b><br>{1}: {2}", cSI.item.name, col, numberFormatter.format(cSI.item[col]));
            }

            private function columnSeries_labelFunc(chartItem:ChartItem, series:Series):String {
                var col:String = ColumnSeries(chartItem.element).yField;
                return numberFormatter.format(chartItem.item[col]);
            }
        ]]>
    </mx:Script>

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

    <mx:Array id="arr">
        <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:ApplicationControlBar dock="true">
        <mx:Legend dataProvider="{columnChart}" direction="horizontal" />
    </mx:ApplicationControlBar>

    <mx:ColumnChart id="columnChart"
            showDataTips="true"
            dataProvider="{arr}"
            dataTipFunction="columnChart_dataTipFunc"
            columnWidthRatio="0.9"
            type="stacked"
            width="100%"
            height="100%">

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

        <mx:verticalAxis>
            <mx:LinearAxis labelFunction="linearAxis_labelFunc" />
        </mx:verticalAxis>

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

        <mx:series>
            <mx:ColumnSeries id="avgSeries"
                    xField="name"
                    yField="avg"
                    displayName="Batting Average (AVG)"
                    labelPosition="inside"
                    labelFunction="columnSeries_labelFunc" />

            <mx:ColumnSeries id="obpSeries"
                    xField="name"
                    yField="obp"
                    displayName="On-base Percentage (OBP)"
                    labelPosition="inside"
                    labelFunction="columnSeries_labelFunc" />

            <mx:ColumnSeries id="slgSeries"
                    xField="name"
                    yField="slg"
                    displayName="Slugging Percentage (SLG)"
                    labelPosition="inside"
                    labelFunction="columnSeries_labelFunc" />
        </mx:series>

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

    </mx:ColumnChart>

</mx:Application>

View source is enabled in the following example.