Get our Newsletter!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).
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.
