Custom ColumnChart Labels using a Custom Item Renderer

The Charting components are usually very flexible and fit most of your needs, but sometimes they fail in the simplest of things.

For example, the other day I needed a basic ColumnChart for a business application I was working on. The request was that instead of mouse-over Data-Tips, for each column a small label would appear with its value. Sounds simple enough, right?

At first for the ColumnSeries I set labelPosition to "inside",

<br /> <mx:ColumnChart id="cs" showDataTips="false" dataProvider="{arrColl}"> <br /> <mx:horizontalAxis><br /> <mx:CategoryAxis id="ca" categoryField="name" /><br /> </mx:horizontalAxis> <br /> <mx:verticalAxis><br /> <mx:LinearAxis baseAtZero="false" labelFunction="linearAxis_labelFunc" /><br /> </mx:verticalAxis> <br /> <mx:horizontalAxisRenderers><br /> <mx:AxisRenderer axis="{ca}" canDropLabels="false" /><br /> </mx:horizontalAxisRenderers> <br /> <mx:series><br /> <mx:ColumnSeries id="columnSeries" xField="name" yField="avg" displayName="avg" labelPosition="inside"/><br /> </mx:series> <br /> <mx:seriesFilters><br /> <mx:Array /><br /> </mx:seriesFilters> <br /> </mx:ColumnChart> <br />
and I got this: