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"/>

5 Responses to “Customize Tooltip in ColumnChart”

  1. This is the right weblog for anyone who wants to search out out about this topic. You realize a lot its virtually exhausting to argue with you (not that I really would need匟aHa). You definitely put a brand new spin on a topic thats been written about for years. Nice stuff, just great!

    • ajeethboaz says:

      Thank you…

    • Dede says:

      Por favor, eu ja tenho as formulas para mogaentn to grafico waterfall mas nao sei como fazer para que as cores das barras mudem automaticamente de acordo com o sinal da variae7e3o.Qual seria o codigo VBA que eu devo utilizar para fazer com que as barras mudem de cor automaticamente?Obrigado

    • Kamila says:

      If you wrote an article about life we’d all reach elinghetnment.

  2. Fachri says:

    AIR-to-Desktop Drag-and-Drop: Two Simple Utility Classes Christophe Coenraet wrote: One of the exciting fauteres of AIR is that it enables drag-and-drop between your Flex applications and the desktop: For example, you could drag a chart from your Flex application and drop it on your desktop as a JPG, or directly inside a Word document. Similarly, you could grab some rows from a Datagrid and drop them on your desktop as an XLS file, or directly inside an Excel spreadsheet.


Get every new post delivered to your Inbox

Join other followers