highchart gradient color negative to positive bar horizontal

Question

How to do this? In highchart ..

horizontal bar with gradient.. red to gray for negative to positive values

You can set the individual bar's color based on the value in pre-processing. Without knowing more details it is hard to say what specifically you should do. — wergeld, Dec 14 '16 at 20:14

score 0 · Accepted Answer · edited May 23 '17 at 12:13

If you use already a Highcharts module which uses a color axis, you can use its tweenColors function to find the intermediate color.

As was mentioned, you have to loop through the data and set the point's color. If you don't want to use any other module, you need to find intermediate colors - answer can be found here.

var data = [100, 50, 20, -10],
  min = Math.min.apply(null, data),
  max = Math.max.apply(null, data),
  total = max - min,
  colorMin = new Highcharts.Color('rgb(255, 0, 0)'),
  colorMax = new Highcharts.Color('white'),
  tweenColors = Highcharts.ColorAxis.prototype.tweenColors;

 coloredData = data.map(value => {
   var pos = (value - min) / total;

   return {
     y: value,
     color: tweenColors(colorMin, colorMax, pos)
   };
 });

example: http://jsfiddle.net/oudktg0o/

highchart gradient color negative to positive bar horizontal

1 Answers1