Customizing colors of a Column Chart

A Column chart when instantiated, draws columns of the same color, whatever is the default or that chosen by the programmer in the ‘color’ property of the ColumnChart tag. Lets see a few examples to walk through the variations.

For the rest of the article the array-collection named “data” is assumed to be the data source for the graph.

<mx:ArrayCollection id="data">
     <mx:source>
           <mx:Array>
                <mx:Object x_value="x1" y_value="20"/>
                <mx:Object x_value="x2" y_value="33"/>
                <mx:Object x_value="x3" y_value="24"/>
                <mx:Object x_value="x4" y_value="47"/>
                <mx:Object x_value="x5" y_value="58"/>
                <mx:Object x_value="x6" y_value="10"/>
                <mx:Object x_value="x7" y_value="29"/>
                <mx:Object x_value="x8" y_value="29"/>
           </mx:Array>
     </mx:source>
</mx:ArrayCollection>

Now a normal chart code produces the following graph.

<mx:ColumnChart dataProvider="{data}">
      <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="x_value"/>
      </mx:horizontalAxis>
      <mx:series>
          <mx:ColumnSeries xField="x_value" yField="y_value" />
      </mx:series>
</mx:ColumnChart>

If we want to have the columns have a desired color, say(#3355FF) we have to make the following change.

<mx:series>
     <mx:ColumnSeries color="0x3355ff" xField="x_value" yField="y_value">
          <mx:fill>
               <mx:SolidColor>
                    <mx:color>0x335f4c</mx:color>
               </mx:SolidColor>
          </mx:fill>
      </mx:ColumnSeries>
</mx:series>

And we get the following graph

If we want that the colors of each of the columns are different, the following approach is useful.

Making the array “colorsArray” bindable allows us to reflect any changes to the array at any stage of the program to the color of the columns using the array.

<mx:ColumnChart height="300" dataProvider="{data}">
	<mx:horizontalAxis>
		<mx:CategoryAxis categoryField="x_value" />
	</mx:horizontalAxis>
	<mx:series>
		<mx:ColumnSeries xField="x_value" yField="y_value" fills="{colorsArray}" />
	</mx:series>
</mx:ColumnChart>
<mx:Script>
     import mx.graphics.SolidColor;
     [Bindable]
     private var colorsArray:Array = new Array
		     	(
		        new SolidColor(0xFF6699, 1),
		        new SolidColor(0x9900CC, 1),
		        new SolidColor(0xFFFF33, 1),
		        new SolidColor(0x99FF99, 1),
		        new SolidColor(0x9900CC, 1),
		        new SolidColor(0x66CCFF, 1),
		        new SolidColor(0x000000, 1),
		        new SolidColor(0xFFFF33, 1),
		        new SolidColor(0xCC99CC, 1),
		        new SolidColor(0xFF6633, 1)
    			);
</mx:Script>

So these were the methods to add colors to the columns of a Column Chart as well as a Bar Chart.

Advertisement