Creating a linear gradient fill on a ColumnChart control’s column series in Flex

The following example shows how you can create a linear gradient fill for a ColumnSeries in Flex

<? xml version="1.0" ?>
<!--  http://blog.flexexamples.com/2007/11/20/creating-a-linear-gradient-fill-on-a-columnchart-controls-column-series-in-flex/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="vertical"
        verticalAlign ="middle"
        backgroundColor ="white" >

     < mx:Script >
         <![CDATA[
            import mx.charts.chartClasses.IAxis;

            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return currencyFormatter.format(item);
            }

            private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
                var datNum:Number = Date.parse(item);
                var tempDate:Date = new Date(datNum);
                return dateFormatter.format(tempDate).toUpperCase();
            }
         ]]>
     </ mx:Script >

     < mx:DateFormatter  id ="dateFormatter"  formatString ="DD"   />
     < mx:CurrencyFormatter  id ="currencyFormatter"  precision ="2"   />

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

     < mx:ColumnChart  id ="columnChart"
            showDataTips ="true"
            dataProvider ="{dp}"
            width ="100%"
            height ="100%" >

         <!--  vertical axis  -->
         < mx:verticalAxis >
             < mx:LinearAxis  baseAtZero ="false"
                    labelFunction ="linearAxis_labelFunc"   />
         </ mx:verticalAxis >

         <!--  horizontal axis  -->
         < mx:horizontalAxis >
             < mx:CategoryAxis  id ="ca"
                    categoryField ="@date"
                    title ="August 2007"
                    labelFunction ="categoryAxis_labelFunc"   />
         </ mx:horizontalAxis >

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

         <!--  series  -->
         < mx:series >
             < mx:ColumnSeries  displayName ="Open"
                    xField ="@date"
                    yField ="@open" >
                 < mx:fill >
                     < mx:LinearGradient  id ="linearGradient" >
                         < mx:entries >
                             < mx:Array >
                                 < mx:GradientEntry  color ="red"
                                        ratio ="0.0"
                                        alpha ="1.0"   />
                                 < mx:GradientEntry  color ="black"
                                        ratio ="1.0"
                                        alpha ="1.0"   />
                             </ mx:Array >
                         </ mx:entries >
                     </ mx:LinearGradient >
                 </ mx:fill >
             </ mx:ColumnSeries >
         </ mx:series >

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

</ mx:Application >

By default, the gradient goes left-to-right, if you want to create a vertical gradient or 45° gradient (or any arbitrary number), you can set the angle property in the LinearGradient tag, as seen in the following snippet:

< mx:LinearGradient  id ="linearGradient"  angle ="90" >
     < mx:entries >
         < mx:Array >
             < mx:GradientEntry  color ="red"
                    ratio ="0.0"
                    alpha ="1.0"   />
             < mx:GradientEntry  color ="black"
                    ratio ="1.0"
                    alpha ="1.0"   />
         </ mx:Array >
     </ mx:entries >
</ mx:LinearGradient >