ExtJs 4 color theme for bar chart

1
votes

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.

3
javascriptextjsyui

3 Answers

4
votes

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 ...
1
votes

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',
0
votes

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'];