Flex Examples

The following example shows how you can use the showAllDataTips property on the Flex PieChart control to display all of the chart’s data tips at the same time, regardless of whether the user’s cursor is over the chart or not.

Full code after the jump.

View MXML

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

    <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:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="showAllDataTips:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:PieChart id="pieChart"
            dataProvider="{dp.product}"
            showAllDataTips="{checkBox.selected}"
            height="250"
            width="250">
        <mx:series>
            <mx:PieSeries id="pieSeries"
                    field="@data" />
        </mx:series>
    </mx:PieChart>

</mx:Application>

View source is enabled in the following example.