Removing the default drop shadow from a LineChart chart in Flex

The following example shows how you can remove the default drop shadow from a LineChart chart in Flex by setting the seriesFilters property, as seen in the following snippets:

<mx:LineChart id="lineChart"
        showDataTips="true"
        dataProvider="{dp}"
        width="100%"
        height="100%"
        seriesFilters="[]">

    <!-- . . . -->

</mx:LineChart>
<mx:LineChart id="lineChart"
        showDataTips="true"
        dataProvider="{dp}"
        width="100%"
        height="100%">

    <!-- series filters -->
    <mx:seriesFilters>
        <mx:Array />
    </mx:seriesFilters>

    <!-- . . . -->

</mx:LineChart>

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/13/removing-the-default-drop-shadow-from-a-linechart-chart-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init(evt:Event):void {
                var chart:LineChart = evt.currentTarget as LineChart;
                seriesFilterArr = chart.seriesFilters;
            }

            private function checkBox_click(evt:MouseEvent):void {
                var len:uint = lineChart.seriesFilters.length;
                if (len > 0) {
                    lineChart.seriesFilters = [];
                } else {
                    lineChart.seriesFilters = seriesFilterArr;
                }
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/27/2007" open="40.38" close="40.81" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/1/2007" open="40.29" close="39.58" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:Array id="seriesFilterArr" />

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="toggle series filters:"
                labelPlacement="left"
                selected="false"
                click="checkBox_click(event);" />
    </mx:ApplicationControlBar>

    <mx:LineChart id="lineChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%"
            creationComplete="init(event);">

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false" title="Price" />
        </mx:verticalAxis>

        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca" categoryField="@date" title="Date" />
        </mx:horizontalAxis>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}" canDropLabels="true" />
        </mx:horizontalAxisRenderers>

        <!-- series -->
        <mx:series>
            <mx:LineSeries yField="@close" form="curve" displayName="Close" />
            <mx:LineSeries yField="@open" form="curve" displayName="Open" />
        </mx:series>

    </mx:LineChart>

</mx:Application>

View source is enabled in the following example.

By default, the seriesFilters property contains an array with a single DropShadowFilter with the following properties:
    alpha = 1
    angle = 45
    blurX = 4
    blurY = 4
    color = 0
    distance = 4
    hideObject = false
    inner = false
    knockout = false
    quality = 1
    strength = 1

5 thoughts on “Removing the default drop shadow from a LineChart chart in Flex

  1. Sree,

    Try toggling the “toggle series filters” checkbox in the upper-left corner to enable/disable the drop shadow. Heh, I had to actually double-check the entry title and reread my own code. For a minute I thought I had uploaded the wrong SWF.

    Peter

  2. Hi, how can the shadow be removed programmatically from a lineseries?
    I try to pass an empty array in the filters option, but does not seem
    to work..any ideas? thanks

    var s:LineSeries = new LineSeries();
    s.filters = ??

    thanks

  3. michael,

    I think you need to set the seriesFilters property to an empty array and then manage the filters properties manually for each of the LineSeries objects.

    Something like the following:

    <?xml version="1.0"?>
    <!-- http://blog.flexexamples.com/2007/11/13/removing-the-default-drop-shadow-from-a-linechart-chart-in-flex/ -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white"
            creationComplete="init();">
    
        <mx:Script>
            <![CDATA[
                import mx.charts.series.LineSeries;
                import mx.charts.AxisRenderer;
                import mx.charts.CategoryAxis;
                import mx.charts.LinearAxis;
                import mx.charts.LineChart;
    
                private var lineChart:LineChart;
    
                private function init():void {
                    // vertical axis
                    var linearAxis:LinearAxis = new LinearAxis();
                    linearAxis.baseAtZero = false;
                    linearAxis.title = "Price";
    
                    // horizontal axis
                    var categoryAxis:CategoryAxis = new CategoryAxis();
                    categoryAxis.categoryField = "@date";
                    categoryAxis.title = "Date";
    
                    // horizontal axis renderer
                    var axisRenderer:AxisRenderer = new AxisRenderer();
                    axisRenderer.axis = categoryAxis;
                    axisRenderer.setStyle("canDropLabels", true);
    
                    // series 1
                    var series1:LineSeries = new LineSeries();
                    series1.yField = "@close";
                    series1.displayName = "Close";
                    series1.setStyle("form", "curve");
                    series1.filters = [];
                    // series 2
                    var series2:LineSeries = new LineSeries();
                    series2.yField = "@open";
                    series2.displayName = "Open";
                    series2.setStyle("form", "curve");
                    series2.filters = [new GlowFilter()];
    
                    lineChart = new LineChart();
                    // lineChart.seriesFilters = [];
                    lineChart.showDataTips = true;
                    lineChart.dataProvider = dp;
                    lineChart.percentWidth = 100;
                    lineChart.percentHeight = 100;
                    lineChart.verticalAxis = linearAxis;
                    lineChart.horizontalAxis = categoryAxis;
                    lineChart.horizontalAxisRenderers = [axisRenderer];
                    lineChart.series = [series1, series2];
                    addChild(lineChart);
    
                    seriesFilterArr = lineChart.seriesFilters;
                }
    
                private function checkBox_click(evt:MouseEvent):void {
                    var len:uint = lineChart.seriesFilters.length;
                    if (len > 0) {
                        lineChart.seriesFilters = [];
                    } else {
                        lineChart.seriesFilters = seriesFilterArr;
                    }
                }
            ]]>
        </mx:Script>
    
        <mx:XMLListCollection id="dp">
            <mx:source>
                <mx:XMLList>
                    <quote date="8/27/2007" open="40.38" close="40.81" />
                    <quote date="8/24/2007" open="40.5" close="40.41" />
                    <quote date="8/23/2007" open="40.82" close="40.6" />
                    <quote date="8/22/2007" open="40.4" close="40.77" />
                    <quote date="8/21/2007" open="40.41" close="40.13" />
                    <quote date="8/20/2007" open="40.55" close="40.74" />
                    <quote date="8/17/2007" open="40.18" close="40.32" />
                    <quote date="8/16/2007" open="39.83" close="39.96" />
                    <quote date="8/15/2007" open="40.22" close="40.18" />
                    <quote date="8/14/2007" open="41.01" close="40.41" />
                    <quote date="8/13/2007" open="41" close="40.83" />
                    <quote date="8/10/2007" open="41.3" close="41.06" />
                    <quote date="8/9/2007" open="39.9" close="40.75" />
                    <quote date="8/8/2007" open="39.61" close="40.23" />
                    <quote date="8/7/2007" open="39.08" close="39.42" />
                    <quote date="8/6/2007" open="38.71" close="39.38" />
                    <quote date="8/3/2007" open="39.47" close="38.75" />
                    <quote date="8/2/2007" open="39.4" close="39.52" />
                    <quote date="8/1/2007" open="40.29" close="39.58" />
                </mx:XMLList>
            </mx:source>
        </mx:XMLListCollection>
    
        <mx:Array id="seriesFilterArr" />
    
        <mx:ApplicationControlBar dock="true">
            <mx:CheckBox id="checkBox"
                    label="toggle series filters:"
                    labelPlacement="left"
                    selected="false"
                    click="checkBox_click(event);" />
        </mx:ApplicationControlBar>
    
    </mx:Application>
    

    Hope that helps,
    Peter

  4. Great post. My boss doesn’t like the shadow and it took me an hour to try to remove it and finally I got it here.

Comments are closed.