CODEWITHSUNDEEP
highcharts
abhishek mehra
abhishek mehra

Reputation: 129

Change the color of bar on condition in highcharts

I am using highcharts and I want to change the color of bar depending on their Y axis values.

Something like:

{
    color: '#92D050', //DEFAULT COLOR OF CURRENT YEAR BAR ON EACH GROUP
    name: 'AUG',
    shadow: false,
    data: [
       { y: 66, color: '#92D050' },
       { y: 55, color: 'red' },
       { y: 78, color: '#92D050' },
       { y: 55, color: 'red'}
    ]
}

Here how can I apply codition like y: > 60

Upvotes: 1

Views: 6119

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can iterate for each element and modify SVG parameter like fill.

http://jsfiddle.net/CaPG9/

var max = 200;

$.each(chart.series[0].data,function(i,data){

   if(data.y > max)
       data.graphic.attr({
       fill:'red'
   });

});

Upvotes: 4

rafael
rafael

Reputation: 1

It doesn't work, cause if you put the mouse over the columns, the color reset for the original.

I solved with this code, using a variable that counts how many columns I want to color. In my case, j is set before to 6.

var j = 6;

$.each(chart.series[0].data, function(i,data){

   for (var n = 0; n <= j; n++) {

      chart.series[0].data[n].update({color:'#441606'});

   }

});

Upvotes: 0

Related Questions