Question

I have been dealing with this script for a long time already i can’t figure how to give a di different background color to each bar in a two series data array, I am able to do like so:

            data: [{
                y: 88,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 0
                    },
                    stops: [
                        [0, 'rgb(66, 121, 54)'],
                        [.50, 'rgb(86, 146, 71)'],
                        [.50, 'rgb(97, 159, 79)'],
                        [1, 'rgb(120, 182, 98)']]
                }

                }

but i need to have my data array like so:

    series: [{
            name: 'Previous',
            data : [145, 180, 199, 244]
        }, {
            name: 'Current',
            data : [145, 180, 199, 244]
        }]

and the give different colors using a color array like:

        colors: [ 

            { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [ [0, 'orange'], [1, '#fff']] },

            { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [ [0, 'gray'], [1, '#fff']] },

            { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [ [0, 'fushia'], [1, '#fff']] },

            { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [ [0, 'green'], [1, '#fff']] },

            { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [ [0, 'pink'], [1, '#fff']] },

            { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [ [0, 'purple'], [1, '#fff']] },

        ],

I created a http://jsfiddle.net/creativestudio/R4CmJ/

This is a snapshot of what I am trying to do, basically first column of each group has different color, second bar has same solid color.

Answer 1

I was able to fix the problem using adding this to the plotOptions series ” colorByPoint: true” now the code looks like this:

            series: {
                borderWidth: 0,
                shadow: false,
                borderRadius: 2,
                pointWidth: 16,
                shadow: false,
                colorByPoint: true

// groupPadding: 0.001
}

and then the colors array looks like this:
colors: [

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(62, 131, 161)'], [.50, 'rgb(45, 94, 119)'], [.50, 'rgb(51, 107, 134)'], [1, 'rgb(34, 72, 91)']] },

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(62, 131, 161)'], [.50, 'rgb(45, 94, 119)'], [.50, 'rgb(51, 107, 134)'], [1, 'rgb(34, 72, 91)']] },

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(62, 131, 161)'], [.50, 'rgb(45, 94, 119)'], [.50, 'rgb(51, 107, 134)'], [1, 'rgb(34, 72, 91)']] },

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(62, 131, 161)'], [.50, 'rgb(45, 94, 119)'], [.50, 'rgb(51, 107, 134)'], [1, 'rgb(34, 72, 91)']] },

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(66, 121, 54)'], [.50, 'rgb(86, 146, 71)'], [.50, 'rgb(97, 159, 79)'], [1, 'rgb(120, 182, 98)']]},

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(167, 195, 100)'], [.50, 'rgb(183, 206, 128)'], [.50, 'rgb(192, 213, 145)'], [1, 'rgb(207, 223, 170)']]},

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(211, 127, 39)'], [.50, 'rgb(220, 151, 52)'], [.50, 'rgb(224, 163, 57)'], [1, 'rgb(232, 186, 72)']]},

        { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [ [0, 'rgb(190, 63, 36)'], [.50, 'rgb(203, 83, 48)'], [.50, 'rgb(208, 94, 53)'], [1, 'rgb(220, 116, 66)']]}
    ],