Using fills with chart controls
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 or each item in a series. The fill lets you specify a pattern that defines how Flex draws the chart element. You 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 fills in the following ways:
- fill Set the value of the fill property on a series to a single fill. This applies that fill to all chart items in that series. For example, all columns in a single series will have the same fill.
- fills Set the value of the fills property on a series to an Array of fills. This applies a different fill from the Array to each chart item in the series. For example, each column in a series will have a different fill. The LineSeries and LineRenderer objects are not affected by the fill property's settings.
- fillFunction Set the value of the fillFunction property on a series to point to a custom method. This method returns a fill based on the values of the chart item in the series. The return value of this function takes precedence over fills specified as styles. For information on using the fillFunction property, see Using per-item fills.
All series except the HLOCSeries class support setting the fill-related properties.
If you use the fills property or the fillFunction to define the fills of chart items, and you want a legend, you must manually create the Legend object for that chart. For more information on creating Legend objects, see Using Legend controls.
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}" showDataTips="true">
<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>
The executing SWF file for the previous example is shown below:
If you do not explicitly define different fills for multiple data series, Flex chooses solid colors for you.
You can also specify an array of colors using the fills property of the series. This property takes an Array of objects that define the fills. You can use this property to define a different color for each item in the series. If you do not define as many colors in the Array as there are items in the series, the chart starts with the first item in the Array on the next item.
The following example defines two Arrays of SolidColor objects. The first Array defines the colors of the items in the first series in the chart and the second Array defines the colors of the items in the second series. All of the fills in this example are partially transparent (the alpha value in the SolidColor constructor is .5).
<?xml version="1.0"?>
<!-- charts/SimpleFillsExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.graphics.SolidColor;
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}
]);
// Make all fills partially transparent by
// setting the alpha to .5.
[Bindable]
private var warmColorsArray:Array = new Array(
new SolidColor(0xFF0033, .5),
new SolidColor(0xFF0066, .5),
new SolidColor(0xFF0099, .5)
);
[Bindable]
private var coolColorsArray:Array = new Array(
new SolidColor(0x3333CC, .5),
new SolidColor(0x3366CC, .5),
new SolidColor(0x3399CC, .5)
);
]]>
</mx:Script>
<mx:Panel title="Column Chart">
<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="Month"
yField="Profit"
displayName="Profit"
fills="{warmColorsArray}"
>
</mx:ColumnSeries>
<mx:ColumnSeries
xField="Month"
yField="Expenses"
displayName="Expenses"
fills="{coolColorsArray}"
>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
This example does not have a legend. If you use the fills property or the fillFunction to define the fills of chart items, and you want a legend, you must manually create the Legend object for that chart. For more information on creating Legend objects, see Using Legend controls.
With the PieSeries, you typically use a single 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>
The executing SWF file for the previous example is shown below:
This example also shows how you use the <mx:fills> tag inside a series to define an Array of fills for that series.
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 id="myChart" 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" displayName="Amount"/>
</mx:series>
</mx:BarChart>
</mx:Panel>
<mx:Legend dataProvider="{myChart}"/>
</mx:Application>
The executing SWF file for the previous example is shown below:
Setting fills with CSS
You can use the fill or fills style properties in an <mx:Style> declaration by using CSS syntax. You can use a type or a class selector. The following example sets the fill of the custom myBarChartStyle class selector to #FF0000:
<?xml version="1.0"?>
<!-- charts/BackgroundFillsCSS.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:1100},
{Expense:"Bills", Amount:100}
]);
]]></mx:Script>
<mx:Style>
.myBarChartStyle {
fill:#FF0000;
}
</mx:Style>
<mx:Panel title="Background Fill">
<mx:BarChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
styleName="myBarChartStyle"
>
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Expense"
/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries xField="Amount" displayName="Amount"/>
</mx:series>
</mx:BarChart>
</mx:Panel>
<mx:Legend dataProvider="{myChart}"/>
</mx:Application>
The executing SWF file for the previous example is shown below:
Flex converts the fill style in the class selector to a SolidColor object.
The following example defines colors for each of the series by setting the value of the fill style property in the custom class selectors:
<?xml version="1.0"?>
<!-- charts/SimpleCSSFillsExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.graphics.SolidColor;
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:Style>
.myRedColumnSeries {
fill:#FF0033;
}
.myGreenColumnSeries {
fill:#33FF00;
}
</mx:Style>
<mx:Panel title="Column Chart">
<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="Month"
yField="Profit"
displayName="Profit"
styleName="myRedColumnSeries"
>
</mx:ColumnSeries>
<mx:ColumnSeries
xField="Month"
yField="Expenses"
displayName="Expenses"
styleName="myGreenColumnSeries"
>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
To specify an Array for the fills property in CSS, you use a comma-separated list, as the following example shows:
<?xml version="1.0"?>
<!-- charts/CSSFillsArrayExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.graphics.SolidColor;
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:Style>
.myRedColumnSeries {
fills: #FF0033, #FF3333, #FF6633;
}
.myGreenColumnSeries {
fills: #33FF00, #33FF33, #33FF66;
}
</mx:Style>
<mx:Panel title="Column Chart">
<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="Month"
yField="Profit"
displayName="Profit"
styleName="myRedColumnSeries"
>
</mx:ColumnSeries>
<mx:ColumnSeries
xField="Month"
yField="Expenses"
displayName="Expenses"
styleName="myGreenColumnSeries"
>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
Using gradient fills with chart controls
Flex provides several classes that let you specify gradient fills. You use either the LinearGradient class or the RadialGradient class, along with the GradientEntry class to specify a gradient fill. The following table describes these classes:
|
Class |
Description |
|---|---|
|
LinearGradient |
Defines a gradient fill that starts at a boundary of the chart element. You specify an array of GradientEntry objects to control gradient transitions with the LinearGradient object. |
|
RadialGradient |
Defines a gradient fill that radiates from the center of a chart element. You specify an array of GradientEntry objects to control gradient transitions with the RadialGradient object. |
|
GradientEntry |
Defines the objects that control the gradient transition. Each GradientEntry object contains the following properties:
|
The following example uses a LinearGradient class with three colors for a gradient fill of the chart's background:
<?xml version="1.0"?>
<!-- charts/GradientFills.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 id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Expense"
/>
</mx:verticalAxis>
<mx:fill>
<mx:LinearGradient>
<mx:entries>
<mx:GradientEntry
color="0xC5C551"
ratio="0"
alpha="1"
/>
<mx:GradientEntry
color="0xFEFE24"
ratio=".33"
alpha="1"
/>
<mx:GradientEntry
color="0xECEC21"
ratio=".66"
alpha="1"
/>
</mx:entries>
</mx:LinearGradient>
</mx:fill>
<mx:series>
<mx:BarSeries xField="Amount" displayName="Amount"/>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
The LinearGradient object takes a single attribute, angle. By default, it defines a transition from left to right across the chart. Use the angle property to control the direction of the transition. For example, a value of 180 causes the transition to occur from right to left, rather than from left to right.
The following example sets the angle property to 90, which specifies that the transition occurs from the top of the chart to the bottom.
<?xml version="1.0"?>
<!-- charts/GradientFillsAngled.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 id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Expense"
/>
</mx:verticalAxis>
<mx:fill>
<mx:LinearGradient angle="90">
<mx:entries>
<mx:GradientEntry
color="0xC5C551"
ratio="0"
alpha="1"
/>
<mx:GradientEntry
color="0xFEFE24"
ratio=".33"
alpha="1"
/>
<mx:GradientEntry
color="0xECEC21"
ratio=".66"
alpha="1"
/>
</mx:entries>
</mx:LinearGradient>
</mx:fill>
<mx:series>
<mx:BarSeries xField="Amount" displayName="Amount"/>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
Using different alpha values with fills
When charting multiple data series, you can define the series to overlap. For example, the column chart lets you display the columns next to each other or overlap them for multiple data series. To overlap series, you set the type property of the chart to overlaid. The same is true for an area series.
When you have multiple data series that overlap, you can specify that the fill for each series has an alpha value less than 100%, so that the series have a level of transparency. The valid values for the alpha property are 0 (invisible) through 1 (opaque).
You cannot specify alpha values for fills if you apply the fills using CSS.
The following example defines an area chart in which each series in the chart uses a solid fill with the same level of transparency:
<?xml version="1.0"?>
<!-- charts/AlphaFills.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, Amount:450},
{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
]);
]]></mx:Script>
<mx:Panel title="Area Chart">
<mx:AreaChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="Profit"
>
<mx:areaStroke>
<mx:Stroke
color="0x9A9A00"
weight="2"
/>
</mx:areaStroke>
<mx:areaFill>
<mx:SolidColor
color="0x7EAEFF"
alpha=".3"
/>
</mx:areaFill>
</mx:AreaSeries>
<mx:AreaSeries
yField="Expenses"
displayName="Expenses"
>
<mx:areaStroke>
<mx:Stroke
color="0x9A9A00"
weight="2"
/>
</mx:areaStroke>
<mx:areaFill>
<mx:SolidColor
color="0xAA0000"
alpha=".3"
/>
</mx:areaFill>
</mx:AreaSeries>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
If you define a gradient fill, you can set the alpha property on each entry in the Array of <mx:GradientEntry> tags, as the following example shows:
<?xml version="1.0"?>
<!-- charts/GradientAlphaFills.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, Amount:450},
{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
]);
]]></mx:Script>
<mx:Panel title="Area Chart">
<mx:AreaChart id="myChart" dataProvider="{expenses}"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries yField="Profit" displayName="Profit">
<mx:areaStroke>
<mx:Stroke color="0x9A9A00" weight="2"/>
</mx:areaStroke>
<mx:areaFill>
<mx:LinearGradient angle="90">
<mx:entries>
<mx:GradientEntry
color="0xC5C551"
ratio="0"
alpha="1"
/>
<mx:GradientEntry
color="0xFEFE24"
ratio=".33"
alpha="1"
/>
<mx:GradientEntry
color="0xECEC21"
ratio=".66"
alpha=".2"
/>
</mx:entries>
</mx:LinearGradient>
</mx:areaFill>
</mx:AreaSeries>
<mx:AreaSeries
yField="Expenses"
displayName="Expenses"
>
<mx:areaStroke>
<mx:Stroke color="0x9A9A00" weight="2"/>
</mx:areaStroke>
<mx:areaFill>
<mx:LinearGradient angle="90">
<mx:entries>
<mx:GradientEntry
color="0xAA0000"
ratio="0"
alpha="1"
/>
<mx:GradientEntry
color="0xCC0000"
ratio=".33"
alpha="1"
/>
<mx:GradientEntry
color="0xFF0000"
ratio=".66"
alpha=".2"
/>
</mx:entries>
</mx:LinearGradient>
</mx:areaFill>
</mx:AreaSeries>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
In this example, you make the last gradient color in the series partially transparent by setting its alpha property to .2.