CODEWITHSUNDEEP
javascripthighcharts
vandi
vandi

Reputation: 67

Add color gradient color on bar HIghchart

I try to add a gradient for the bar on highchart

I try this

colors: [{
    linearGradient: perShapeGradient,
    stops: [
      [0, '#c2352b'],
      [1, '#f44336 ']
    ]
  }, {
    linearGradient: perShapeGradient,
    stops: [
      [0, '#1b75bf'],
      [1, '#2196f3']
    ]
  }, {
    linearGradient: perShapeGradient,
    stops: [
      [0, '#cc7a00'],
      [1, '#ff9800']
    ]}, 
          ]

but all my bar's color become all the same (even have a gradient color). Here's a link for full code demo here.

Upvotes: 0

Views: 981

Answers (1)

João Menighin
João Menighin

Reputation: 3225

There is nothing wrong with your code. The thing is, you set the color for the whole series and all your data is from the same series. If you put another series you can see that it assumes another color: https://codepen.io/anon/pen/XEwdQm?editors=0010

What you can do to set different color for each category is to set the colorByPoint property in plotOptions to true:

plotOptions: {
   colorByPoint: true
}

Here is the example: https://codepen.io/anon/pen/KoLzjL?editors=0010

Upvotes: 2

Related Questions