Creating donut shaped Pie charts using the innerRadius style

The following example shows you how to use the innerRadius style to create donut shaped pie charts in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/13/creating-donut-shaped-pie-charts-using-the-innerradius-style/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {
                return item.name + ": " + '\n' + "AVG: " + item.avg;
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
                <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
                <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
                <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
                <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="innerRadius:" />
        <mx:HSlider id="slider"
                minimum="0"
                maximum="0.5"
                liveDragging="true" />
    </mx:ApplicationControlBar>

    <mx:PieChart id="chart"
            height="100%"
            width="100%"
            innerRadius="{slider.value}"
            showDataTips="true"
            dataProvider="{arrColl}" >
        <mx:series>
            <mx:PieSeries labelPosition="callout"
                    field="avg"
                    labelFunction="labelFunc">
                <mx:calloutStroke>
                    <mx:Stroke weight="0"
                            color="0x888888"
                            alpha="100"/>
                </mx:calloutStroke>
                <mx:radialStroke>
                    <mx:Stroke weight="0"
                            color="#FFFFFF"
                            alpha="20"/>
                </mx:radialStroke>
                <mx:stroke>
                    <mx:Stroke color="0"
                            alpha="20"
                            weight="2"/>
                </mx:stroke>
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>

</mx:Application>

View source is enabled in the following example.

Tagged as: innerRadius