Customize Tooltip in ColumnChart

The datatTipFunction here helps in displaying a yValue and its yName along with the DisaplayName, it can be be further customized based on the needs of the information to be displayed.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx=""
			import mx.collections.ArrayCollection;
			public var dpac:ArrayCollection = new ArrayCollection ([
				{ date:"01/01/2006", cash:50000,
					stocks:198192, retirement:130101,
					home:750000, other:19148 },
				{ date:"02/01/2006", cash:50000,
					stocks:210309, retirement:143707,
					home:760000, other:19493 },
				{ date:"03/01/2006", cash:50000,
					stocks:238992, retirement:169529,
					home:770000, other:19933 },
				{ date:"04/01/2006", cash:50000,
					stocks:292269, retirement:242596,
					home:770000, other:21445 }]);
			import mx.charts.series.items.ColumnSeriesItem;
			import mx.charts.series.ColumnSeries;
			import mx.charts.HitData;
			import mx.collections.ArrayCollection;
			private function myDataTipFunction(hitData:HitData):String
				var series:ColumnSeries = ColumnSeries(hitData.element);	
				var item1:ColumnSeriesItem = ColumnSeriesItem(hitData.chartItem);
				var date:Object =;
				var value:Number = Number(item1.yValue);
				return  "<b>" + series.displayName + "</b>\n" +
					"<b>------------------</b>\n" +
					"<b>Date:\t\t</b>" + date + " \n" +
					"<b>Count:\t\t</b>" +series.displayName+":"+ value + " \n";
	<mx:Legend dataProvider="{otherDashGraphCE}" direction="vertical" height="20" right="0"/>
	<mx:ColumnChart dataProvider="{dpac}"
					width="100%" height="90%" horizontalCenter="0"
					bottom="15" dataTipFunction="myDataTipFunction">
			<mx:CategoryAxis  categoryField="date"/>
			<mx:ColumnSeries displayName="cash"  yField="cash"/>
			<mx:ColumnSeries displayName="stocks"  yField="stocks"/>
			<mx:ColumnSeries displayName="retirement"  yField="retirement"/>
			<mx:ColumnSeries displayName="home"  yField="home"/>
			<mx:ColumnSeries displayName="other"  yField="other"/>

Tags: ,

About Ajeeth Boaz

I am a freelance photographer you can find my clicks @ I am a Developer by profession, I like sharing my experience through blogs you can find it @

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: