Custom colors for Ext.chart.*

One of the main reasons I like ExtJS more than YUI is the documentation – I happen to find the ExtJS docs much easier to understand, though there’s a number of people who disagree with me.

With the release of ExtJS 3.0 earlier this year, developers can now create and use charts of various kinds. The ExtJS chart classes (Ext.chart.*) are basically extensions of the YUI charts – which has made my life difficult because neither YUI nor ExtJS does a fantastic job documenting how to use them. To be fair ExtJS has done a great job updating their 3.0 docs with the help of the community (charts included), but the chart documentation is still far from ideal.

My biggest beef with the Ext.chart.* docs has to do with the ability to change the default colors. While some references on how to do this can be found on the ExtJS forums and by searching Google, no solid examples exist as far as I can tell in either the ExtJS or YUI documentation. I only stumbled across the solution to this problem while searching Google.

The key to changing a chart’s colors lies in the “series” attribute of a given chart. This config option takes an array of Object literals defining each series on the chart – things like “displayName” and (most importantly) “style”. The “style” attribute has a “colors” property which takes an array of color values.

For example, let’s create a Pie Chart. A Pie Chart will only have one series, and doesn’t need much defined for the series’ attributes (it really only needs the “style” attribute to define the colors we’re going to use).

Ext.chart.PieChart() with custom colors

As you can see, the series style defines colors for the Pie Chart in the order they’re going to be used. Since our data store contains three records, “Pending” will get a blue color, “Passed” will get a green color, and “Failed” will get a red color.

See an example implemented within my ExtJS Unit Testing demo.


With nearly 20 years of software engineering and operations experience, Arthur Kay offers an extraordinary set of leadership skills and technical expertise to develop meaningful products and high-performing teams. He has worked with Fortune 500 companies, VC-funded startups and companies across a wide variety of industries to build cutting-edge software solutions.

Arthur is a successful entrepreneur, technology professional, and mentor. He is a full-time family man, part-time consultant and spare-time musician. He graduated from Loyola University Chicago and currently lives in greater Chicago-land.

3 comments for “Custom colors for Ext.chart.*

  1. Thomas K
    March 22, 2010 at 8:40 am

    Hi Arthur,

    thanks for that nice Post.

    I got a Piechart with unknown count and content.
    Thats why i can just say the order and colors on runtime.
    Now I want to color the Pie-pieces.

    I’m able to create a String like (in reality by a loop):
    chartcolors = “‘#00FF00’, ‘#FF0000’ , ‘#0000FF'”;

    Even I made an array of those strings and tried all of them with “#00FF00” or “0x00FF00”

    If I hard code the Colors into:
    style: { colors: [‘#00FF00’, ‘#FF0000’ , ‘#0000FF’]}
    it works like a charm, BUT:
    i can’t make the chart use the former named string or array.
    If i use
    style: { colors: chartcolors}
    style: { colors: [chartcolors]}
    it uses the default-ExtJS-Chart-Colors.
    In some combinations it uses the first of the colors in the string, but then only this, for ALL pieces (and thats also not what i want 🙂 )

    Can you give me a hint, how to declare those colors with a variable?

    Thanks a lot, with regards,

  2. March 22, 2010 at 9:31 am

    I wonder if it’s a problem of scope. Have you used Firebug to debug that line? Does your variable have the values you expect at the time this line is executed?

  3. Thomas K
    March 22, 2010 at 10:30 am

    Hi Arthur,

    moved the style-Part down from the Panel INTO the Piechart and it works…
    sometime an error is that stupid 🙂

    You made my day, thanks…

Leave a Reply

Your email address will not be published. Required fields are marked *