Removing the default drop shadow from a LineChart chart in Flex

5 Responses to Removing the default drop shadow from a LineChart chart in Flex

1. Sree says:

   December 12, 2007 at 3:21 am

   The example that you have displayed still shows the dropShadow … is this a player bug?

   Reply
2. peterd says:

   December 12, 2007 at 1:19 pm

   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

   Reply
3. michael says:

   February 24, 2008 at 9:54 am

   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

   Reply
4. peterd says:

   February 24, 2008 at 11:07 pm

   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

   Reply
5. Anonymous says:

   June 3, 2010 at 12:27 am

   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.

   Reply