Adding custom labels to a Flex ColumnChart control’s column series

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.

19 thoughts on “Adding custom labels to a Flex ColumnChart control’s column series

  1. Sorry, I’ve just had some problems with my Internet and FTP at home so I haven’t been able to upload the SWFs. I’ll go back tonight and try and add the missing SWFs.

    Peter

  2. This sample it’s for flex 2 or flex 3, because in flex 2 I got a problemn with the labelposition=”inside” in column series. Could you help me with that, please ?
    Sample Code:

    problem: “Cannot resolve attribute ‘labelPosition’ for component mx.charts.series.ColumnSeries ”
    :(

  3. First of all, thank you for posting Flex code snippets and examples. For a Flex newbie like me, this is awesome stuff.

    And please keep it up. I’ll be stopping by here regularly.

  4. Hi thanks, fort your work! But I have one question – do you know how i can access the total value of a stack in the datatipfunction?

  5. I love people who ask for help on blogs, read the docs, read the source, try a Google search why don’t you.

    It’s even more fun when they ask totally unrelated questions. Luv it.

    Smoted

  6. Have you had any problems with charts when only 1 col is the chart.

    The code below work but will not change the a chart with on one col

    can you help

  7. Hi everybody I think that this examples are very helpful, I have a problem,I want to change the order of the legend in a Stacked Column Chart for the color have an order like the stacked char, thanks.

  8. but my column chart type is overlaid, how can we set the lable position in it? and can we draw a chart with more than 3 stacks and one line chart?

  9. Can I set the data label inside each column and show it vertically. I tried to use the showLabelVertically=”true” but is not working. Im using flex 3

    Thanks

  10. How would I take the above example with the data embedded inside the columns and apply styles/formatting to it such as as a drop shadow. I’ve stumbled upon how to apply a drop shadow to the column itself but not to the actual text that is inside of it.

  11. Hi
    Any body can help me in this :
    Is there any way that i can keep a check on items i want to display in legend (based on some condition , lets say if data is coming 0 throughout for particular series and i have multiple series in my graph .I want only those series to be shown in legend whose data is not 0)
    In case i am dynamically providing dataprovider to legend i.e( legend.dataProvider = myChart).

    Thanks
    Varun

  12. If the stack contains some large and many small items, can you advise if it is possible to show the labels only for the large items. If data labels are shown for the small items then I find that they just sit on top of each other!

  13. Hi Peter,

    I have stacked column chart and legend has to be dynamic.
    graphXML values are comin from DB, So it may vary
    for(var n:int = 0; n < graphXML.length; n++)
    {
    columnSeries.yField = seriesDetails[n].YField;
    columnSeries.displayName = seriesDetails[n].displayName;
    }
    this is sought of static, not dynamic
    Facing lots of problem.
    Please reply asap.

    Thank U

Comments are closed.