Removing the drop shadow from a Flex PieChart control

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.

10 thoughts on “Removing the drop shadow from a Flex PieChart control

  1. 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. Hi Peter,
    I am facing the same issue, but could not find the bug filed for this. Could you please help?
    Br, Ashish

    1. ok apparently html formatting won’t let me copy and paste. Lemme try this;
      <mx:filters >
      <s:DropShadowFilter
      distance=”3″ color=”0x333333″ alpha=”.9″ angle=”90″ blurX=”15″
      blurY=”15″
      />
      </mx:filters >

Comments are closed.