Using fills -- Flex 2.01

When charting multiple data series, or just to improve the appearance of your charts, you can control the fill for each series in the chart. The fill lets you specify a pattern that defines how Flex draws the chart element. You can also use fills to specify the background colors of the chart or bands of background colors defined by the grid lines. Fills can be solid or can use linear and radial gradients. A gradient specifies a gradual color transition in the fill color

You use the fill property of the chart series to define the characteristics of the fill. The LineSeries and LineRenderer objects are not affected by the fill property's settings. The PieSeries object supports an array of fills rather than a single fill property.

One of the most common uses of a fill is to control the color of the chart when you have multiple data series in a chart. The following example uses the fill property to set the color for each ColumnSeries object in a ColumnChart control:

<?xml version="1.0"?>
<!-- charts/ColumnFills.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500},
        {Month:"Feb", Profit:1000, Expenses:200},
        {Month:"Mar", Profit:1500, Expenses:500}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Column Chart">
     <mx:ColumnChart id="myChart" dataProvider="{expenses}">
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                xField="Month" 
                yField="Profit"
                displayName="Profit"
           >
               <mx:fill>
                    <mx:SolidColor color="0x336699"/>
               </mx:fill>
           </mx:ColumnSeries>

           <mx:ColumnSeries 
                xField="Month" 
                yField="Expenses"
                displayName="Expenses"
           >
            <mx:fill>
                <mx:SolidColor color="0xFF99FF"/>
            </mx:fill>
           </mx:ColumnSeries>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

If you do not explicitly define different fills for multiple data series, Flex chooses solid colors for you.

With the PieSeries, you can use an array of fills to specify how Flex should draw the individual wedges. For example, you can give each wedge that represents a PieSeries its own color, as the following example shows:

<?xml version="1.0"?>
<!-- charts/PieFills.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Expense:"Taxes", Amount:2000},
        {Expense:"Rent", Amount:1000},
        {Expense:"Bills", Amount:100},
        {Expense:"Car", Amount:450},
        {Expense:"Gas", Amount:100},
        {Expense:"Food", Amount:200}
     ]);
    ]]>
  </mx:Script>
  <mx:Panel title="Pie Chart">
     <mx:PieChart id="myChart" 
        dataProvider="{expenses}" 
        showDataTips="true"
     >
        <mx:series>
           <mx:PieSeries 
                field="Amount" 
                nameField="Expense"
                labelPosition="callout"
           >
                <mx:fills>
                    <mx:SolidColor color="0xCC66FF" alpha=".8"/>
                    <mx:SolidColor color="0x9966CC" alpha=".8"/>
                    <mx:SolidColor color="0x9999CC" alpha=".8"/>
                    <mx:SolidColor color="0x6699CC" alpha=".8"/>
                    <mx:SolidColor color="0x669999" alpha=".8"/>
                    <mx:SolidColor color="0x99CC99" alpha=".8"/>
                </mx:fills>
            </mx:PieSeries>
        </mx:series>
     </mx:PieChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

You can also use fills to set the background of the charts. You do this by adding an <mx:fill> child tag to the chart tag, as the following example shows:

<?xml version="1.0"?>
<!-- charts/BackgroundFills.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;

     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Expense:"Taxes", Amount:2000},
        {Expense:"Rent", Amount:1000},
        {Expense:"Bills", Amount:100} 
     ]);
  ]]></mx:Script>
  <mx:Panel title="Background Fill">
     <mx:BarChart 
        dataProvider="{expenses}" 
        showDataTips="true"
     >
        <mx:verticalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Expense"
           />
        </mx:verticalAxis>
        <mx:fill>
           <mx:SolidColor 
                color="0x66CCFF" 
                alpha=".5"
           />
        </mx:fill>
        <mx:series>
           <mx:BarSeries xField="Amount"/>
        </mx:series>
     </mx:BarChart>
  </mx:Panel>
</mx:Application>

Using fills

Subtopics