Arthur Kay

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.

Be Sociable, Share!
    This entry was posted in ExtJs, JavaScript. Bookmark the permalink.

    3 Responses to Custom colors for Ext.chart.*

    1. Thomas K says:

      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}
      or
      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,
      TK

    2. Arthur Kay says:

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

      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 *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>