javascript - Styling bar colors in Highcharts with a gradient issue

Question

I'm trying to color the bars in highcharts with a gradient. What I have is coloring them, but the problem is, the gradient is spreading through the other data groups rather than each individual bar, here's an example of what I mean:

If you notice, the gradient is being spread between the bars, rather than creating a new one for each.

To gradient them, I'm using:

colors: [
        {
        linearGradient: [500, 0],
        stops: [
            [0, 'rgb(247, 111, 111)'],
            [1, 'rgb(220, 54, 54)']
        ]
    }, 
        {
        linearGradient: [500, 0],
        stops: [
            [0, 'rgb(120, 202, 248)'],
            [1, 'rgb(46, 150, 208)']
        ]
    }, 
    {
        linearGradient: [500, 0],
        stops: [
            [0, 'rgb(136, 219, 5)'],
            [1, 'rgb(112, 180, 5)']
        ]
    },],

Answer 1

There are two ways of specifying gradients in current version of highcharts. Previously you only had the option of using an array with four coordinates like linearGradient: [x1, y1, x2, y2]. This would make the gradient coordinates apply to pixels and therefor be used for all bars (as in your example).

The new option is to use a configuration object instead:

linearGradient: {
     x1: 0,
     y1: 0,
     x2: 1,
     y2: 0
}

The coordinates here are numbers between 0 and 1 which corresponds to each individual bar. So, if you change the array you used to be a config option (and use normalized coordinates) you will get gradients in each bar.

Example on jsfiddle

Screenshot:

Edit: And as a bar chart have the x-axis going from top to bottom you should let x1 be 0 and x2 be 1, instead of changing y1 and y2.