8 Replies Latest reply on Jun 10, 2008 7:16 AM by matthew horn

    Change colour in a pieseries according to the label

      hi there,

      i have a piechart which displays the amount of times a specific number was chosen.
      the possible numbers are 1 through 5 and they could have been chosen n amount of times.

      i have 5 colours, 1 for each possible number. if i assign these using fills, then the colours will display in order for values represented. what this means is that if a number was not selected, then it is not displayed and thus the subsequent numbers are displayed with the wrong colour value.

      i have tried using a fillFunction, but need to base the colour on the value of the label, which i cannot seem to find. so, i guess my question is, how do i retrieve the value of the label and not the data from the pieSeriesItem in a fillFunction?

      i hope this makes vague sense at least.

      thanks a mil',
        • 1. Re: Change colour in a pieseries according to the label
          matthew horn Level 3
          Not sure I follow what you are saying. Can you post a code sample that illustrates what's going on? Tnks,
          matt horn
          flex docs
          • 2. Re: Change colour in a pieseries according to the label
            Why don't you use item.item.label in your FillFunction ?

            • 3. Re: Change colour in a pieseries according to the label
              nif Level 1
              hi there,

              re: item.item.label... i am getting an empty string for each... also it doesn't appear to be a documented property for some reason. maybe i've coded it wrong somehow.... i've pasted my piechart call and the fillFunction at the bottom of this post... i won't paste my entire component's code as there's a bit to sift through.

              re: origional post... sorry... not my clearest moment and the data doesn't help how i described it. i don't think posting my actual code would describe it any better, but i can try use a better example of the data.

              if i have five animals (dog, cat, bird, rodent and reptile) and i want my piechart to display how many of each were bought and i have a specific colour for each. so i want the dog pie slice to be red, the cat slice to be yellow, the bird slice to be blue, the rodent slice to be orange and the reptile slice to be green.

              now, if i simply assign the five different colours using fills, and then i find that no birds were sold, what happens is there are in effect only 4 indexes for the piechart and thus the first 4 colours in the fills array are used. this means that the rodent slice becomes blue and the reptile slice becomes orange and green isn't even used.

              so, i create a fillFunction... this ought to run for each pieseries (slice).
              in my function i would like to check what the value of the label is... so, "dog" or "cat" or "bird" or "rodent" or "reptile" and pass back the colour i want associated to that specific type of data, so that no matter what, green is always for the reptile and orange always for the rodent etc.

              my biggest issue really is that i cannot seem to find the label data in the pieChartItem object... there are loads of references to the amounts which relate to the size of the different slices, but unfortunately for me, that doesn't help.
              i am sure it must exist, i just cannot find it and there's no documented examples that use the label to decide the colour of an item.

              i hope it makes a little more sense now.
              has anyone ever had to do this before and had any luck?

              thanks a mil',


              private function chartFillFunction(element:PieSeriesItem, index:Number):IFill {
              var c_1:SolidColor = new SolidColor(0xc40001);
              var c_2:SolidColor = new SolidColor(0x40ae00);
              var c_3:SolidColor = new SolidColor(0xf5c72b);
              var c_4:SolidColor = new SolidColor(0x365fb7);
              var c_5:SolidColor = new SolidColor(0xeb76e5);

              var c_return:SolidColor = c_1;

              var myitem:PieSeriesItem = PieSeriesItem(element);

              try {
              } catch (e:Error) {


              var voteValue:Number = Number(myitem.value);

              switch(voteValue) {
              case 1:
              c_return = c_1;
              case 2:
              c_return = c_2;
              case 3:
              c_return = c_3;
              case 4:
              c_return = c_4;
              case 5:
              c_return = c_5;

              return c_return;


              <mx:PieChart id="pie_chart_report" dataProvider="{pieData}" showDataTips="true" width="300" height="300" addedEffect="{SlowIris}" y="31" x="103">
              <mx:PieSeries id="pieSeries" field="vote_amount" labelPosition="callout" nameField="value" fillFunction="chartFillFunction">
              <mx:SeriesInterpolate duration="1000" />
              • 4. Re: Change colour in a pieseries according to the label
                matthew horn Level 3
                Aha, ok I get it now. What you can do is access the property of the data provider by using item.item.propertyName. Here's an example that I think does what you're asking:

                <?xml version="1.0"?>
                <!-- charts/SimpleFillFunction.mxml -->
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

                import mx.graphics.IFill;
                import mx.graphics.SolidColor;
                import mx.collections.ArrayCollection;
                import mx.charts.ChartItem;
                import mx.charts.series.items.PieSeriesItem;

                public var sales:ArrayCollection = new ArrayCollection([
                { Name:"Reptiles", CurrentAmount:1 },
                { Name:"Felines", CurrentAmount:4 },
                { Name:"Equines", CurrentAmount:3 }

                private function myFillFunction(element:ChartItem, index:Number):IFill {
                var c:SolidColor = new SolidColor(0x00FF00);

                var item:PieSeriesItem = PieSeriesItem(element);
                var sales:Number = Number(item.value);


                if (item.item.Name == "Reptiles") {
                c.color = 0x009966; // green
                } else if (item.item.Name == "Equines") {
                c.color = 0x993300; // brown
                } else if (item.item.Name == "Felines") {
                c.color = 0xFF9933; // orange
                return c;


                <mx:Panel title="Using a custom fillFunction in a Pie Chart">
                <mx:PieChart id="myChart"
                <mx:PieSeries id="currSalesSeries"
                displayName="Current Sales"
                • 5. Re: Change colour in a pieseries according to the label
                  laurent_pinson Level 1
                  This works perfectly for me. Check that your "label" property is called label and not name or whatever.
                  It may be just simple as that :p
                  • 6. Re: Change colour in a pieseries according to the label
                    nif Level 1
                    thank you so much... item.item.propertyName is exactly what i was looking for!!! :)
                    • 7. Re: Change colour in a pieseries according to the label
                      nif Level 1
                      oh no... now my legend is using the wrong colours... am i going mad? i use the piechart as the dataprovider for it... is there a beeter way?
                      • 8. Re: Change colour in a pieseries according to the label
                        matthew horn Level 3
                        Well, fortunately it's easy to build a customized legend; here's an example (copied from http://livedocs.adobe.com/flex/3/html/help.html?content=charts_displayingdata_12.html):

                        <mx:LegendItem label="SMITH" fontWeight="bold">
                        <mx:SolidColor color="{smithColor}"/>
                        <mx:Stroke color="0xCCCCCC" weight="2"/>
                        <mx:LegendItem label="DECKER" fontWeight="bold">
                        <mx:SolidColor color="{deckerColor}"/>
                        <mx:Stroke color="0xCCCCCC" weight="2"/>
                        matt horn
                        flex docs