Hi Matt,

We are trying to give different colors for column chart. We are not able to achieve it. Please help us on this.

For Eg, We have 3 column chart in a page and using 2 different colors. We need to show alternative colors.

asked 02 Feb, 09:22

Rebecca's gravatar image

accept rate: 4%

Hi Matt,

Please ignore the above eg and consider this.

We are using column chart in a page and we have 3 values. We need to give 3 different colors for those values. Please find the attachment and help us to achieve it.alt text


answered 02 Feb, 09:50

Rebecca's gravatar image

accept rate: 4%

Colors are defined by series, so please separate your 3 values into 3 series and set the color in the series accordingly.

(02 Feb, 11:36) FOEX-SUPPORT FOEX-SUPPORT's gravatar image

Thank you. Just want to know if its possible to have different colours for single series.

(02 Feb, 11:42) Rebecca Rebecca's gravatar image

Please note that this will not work with legends and multiple series since a single series color must be defined. However if you want to omit the legend and only have a single series you can change the color per bar using a custom renderer e.g.

Please add a custom renderer to the series additional config e.g.

"renderer": /**/ function(sprite, record, attr, index) {
   var getRandomColor = function() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
         color += letters[Math.floor(Math.random() * 16)];
      return color;
   var color = getRandomColor();

   return Ext.apply(attr, {
      fill: color
} /**/

Here is a screenshot of the settings e.g.

alt text

and here's a chart example:

alt text


answered 02 Feb, 11:53

FOEX-SUPPORT's gravatar image

accept rate: 32%

edited 02 Feb, 11:57

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: 02 Feb, 09:22

Seen: 327 times

Last updated: 02 Feb, 11:57

FOEX Links