View Full Version : [OPEN] Pie Chart Custom color not matching with legend color

25 Sep 2011, 10:51 PM
When I make the pie chart have custom color the legend color is not matching with it. posted in the forum Support asked me to open up a bug.

Please find the link attached.


thank you

26 Sep 2011, 12:12 AM
Please post a short test case:


26 Sep 2011, 2:03 AM
Ext version tested:
Ext 4.0.2

Browser versions tested against:

Pie Chart Custom color not matching with legend color

Steps to reproduce the problem:
Create an pie chart with having custom color for it and enable the legend to show up in the right src attached.

The result that was expected:
The color of the pie and the legend should match .

The result that occurs instead:
The Pie color is coming as expected but the legend is not matching the pie colors. Screenshot attached.

Test Case:


Ext.create('Ext.chart.Chart', {
"series": [{
"type": "pie",
"field": "data",
"showInLegend": true,
"label": {
"field": "value",
"display": "rotate",
"contrast": true
"legend": {
"position": "right"
"store": {
"fields": ["value", "data"],
data: [{
data: 1
}, {
data: 2
"xtype": "chart",
"width": 516,
"height": 450,
renderTo: document.body



Screenshot or Video:


Debugging already done:

Possible fix:
not provided

Additional CSS used:
only default ext-all.css

Operating System:
win 7

26 Sep 2011, 11:25 AM
I had the same issue, also I was in a case where I wanted to keep the colors on the record-level.
In some cases you want to show stats for some date/time period, in some of them you're maybe missing a position due to it was not there in the selected time period.
In conclusion: an array of colors is not what you want.
No problem at all ExtJS has a custom renderer but it only applies on the pie level the legend is not affected a bug or a feature.
However my solution looks like this:

Ext.override(Ext.chart.series.Pie, {
getLegendColor: function(index) {
var me = this;
var store = me.chart.substore || me.chart.store;
var record = store.getAt(index);
return record.data.fillColor || (me.colorSet && me.colorSet[index % me.colorSet.length]) || me.colorArrayStyle[index % me.colorArrayStyle.length];

and this code in the series properties:

renderer: function(sprite, record, attr, index, store)
var color = record.data.fillColor;
return Ext.apply(attr,
fill: color

in order to make it work it expects your model to have a "fillColor" property.

13 Dec 2011, 11:54 PM
Also you can do someting like this:

type: 'column',
axis: 'left',
gutter: 20,
groupGutter: 3,
getLegendColor: function(index) {
var me = this,
colorLength = 0;

me.colorArrayStyle = ['#ff000', '#fff000', '#ffff00'];
colorLength = me.colorArrayStyle.length;
if (me.style && me.style.fill) {
return me.style.fill;
} else {
return me.colorArrayStyle[index % colorLength];
title: me.TITLE,
xField: ['month'],
yField: ['field1', 'field2, 'field3']