title: How to draw Color Bands in Flex Chart?
body: <p>I want to draw a custom background in my flex chart with vertical axis is linear and horizontal axis is category. In background i want to shade the regions according to data given by user.
  I tried CartesianDataCanvas and gridlines in chart backgroundelements but not getting a good solution. Anyone have an idea? i prefer using script without mxml. 
  Thanks in advance..</p>
  
  <p>I am adding my code to show the issue i faced while using CartesianDataCanvas. It is working perfectly in Area chart, but i want to draw in Bubble chart. As bubble series is not starting from the begining of horizontal category axis, CartesianDataCanvas start drawing from the mid point of the first bubble. But i am trying to draw the rectangle in the whole width of chart.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" &gt;
  
  
      &lt;fx:Script&gt;&lt;![CDATA[
          import mx.charts.ChartItem;
          import mx.charts.LinearAxis;
          import mx.charts.chartClasses.CartesianCanvasValue;
          import mx.charts.chartClasses.CartesianTransform;
          import mx.charts.series.items.ColumnSeriesItem;
          import mx.collections.ArrayCollection;
          import mx.containers.Box;
          import mx.containers.HBox;
          import mx.controls.Alert;
          import mx.core.INavigatorContent;
          import mx.events.FlexEvent;
  
          [Bindable]
          public var profits:ArrayCollection = new ArrayCollection([
              {Month:'jan', Profit:130},
              {Month:'feb', Profit:75},
              {Month:'mar', Profit:110},
              {Month:'apr', Profit:300}
          ]);
          [Bindable]
          public var ratios:Array=['25','25','25','50'];
          [Bindable]
          public var colors:Array=['0xff0000','0x00ff00','0x0000ff','0xc0c0c0']
          private function draw():void {
              canvas.clear();
              canvas2.clear();
              if(colors.length==ratios.length){
                  var canvasWidth = canvas.width;
                  var canvasHeight = canvas.height;
                  var sumRatio:Number=getSum(ratios);
                  var nextMax:Number=0;
                  for(var j:int=0, colnum:int=colors.length-1;j&lt;colors.length;j++,colnum--){
                      canvas.beginFill(uint(colors[colnum]));
                      canvas2.beginFill(uint(colors[colnum]));
                      var minPt:Array;
                      var minimumPoint:Point;
                      if(j==0){
                          minimumPoint=new Point(0,0);
  
                      }else{
                          minimumPoint=new Point(0, canvasHeight*nextMax);
                      }
                      minPt= canvas.localToData(minimumPoint);
                      var division:Number=Number(ratios[colnum])/sumRatio;
                      var maxPt:Array = canvas.localToData(new Point(canvasWidth,minimumPoint.y+canvasHeight*division));
                      nextMax+=division;
                      canvas.drawRect(minPt[0], maxPt[1], maxPt[0], minPt[1]);
                      canvas.endFill();
                      canvas2.drawRect(minPt[0], maxPt[1], maxPt[0], minPt[1]);
                      canvas2.endFill();
                  }
  
              }
  
  
          }
  
          private function getSum(array:Array):Number{
              var sum:Number=0;
              for(var i:int=0;i&lt;array.length;i++){
                  if(!isNaN(Number(array[i]))){
                      sum+=Number(array[i]);
                  }
              }
              return sum;
          }
  
  
      ]]&gt;&lt;/fx:Script&gt;
      &lt;s:HGroup&gt;
  
  
              &lt;mx:AreaChart id="myChart"  showDataTips="true"
                            dataProvider="{profits}" 
                            selectionMode="single" creationComplete="draw()"
                            &gt;
                  &lt;mx:annotationElements&gt;
                      &lt;mx:CartesianDataCanvas id="canvas" alpha="0.2" includeInRanges="true"/&gt;
                  &lt;/mx:annotationElements&gt;
  
                  &lt;mx:horizontalAxis&gt;
                      &lt;mx:CategoryAxis  
                          dataProvider="{profits}" 
                          categoryField="Month"
                          /&gt;
                  &lt;/mx:horizontalAxis&gt;
  
                  &lt;mx:series&gt;
                      &lt;mx:AreaSeries
                          id="series1"
                          xField="Month" 
                          yField="Profit" 
                          displayName="Profit"
                          selectable="true" 
                          &gt;
  
                      &lt;/mx:AreaSeries&gt;
                  &lt;/mx:series&gt;
              &lt;/mx:AreaChart&gt;
              &lt;mx:Legend dataProvider="{myChart}"/&gt;
          &lt;mx:BubbleChart id="mybubChart"  showDataTips="true"
                          dataProvider="{profits}" 
                          selectionMode="single" creationComplete="draw()"
                          &gt;
              &lt;mx:annotationElements&gt;
                  &lt;mx:CartesianDataCanvas id="canvas2" alpha="0.2" includeInRanges="true"/&gt;
              &lt;/mx:annotationElements&gt;
              &lt;mx:horizontalAxis&gt;
                  &lt;mx:CategoryAxis  
                      dataProvider="{profits}" 
                      categoryField="Month"
                      /&gt;
              &lt;/mx:horizontalAxis&gt;
              &lt;mx:series&gt;
                  &lt;mx:BubbleSeries
                      id="series2"
                      xField="Month" 
                      yField="Profit" 
                      radiusField="Profit"
                      displayName="Profit"
                      selectable="true" 
                      &gt;
                      &lt;mx:fill&gt;
                          &lt;mx:SolidColor color="0x663399"/&gt;
                      &lt;/mx:fill&gt;
                  &lt;/mx:BubbleSeries&gt;
              &lt;/mx:series&gt;
          &lt;/mx:BubbleChart&gt;
          &lt;mx:Legend dataProvider="{mybubChart}"/&gt;
      &lt;/s:HGroup&gt;
  &lt;/s:Application&gt;
  </code></pre>