How do I set background color of Line Series chart in Flex

I have a Line Series Chart i开发者_Go百科n Flex with values from 0 to 90. I would like to set the background of the chart in such a way that, 0 - 30 is in green, 31 - 60 is in red and 61 - 90 is in blue.

I am new to Flex. Can someone tell me how this can be done?

This is super old, but I stumbled upon it while Googling and for posterity sake, wanted to add this.

The best and preferred way is to set the backgroundElements property of the chart. Here's an example:

<fx:Array id="backgroundChartElements">
<mx:GridLines>
    <mx:horizontalFill>
        <s:SolidColor color="0x000000" alpha="1" />
    </mx:horizontalFill>
    <mx:horizontalAlternateFill>
        <s:SolidColor color="0x000000" alpha=".5" />
    </mx:horizontalAlternateFill>
</mx:GridLines>
</fx:Array>
<mx:LineChart backgroundElements="{backgroundChartElements}" ... />

See this document for more information on messing with the background and grid lines

There is a class called CartesianDataCanvas that is designed for this kind of thing.

You add an instance to the chart's backgroundElements and use a drawing API to draw on it. What is handy is that the drawing API on these objects works in terms of data coordinates, not screen coordinates saving you a lot of converstion work and making scaling and resizing much easier.

More here

the easiest way to do this would be to set the graphs maximum and minimum to fixed values(so that it doesn't auto re-size) and draw the color bars behind it using the normal drawing api.