Accepted answer

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


enter image description here

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.


add setoptions in chart

            colors: ['#058dc7', '#50b432', '#ed561b', '#dddf00', '#24cbe5', '#64e572',     '#ff9655',              '#fff263', '#6af9c4']

try this in fiddle

Related Query

More Query from same tag