Flex Stacked Chart: Display custom dataTip total value

Once you use a custom dataTip (dataTipFunction = “myDataTipFunction”) in a stacked chart, its not possible to directly access the total value of items in a column/bar.

This means that your custom dataTips will be without the % and total values that appear (as a default) on Flex stacked charts. This problem is now solved in a simple manner!

Custom DataTip - with % and Total

The function below gets around this problem, and gives one access to a custom dataTip’s ‘total’ value for stacked columns/bars. Complete mxml code is in the full article.

private function myDataTipFunction(hitData:HitData):String
{
	var itemsDictionary:Dictionary = new Dictionary();
	var total:Number = 0;

	//hitData.item holds name value pairs for each of the
	//dataProvider's rows(sales array in this case)
	for(var property:Object in hitData.item){
		itemsDictionary[property] = hitData.item[property];
	}

	// Have to get instance of hitData.element (a ColumnSeries) to
	// access element.series.stacker.series which holds the yField
	// values e.g. toys. Note: needed as hitData.element.
	// series.stacker is not accessible directly.
	var series:ColumnSeries = ColumnSeries(hitData.element);
	for( var key:Object in itemsDictionary)
	{
		for( var i:int = 0; i < series.stacker.series.length; i++){
			// Need to check that we only add yField values, as "period-Q1"
			// is also in hitData.item along with "toys-900" etc
			if(series.stacker.series[i].yField == key.toString()){
				total += itemsDictionary[key];
			}
		}
	}

    var item:ColumnSeriesItem = ColumnSeriesItem(hitData.chartItem);
    var quarter:Object = xAxis.formatForScreen(item.xValue);
    var value:Number = Number(item.yValue) - Number(item.minValue);
    // want 2 decimal place precision
    var percent:Number = Math.round(value / total * 1000) / 10;

    return  "<b>" + series.displayName + "</b>\n" +
			"<b>------------------</b>\n" +
			"" + quarter + "\n" +
			"<b>------------------</b>\n" +
			"<b>Value:\t\t</b>" + value + " \n" +
			"<b>Percent:\t</b>" + percent + "% \n" +
			"<b>Total:\t\t</b>" + total;
}

For the full .mxml example class code…..