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

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 on whether it closes higher than the open or not. I've seen some samples by pushing Y: data, color: '#000000' as the parameter. The problem is I'm pushing a date and a volume number. I attempted to push X: date, Y: data, color: '#000000' but it's throwing errors and not giving me the expected result.

Answer 1

This worked perfectly for me:

$(function () {
jQuery.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {

    // split the data set into ohlc and volume
    var volumeColor = '';
    var ohlc = [],
        volume = [],
        dataLength = data.length,
        // set the allowed units for data grouping
        groupingUnits = [[
            'week',                         // unit name
            [1]                             // allowed multiples
        ], [
            'month',
            [1, 2, 3, 4, 6]
        ]],

        i = 0;

    for (i; i < dataLength; 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
        ]);
         if (i==0) {
        volumeColor = '#CCCCCC';
         } else {         
            if (data[i][1] >= data[i-1][1]) {
               volumeColor = '#006633';
            } else {
               volumeColor = '#CC0033';
            }
         }

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


    // create the chart
    $('#container').highcharts('StockChart', {

        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Historical'
        },

        yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'OHLC'
            },
            height: '60%',
            lineWidth: 2
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Volume'
            },
            top: '65%',
            height: '35%',
            offset: 0,
            lineWidth: 2
        }],

        series: [{
            type: 'candlestick',
            name: 'AAPL',
            data: ohlc,
            dataGrouping: {
                units: groupingUnits
            }
        }, {
            type: 'column',
            name: 'Volume',
            data: volume,
            yAxis: 1,
            turboThreshold: Number.MAX_VALUE,
            dataGrouping: {
                enabled: false,
                units: groupingUnits
            }
        }]
    });
});
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height:400px;min-width:310px"></div>

Answer 2

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.

Answer 3

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,
    }]
  });
});

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>

<div id="container"></div>