Search Flex Samples

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.




<?xml version="1.0" encoding="utf-8"?>

<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>

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples