Simplest way to create multi coloured ExtJS column chart

Question

As seen in the kitchen sink example in http://dev.sencha.com/ext/5.0.1/examples/kitchensink/?charts=true#bar-basic each column has the same default colour.

To change the colour for all seems to pretty simple, but I'm struggling to find a solution to fill each column as a separate colour.

I'm using a store and loading from there to populate the chart therefore I may not know how many columns there are.

The code snippest below sets the color for all bars to the first element of the array (Cream)

Any suggestions?

The code I have currently looks something like this:

axes: [{
                    type: 'numeric',
                    position: 'left',
                    title: {
                        text: 'Cost',
                        fontSize: 15
                    },
                    grid: true,
                    minimum: 0,
                    fields: 'Value'
                }, {
                    type: 'category',
                    position: 'bottom',
                    title: {
                        text: 'Type',
                        fontSize: 15
                    },
                    fields: 'Type'
                }],
                series: {
                    type: 'bar',
                    xField: 'Type',
                    yField: 'Value'
                },
                colors: [
                    '#FFEC94', //cream
                    '#F7FE2E', //yellow
                    '#3ADF00', //green
                    '#B4D8E7', //light blue
                    '#56BAEC', //blue
                    '#FA5858', //red
                    '#FFAEAE', //pink
                    '#FAAC58' //orange
                ]

Answer 1

I found a solution by using the renderer config for the bar which loops over the array of colors I have

renderer: function(sprite, record, attr, index, store) {
                        var colors =  [
                            '#FFEC94', //cream
                            '#F7FE2E', //yellow
                            '#3ADF00', //green
                            '#B4D8E7', //light blue
                            '#56BAEC', //blue
                            '#FA5858', //red
                            '#FFAEAE', //pink
                            '#FAAC58' //orange
                        ][index];
                    return Ext.apply(attr, {fill: colors});
                    }