The following example shows how you can remove the default drop shadow from a Flex PieChart control by setting the filters property to an empty array in the PieSeries tag, as seen in the following snippet:

<mx:PieChart id="pieChart"
        dataProvider="{dp.product}"
        height="250"
        width="100%">
    <mx:series>
        <mx:PieSeries id="pieSeries"
                field="@data"
                filters="[]" />
    </mx:series>
</mx:PieChart>

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/05/removing-the-drop-shadow-from-a-flex-piechart-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Button;
 
            private var defaultFilters:Array;
 
            private function init():void {
                defaultFilters = pieSeries.filters;
            }
 
            private function toggleFilters(evt:Event):void {
                if (Button(evt.currentTarget).selected) {
                    pieSeries.filters = [];
                } else {
                    pieSeries.filters = defaultFilters;
                }
            }
        ]]>
    </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:ApplicationControlBar dock="true">
        <mx:Button label="Toggle filters"
                toggle="true"
                change="toggleFilters(event);" />
    </mx:ApplicationControlBar>
 
    <mx:PieChart id="pieChart"
            dataProvider="{dp.product}"
            height="250"
            width="100%">
        <mx:series>
            <mx:PieSeries id="pieSeries"
                    field="@data" />
        </mx:series>
    </mx:PieChart>
 
</mx:Application>

View source is enabled in the following example.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

10 Responses to Removing the drop shadow from a Flex PieChart control

  1. ArneO says:

    Many thanks for this. It brought me back to the Adobe pie chart!
    But, there“s one problem left: if you use multiple series in one chart, there is a gap (for the shadow?) left between the radii. Any idea?

    Kind regards
    _____
    Arne

  2. peterd says:

    Arne,

    Can you please file a bug at http://bugs.adobe.com/flex/ and include some sample code and somebody will take a look.

    Peter

  3. Ashish says:

    Hi Peter,
    I am facing the same issue, but could not find the bug filed for this. Could you please help?
    Br, Ashish

  4. thijs says:

    Thanks, works great with Flex 3.

  5. digsafe says:

    Could you please create a tutorial that shows how to modify the dropshadow(i.e. angle, distance, strength, etc.)

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree