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
                ]

You should mention what you have tried. Questions should show some code — Juan Mendes
It should be some code that someone can paste at fiddle.sencha.com/#home and see it work. They they can tinker with it and help you. The easy way out is to use svg instead of the canvas and color them with CSS. colors is not listed as a config option in the API, docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.chart.axis.Axis, how would you expect that to work? — Juan Mendes
Colors is listed as a config option in the API? Please see here - docs.sencha.com/extjs/5.0/apidocs/#!/api/… — JJI90
also - it takes the first element of 'colors' and renders all the bars with this colour so it understands the config option, however unlike the pie chart it doesn't set each bar/slice as a separate colour @JuanMendes — JJI90

JJI90 JJI90 · Accepted Answer · 2014-09-14T16:51:12

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});
                    }

Simplest way to create multi coloured ExtJS column chart

1 Answers