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 — Ruan Mendes, Sep 14 '14 at 13:57
It should be some code that someone can paste at https://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, http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.chart.axis.Axis, how would you expect that to work? — Ruan Mendes, Sep 14 '14 at 14:26
Colors is listed as a config option in the API? Please see here - http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.chart.series.Bar-cfg-colors — JJI90, Sep 14 '14 at 14:40
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, Sep 14 '14 at 14:57

score 2 · Answer 1 · answered Sep 14 '14 at 16:51

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

your sample worked so good for me. Just a question; why have you added store as parameter for renderer function? Is that about ExtJS version? Current version that I'm using is 6.5 and on [doc] (http://docs.sencha.com/extjs/6.5.2/classic/Ext.chart.series.Series.html#cfg-renderer) says: "It receives (sprite, config, rendererData, index) as parameters." — Nuri Engin, Jan 23 '18 at 10:45

Simplest way to create multi coloured ExtJS column chart

1 Answers1