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 aem56 dam logo

Setting Images in DAM

All images are loaded into the DAM (Digital Assets Management). To upload an image, you’ll need to use your Activator login. From the tree, click +Digital Assets Find the way to the tree to suitable folder (AAFP, images, ANN,...
by Nouman Naveed


Apache Flex 4.10.0 Available

Here comes Apache Flex 4.10. This project, the all-volunteer group of developers, and stakeholders in the development framework, today announced the release of Apache Flex 4.10.0. This release makes some important improvements ...
by Nouman Naveed

aem 5.6.1 features pic

Many New Features in AEM 5.6.1

AEM 5.6.1 is a easy to use, unified experience management collection for marketers in the digital sphere to use in creating, managing, and delivering unique online experiences that are brand-entered and increase demand across d...
by Nouman Naveed


Adobe CQ5 WEM, SOCO, Tagging, DAM

What’s New in CQ 5.6

1: It’s called AEM (Adobe Experience Manager) now Though I guess not that essential, it’s going to be exciting if the name is going to attach – there were other occasions where Adobe tried to rename this result and at the...
by Nouman Naveed

content management for web and mobile

Content Management for Web & Mobile

Adobe CQ is a WCM and gives a better browser-based user interface. It is best suitable for business and IT for creating interactive, multimedia rich, multichannel consumer understanding to make an engaging digital existence, ma...
by Nouman Naveed



Be the first to comment!

Leave a Reply

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