Highcharts Change Bar Background Color Based on categories value

Question

I'm using Highcharts and was wondering if it was possible to have the top bar in each series group as different color, then the second of each group series as a default background color.

I cant use of array of colors because is creating problems with the way i am reloading the data. So the I think the only way to do it is with Javascript, I was able to get the value of each of the categories but do not know how to change the attr color. I have a jsFiddle http://jsfiddle.net/KrTbz/13/

Here is my javascript:

        function custom() {


            var chart;
            $(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'bar',
                        backgroundColor: 'transparent',
                    },
                    title: {
                        text: null
                    },
                    subtitle: {
                        text: null
                    },
                    xAxis: {
                        tickLength: 0,
                        lineWidth: 0,
                        categories: ['RED', 
                                     'BLUE', 
                                     'PINK', 
                                     'ORANGE'],
                        title: {
                            text: null
                        },
                        labels: {
                            color: 'orange',
                            x: 5,
                            useHTML: true,
                            formatter: function () {
                                console.log(this);
                                return {
                                    'RED': '1ST BAR IS RED',
                                    'BLUE': '1ST BAR IS BLUE',
                                    'PINK': '1ST BAR IS PINK',
                                    'ORANGE': '1ST BAR IS ORANGE'
                                }[this.value];
                            }

                        }
                    },
                    yAxis: {
                        max: 100,
                        min: 0,
                        gridLineWidth: 0,
                        title: {
                            text: null
                        },
                        labels: {
                            enabled: false,
                        }
                    },
                    tooltip: {
                        enabled: false
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true,
                                color: '#f60'
                            },
                            borderWidth: 0,
                            borderRadius: 3
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    credits: {
                        enabled: false
                    },

        //SERIES AND DATA ARRAY FORMAT NEEDS TO STAY THIS WAY                
                    series: [{
                        color: 'silver', //DEFAULT COLOR OF SECOND BAR ON EACH GROUP
                        name: 'Previous',
                        shadow: false,
                        data : [10, 20, 40, 50]
                            }, {
                        color: 'silver', //DEFAULT COLOR OF SECOND BAR ON EACH GROUP
                        name: 'Current',
                        shadow: false,
                        data : [50, 30, 20, 10]
                           }]
                }); //Highcharts.Chart ends
            }); //function ends
        }

        custom();​

Answer 1

I think you want this:

 data:  [{
            y: 50,
            color: 'red'},
        {
            y: 30,
            color: 'blue'},
        {
            y: 20,
            color: 'pink'},
        {
            y: 10,
            color: 'orange'}]

Jsfiddle