July 30th, 2012

Custom DataTip Renderers for ColumnChart

More articles by »
Written by: Nouman Naveed

Flex provides many types of charts which allow raw data to show in meaningful format. ColumnChart component is one of the commonly used chart component in many flex applications. Customization of column chart datatip box is not allowed by simply setting some styles / properties. To customize the datatip box of column chart we need to create custom component based on <s:Group> container or other containers available in flex framework.

To show how customization of datatip box is done in Flex I have built a small example for you to implement in real time projects. Following is the code for my datatip renderer.

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Group  xmlns:fx=”″
          implements=”mx.core.IFlexDisplayObject, mx.core.IDataRenderer”
          xmlns:mx=”library://” width=”120″>
        [Event(name=”DataSelect”, type=””)]
            import flashx.textLayout.conversion.TextConverter;
            import flashx.textLayout.elements.TextFlow;
            import mx.charts.HitData;
            import mx.charts.series.items.ColumnSeriesItem;
            private var _data:HitData;
            private var _xValue:String;
            private var _yValue:String;
            private var _displayText:TextFlow;
            public function get data():Object
                // TODO Auto Generated method stub
                return null;
            public function set data(value:Object):void
                // HitData data from chart
                _data = value as HitData;
                // The display text used in datatip which comes in HTML format
                _displayText = TextConverter.importToFlow(_data.displayText, TextConverter.TEXT_FIELD_HTML_FORMAT);
                // HitData contains a reference to the ChartItem
                var item:ColumnSeriesItem = _data.chartItem as ColumnSeriesItem;
                // ChartItem xValue and yValue
                _xValue = String(item.xValue);
                _yValue = String(item.yValue);
            protected function button1_clickHandler(event:MouseEvent):void
                // TODO Auto-generated method stub
                var evt:Event=new Event(“DataSelect”,true,true);
    <s:Rect right=”0″ left=”0″ bottom=”0″ top=”0″>
            <s:DropShadowFilter blurX=”20″ blurY=”20″ alpha=”0.22″ distance=”5″ angle=”90″ knockout=”false” />
            <s:SolidColor color=”0x393939″/>
            <s:SolidColorStroke color=”0x1a1a19″  weight=”1″ alpha=”.2″ />
    <s:VGroup width=”100%” height=”100%” paddingTop=”10″ paddingRight=”10″ paddingBottom=”10″ paddingLeft=”10″>
        <s:RichEditableText textFlow=”{_displayText}” width=”100%” textAlign=”center” selectable=”false” editable=”false”/>

        <s:Button label=”Click me !” click=”button1_clickHandler(event)”/>
        <s:RadioButton groupName=”chartRadio” label=”Red”/>
        <s:RadioButton groupName=”chartRadio” label=”Green”/>
        <s:RadioButton groupName=”chartRadio” label=”Blue”/>
        <s:CheckBox label=”Male”/>
        <s:CheckBox label=”FeMale”/>


Notice that the Group container implements (  implements=”mx.core.IFlexDisplayObject, mx.core.IDataRenderer”) IDataRenderer class for our datatip renderer to function properly. Then we have added logic to receive data inside the renderer component and set data, xvalue & yvalue. This will allow us to receive data and send to other UI components in datatip renderer component. To use this component for <mx:ColumnChart> component set the dataTipRenderer property as dataTipRenderer=”chartRenderers.columnDataTripRenderer“.


<mx:ColumnChart id=”mychart” y=”14″ width=”600″ dataProvider=”{myLoginData}” horizontalCenter=”0″
                                showDataTips=”true” dataTipRenderer=”chartRenderers.columnDataTripRenderer”>

We are also formatting the text using TextConverter class. We have a possibility of using custom events in datatip renderer component and I have added here custom event for just demonstration purpose. Various components in this renderer component can dispatch events which can be handled in main application file.

About the Author

Nouman Naveed
My name is Mohammed Nouman Naveed. I work and play with Flash Platform technologies and has experience of 11 years. Consulting and Training is part of my job. I am Adobe Certified Instructor, Adobe User Group Manager, Adobe Certified Expert and Adobe Community Champion.



Adobe Flash Builder 4.7 Beta Available !

Recently Adobe released Adobe Flash Builder 4.7 beta which will support Adobe Flash 11.4 and Adobe AIR 3.4. It will also support Apache Flex 4.8 release. This version has improved workflow for iOS application development with s...
by Nouman Naveed


Using [inspectable] metatag

Every experienced Flex developer knows about [Bindable] & [Event] metatags. However, I was surprised to know that some developers don’t know the purpose of [inspectable] metatag. Here I am going to discuss purpose of ...
by Nouman Naveed

AIR adobe certified

Get Adobe Certified

During my recent assignment client was asking many questions on certification process. Sotoday I have decided to add some light on how certification is acquired to make you proud.There are many quality resources already on the ...
by Nouman Naveed


adobe flex custom event

Using Custom Events in Adobe Flex

Using Flex is very easy and there are many features which will allow you to make communication between custom components easy. And Custom Events capability is one of the great facility of exchanging data between custom componen...
by Nouman Naveed

adobe flex modules

Using Flex Moduls in your Application

Increasing application performance is very critical for anyone who is building mid-size to large application. It is seen in many applications that everything you have in your application is loaded on start-up. This loading of a...
by Nouman Naveed



Be the first to comment!

Leave a Reply

Your email address will not be published. Required fields are marked *