Changing the default fill colors in a Flex PieChart control

The following examples show how you can change the default fill colors for a Flex PieChart control by setting the fills style using either CSS or MXML.

Full code after the jump.

The first example shows how you can set the fills style directly in your MXML code. As you can see, you pass an array of SolidColor objects containing color and alpha properties. If the color property is not specified, the default color of black is used. If you don’t pass a value for the alpha property, a default value of 1.0 (fully visible) is used.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/11/changing-the-default-fill-colors-in-a-flex-piechart-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="dp">
        <products>
            <product label="Product 1" data="3" />
            <product label="Product 2" data="1" />
            <product label="Product 3" data="4" />
            <product label="Product 4" data="1" />
            <product label="Product 5" data="5" />
            <product label="Product 6" data="9" />
            <product label="Product 7" data="2" />
        </products>
    </mx:XML>

    <mx:PieChart id="pieChart"
            dataProvider="{dp.product}"
            showDataTips="true"
            height="100%"
            width="100%">
        <mx:series>
            <mx:PieSeries id="pieSeries"
                    field="@data"
                    labelPosition="callout">
                <mx:fills>
                       <mx:SolidColor color="red" alpha="1.0" />
                       <mx:SolidColor color="haloOrange" alpha="1.0" />
                       <mx:SolidColor color="yellow" alpha="1.0" />
                       <mx:SolidColor color="haloGreen" alpha="1.0" />
                       <mx:SolidColor color="haloBlue" alpha="1.0" />
                </mx:fills>
                <mx:filters>
                    <mx:Array />
                </mx:filters>
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>

</mx:Application>

View source is enabled in the following example.

The following example shows how you can set the fills style within your style sheet (which can either be within the <mx:Style /> block, or loaded in from an external *.css file). When using CSS, you only specify the color value, and an alpha value of 1.0 is automatically set.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/11/changing-the-default-fill-colors-in-a-flex-piechart-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        PieSeries {
            fills: red, haloOrange, yellow, haloGreen, haloBlue;
        }
    </mx:Style>

    <mx:XML id="dp">
        <products>
            <product label="Product 1" data="3" />
            <product label="Product 2" data="1" />
            <product label="Product 3" data="4" />
            <product label="Product 4" data="1" />
            <product label="Product 5" data="5" />
            <product label="Product 6" data="9" />
            <product label="Product 7" data="2" />
        </products>
    </mx:XML>

    <mx:PieChart id="pieChart"
            dataProvider="{dp.product}"
            showDataTips="true"
            height="100%"
            width="100%">
        <mx:series>
            <mx:PieSeries id="pieSeries"
                    field="@data"
                    labelPosition="callout">
                <mx:filters>
                    <mx:Array />
                </mx:filters>
            </mx:PieSeries>
        </mx:series>
    </mx:PieChart>

</mx:Application>

View source is enabled in the following example.

Defaults? Did somebody say something about defaults?
If you’re curious (you probably weren’t, but hey), here are the default fill colors for the PieChart control:

View source is enabled in the following example.