Different colors for column chart

Question

I am using ExtJS to render charts, but my column chart is getting with the same color for all series. I need different colors for the series. Only happens with column, bar and area charts, the line chart is working fine.

My code:

Ext.Ajax.request({
        method: 'get',
        url: Webapp.link('chart/' + key),
        success: function(response){
            var resposta = Ext.JSON.decode(response.responseText);
            var chart = Ext.create('Hemisphere.view.chart.Chart', {
                axes: resposta.chart.axes,
                series: resposta.chart.series,
                store: store (The store is defined previously)
            });
            panel.removeAll();
            panel.add(chart);
            }
        }
    });

Anyone could help me? Thanks. enter image description here

One serie code example.

enter image description here

CD.. CD.. · Accepted Answer · 2013-03-05T16:35:53

You can change the color using a renderer on your series.

Ext documentation has a working example of this:

http://docs.sencha.com/ext-js/4-1/#!/example/charts/Column2.html

        series: [{
            type: 'column',
            renderer: function(sprite, storeItem, barAttr, i, store) {
                barAttr.fill = colors[i % colors.length];
                return barAttr;
            }
            .
            .
        }]

Different colors for column chart

1 Answers