ExtJs 4 color theme for bar chart

Question

I am using extJs 4 to draw chart similar to this http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/charts/BarRenderer.html . However, I will have 2 or more segments for each bar and there can be any number of bars. I want to have totally different colors for all of the bars. Further, i want different shades of the current bar color for the segments of that bar. The same color codes need to be reflected in the legends. Your help is greatly appreciated.

Answer 1

You would have to create a custom chart theme which specifies the colors. I did one for a line chart once. You may need to fiddle with it some to make it work for a barchart, if so, you can find all of the possible them options in %extjs-root%/src/chart/theme/Base.js. Heres what I had for the line chart:

// CUSTOM CHART THEME
Ext.chart.theme.myTheme = Ext.extend(Ext.chart.theme.Base, {
    constructor: function(config) {
        Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({      
            colors: ['rgb(0, 0, 0)', 
                     'rgb(0,0,255)', 
                     'rgb(255,0,0)', 
                     'rgb(0,128,0)', 
                     'rgb(128,0,128)'
            ],                           
        }, config));
    }
});

Make sure you include the theme in your bar chart config.

xtype: 'chart',
style: 'background:#fff',
animate: true,
store: myChartStore,
theme: 'Events',
legend: {
    position: 'right'
},
// other configs ...

Answer 2

I found a solution.

http://www.sencha.com/learn/drawing-and-charting/

Put this in your view:

var colors = ['#ff0000','#FF9900','#009933',       '#888',              '#999']; 
var baseColor = '#eee'; 
Ext.define('Ext.chart.theme.Fancy', {
    extend: 'Ext.chart.theme.Base', 
    constructor: function(config) {
        this.callParent([Ext.apply({           
            colors: colors
        }, config)]);
    }
});

And then call the theme you created:

Ext.define('MyAPP.view.Graph.GrafPlazos',{
    extend: 'Ext.chart.Chart',
    alias : 'widget.plazocibar',
    id: 'chart_plazosci',
    xtype: 'chart',
    style: 'background:#fff',
    animate: true,
    shadow: true,
    store: 'Plazos.GPlazosci',
    theme: 'Fancy',

Answer 3

Chart uses Theme as mixins

So you can directly use theme property called themeAttrs.

For example if you are in constructor of column/stacked column chart, want to change the color of columns You can specify

this.themeAttrs.colors = ['#F2C72B','#a5c249','#E88712','#9D5FFA'];