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

The current (HighCharts 7+) solution for this, which doesn't require overriding any methods, is to simply set the color attribute for the volume point according to the comparison between the current candlestick point's open and its close: green if <, red if >, and yellow if equal.

Here is a minimal example.

// Return a color matching the candle by comparing the open (1) and close (4)
function volumeBarColor(point) {
  if (point[1] < point[4])
    return 'green';
  if (point[1] > point[4])
    return 'red';
  return 'yellow';
}

Highcharts.getJSON('https://www.highcharts.com/samples/data/aapl-ohlcv.json', data => {

  // Split the data set into ohlc and volume
  const ohlc = [],
      volume = [];

  for (let i = 0; i < data.length; i += 1) {
    ohlc.push([
      data[i][0], // the date
      data[i][1], // open
      data[i][2], // high
      data[i][3], // low
      data[i][4], // close
    ]);

    volume.push({
      x: data[i][0], // the date
      y: data[i][5], // the volume
      color: volumeBarColor(data[i]),
    });
  }


  // Create the chart
  Highcharts.stockChart('container', {

    title: {
      text: 'AAPL Historical'
    },

    yAxis: [{
      labels: {
        align: 'right',
        x: -3
      },
      height: '60%',
    }, {
      labels: {
        align: 'right',
        x: -3
      },
      top: '65%',
      height: '35%',
      offset: 0,
    }],

    series: [{
      type: 'candlestick',
      name: 'AAPL',
      data: ohlc,
    }, {
      type: 'column',
      name: 'Volume',
      data: volume,
      yAxis: 1,
    }]
  });
});