Flex Examples

The following example shows how you can position callouts in a PieChart control’s pie series by setting the labelPosition style.

Full code after the jump.

View MXML

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

    <mx:Script>
        <![CDATA[
            private function pieSeries_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {
                return item.@label + ": " + item.@data + " (" + percentValue.toFixed(2) + "%)";
            }
        ]]>
    </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:Array id="labelPositionArr">
        <mx:Object label="callout" />
        <mx:Object label="inside" />
        <mx:Object label="insideWithCallout" />
        <mx:Object label="none" />
        <mx:Object label="outside" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="labelPosition:" />
        <mx:ComboBox id="comboBox"
                dataProvider="{labelPositionArr}" />
    </mx:ApplicationControlBar>

    <mx:PieChart id="pieChart"
            dataProvider="{dp.product}"
            height="250"
            width="100%">
        <mx:series>
            <mx:PieSeries id="pieSeries"
                    field="@data"
                    labelPosition="{comboBox.selectedItem.label}"
                    labelFunction="pieSeries_labelFunc" />
        </mx:series>
    </mx:PieChart>

</mx:Application>

View source is enabled in the following example.

According to the Flex 3 documentation for the PieSeries class, the valid values for the labelPosition style are:

“none” - Do not draw labels.
“outside” - Draw labels around the boundary of the pie.
“callout” - Draw labels in two vertical stacks on either side of the pie. The pie is shrunk if necessary to make room for the labels (see maxLabelRadius). Draw key lines from each label to the associated wedge. Shrink labels as necessary to fit the space provided.
“inside” - Draw labels inside the chart, centered approximately seven tenths of the way along each wedge. Shrink labels to ensure that they do not interfere with each other. If labels are shrunk below the calloutPointSize property, remove them. When two labels overlap, Flex gives priority to labels for larger slices.
“insideWithCallout” - Draw labels inside the pie, but if labels are shrunk below a legible size, Flex converts them to callouts.