View Full Version : How to do color per 'slice' on the pie chart

1 Aug 2012, 9:20 AM
I would absolutely love to be able to pass data that contains the name of the slice of a pie chart IN ADDITION to the hex color that that slice should be. The only thing that I have gotten so far that would remotely be usuable is to build the colorSet dynamically. In this case that's just not going to do it though.

1 Aug 2012, 10:02 AM
You can set the colors using the following:

var colors = [
'rgb(255, 165, 0)', 'rgb(255, 140, 0)', 'rgb(127, 255, 47)', 'rgb(255, 215, 0)', 'rgb(255, 255, 0)'

Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
constructor: function(config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors: colors
}, config));

theme: 'Browser:gradients',


2 Aug 2012, 5:27 AM
Ok, but how do I update said theme dynamically ... say on a some random button click?
So you would make the theme dynamically using this code and then to update the colors/theme you would ....?

2 Aug 2012, 6:59 AM
Maybe an update theme method on the pie chart that I'm not aware of?

8 Aug 2012, 6:51 PM
You can add a renderer to the slice/bar:

//add renderer
renderer: function(sprite, record, attr, index, store) {
var value = (record.get('data1') >> 0) % 9;
var color = [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"][value];
return Ext.apply(attr, {
fill: color


28 Sep 2012, 4:08 PM
The only problem i have found with waiting until render to do the colors is the default Ext colors display, then change to my colors (probably because of animate). My solution was to put the colorSet to one color, the background of my panel. then the pie fades in from white to my colors.