ElementStacks

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<script src="http://highcharts.com/js/modules/ohlc.src.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.setOptions({
    colors: ['#058DC7', 'rgba(0, 0, 0, 0)']
});


var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    xAxis: {
        type: 'datetime',
        max: 1061769600000 + 30 * 24 * 3600 * 1000
    },

    tooltip: {
        shared: true,
        crosshairs: true,
        style: {
        color: '#000000',
        fontSize: '9pt',
        padding: '5px'
        },
        formatter: function() {
            var s = '<b>'+ this.x +'</b><br/>';
            console.log(this.points);
            var high;
            var low;
            
            $.each(this.points, function(i, point) {
                if(point.series.name === 'high'){
                    high = point.y;
                }
                else{ low = point.y }
            });
            s += 'high: $' + (high + low) + '<br/>';
            s += 'low: $'+ low + '<br/>';
            
            return s;
        },
    },
  plotOptions: {
         column: {
            stacking: 'normal',
             shadow: false,
         }
      },
     
    // This data is not the usual stock info as this represents the day high and day low rather than
    // the start day end day.
    
    legend:false,
    series: [{
        name:"high",
        type:'OHLC',
        data: [
           ...