Change Color of Volume Columns (High/Low) in HighCharts

Question

I\'ve got a simple chart showing candlesticks with volume columns underneath: http://jsfiddle.net/T83Xy/

Basically, I want to use black and red for the columns depending

Answer 1

At first, you need to set series.turboThreshold to 0 if you have a big amount of points. This will disable the input data format check.

Then, to apply column colors depending on candles, I suggest you this piece of code:

Highcharts.seriesTypes.column.prototype.pointAttribs = (function(func) {
    return function(point, state) {
      var attribs = func.apply(this, arguments);
      
      var candleSeries = this.chart.series[0]; // Probably you'll need to change the index
      var candlePoint = candleSeries.points.filter(function(p) { return p.index == point.index; })[0];

      var color = (candlePoint.open < candlePoint.close) ? '#FF0000' : '#000000'; // Replace with your colors
      attribs.fill = state == 'hover' ? Highcharts.Color(color).brighten(0.3).get() : color;
      
      return attribs;
    };
}(Highcharts.seriesTypes.column.prototype.pointAttribs));

Be careful as this code will affect ALL of your charts that currently on page. But you can easily add some conditions to run this only on specific chart. Here is a default Highstock demo with the code above.