Extjs4 changing each bar color in bar chart - extjs4

Question

I have a bar chart and i want each bar to render in different color. So i tried using thems,
sample code is:
Ext.define('Ext.chart.theme.FancyTheme',{
extend : 'Ext.chart.theme.Base',
constructor : function(config){
this.callParent([Ext.apply({
colors : ['#9CC5C9','#D5544F','#D5544F','#5288DB']
},config)])
}
});
and my chart code is:
var tc = Ext.create('Ext.chart.Chart',{
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate : true,
insetPadding : 20,
theme: 'FancyTheme',
But all the bar colors are changing to same color i.e, to '#9cc5c9' in above example.
But i want bars to render in differnt colors as mentioned in theme. One more thing i dont want to use render function to render coloirs.
So wat is the soln to get different colors. Can anyone help me out!!

Answer 1

Sorry, but using a renderer is the correct solution. The colors property is used for successive series in a chart, such as multiple areas in the same plot space.
I don't understand why you don't want to use a renderer, but here's all you would need to do:
renderer: function(sprite, record, attr, index, store) {
var colors = ['#9CC5C9','#D5544F','#D5544F','#5288DB'];
return Ext.apply(attr, {
fill: colors[index % colors.length]
});
}

Answer 2

You can also extend Ext.chart.series.Bar. For example:
Ext.define('Ext.chart.series.MyBar', {
extend: 'Ext.chart.series.Bar',
//type: 'mybar',
alias: 'series.mybar',
getPaths: function() {
this.callParent(arguments);
var items = this.items,
i, iLen = items.length,
colors = this.colorArrayStyle,
colorsLength = colors && colors.length || 0;
for (var i = 0; i < iLen; ++i) {
items[i].attr.fill = colors[i % colorsLength];
}
}
});
Then in series you should use mybar instead of bar.