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.
<?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.
<?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.
{ 8 comments… read them below or add one }
Thanks for the list of the default colours. Despite your doubts, it is precisely what I wanted to know.
This was a very helpful information for me thanx alot. These tips wil enable me to color cordinate my projects.
//The Life Saver effect – stick it in the pieseries
i have a XML node to contain the color (blue) using mx:HTTPService to connect my xml
and all xml data is in xmlData:array. i get the color via “temp = xmlData[0]["chartcolor"];”
i use alert.show to trace the valus and i can shows “blue” but how can i use the “blue” on it ?
can i set up like below??
PieSeries {
fills: xmlData[0]["chartcolor"], haloOrange, yellow, haloGreen, haloBlue;
}
it seems not work in my case ?? how can i fix it ??
thx alot
marco,
You would probably need to set the
fillsstyle using ActionScript instead of within CSS. I don’t think CSS or <mx:Style /> blocks would parse ActionScript code likexmlData[0]["chartcolor"].Peter
Is there a way to change (via a colorpicker) the colors of each individual pie slice?
For that you should create your series in ActionScripts and set the color for each of thoses Series.
So after you could bind a ColorPicker to a Serie, and change its property.
Is there a way to have have the color be dynamic? so I have a display function and set sliceID.color = model.var1;
sliceID.color = model.var2;