Creating a custom data tip function on a Flex PieChart control

The following example shows how you can create a custom data tip function on a PieChart control in Flex by specifying the dataTipFunction property in your PieChart control. This example also shows how you can make all the data tips visible at the same time in the pie chart by setting the showAllDataTips property to true.

If you set the showAllDataTips property to true in your PieChart control, the data tips would be visible regardless of whether the user’s cursor was over the pie chart or not, but in the following example we only set the showAllDataTips property to true when the user rolls their mouse over the pie chart, and set it back to false when the user rolls out of the pie chart. For more information, see “Displaying all data tips at once on a Flex PieChart control”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/04/creating-a-custom-data-tip-function-on-a-flex-piechart-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.charts.series.items.PieSeriesItem;
            import mx.charts.HitData;

            private function pieChart_rollOver(evt:MouseEvent):void {
                PieChart(evt.currentTarget).showAllDataTips = true;
            }

            private function pieChart_rollOut(evt:MouseEvent):void {
                PieChart(evt.currentTarget).showAllDataTips = false;
            }

            private function pieChart_dataTipFunction(item:HitData):String {
                var pSI:PieSeriesItem = item.chartItem as PieSeriesItem;
                return "<b>" + pSI.item.@label + "</b><br />" +
                        pSI.item.@data + " (<i>" +
                        pSI.percentValue.toFixed(2) + "%</i>)";
            }
        ]]>
    </mx:Script>

    <mx:XML id="dp">
        <products>
            <product label="Product 1" data="3" />
            <product label="Product 2" data="1" />
            <product label="Product 3" data="4" />
            <product label="Product 4" data="1" />
            <product label="Product 5" data="5" />
            <product label="Product 6" data="9" />
        </products>
    </mx:XML>

    <mx:PieChart id="pieChart"
            dataProvider="{dp.product}"
            dataTipFunction="pieChart_dataTipFunction"
            height="250"
            width="250"
            rollOver="pieChart_rollOver(event);"
            rollOut="pieChart_rollOut(event);">
        <mx:series>
            <mx:PieSeries id="pieSeries"
                    field="@data" />
        </mx:series>
    </mx:PieChart>

</mx:Application>

View source is enabled in the following example.