Hollow Candlestick

author(s): Karol Kolodziej

by jeffgw

HTML

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

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

CSS

#container {
    height: 400px;
    min-width: 310px;
}

JavaScript

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function (data) {
    Highcharts.stockChart('container', {
        rangeSelector: {
            selected: 1
        },
        navigator: {
            series: {
                color: Highcharts.getOptions().colors[0]
            }
        },
         yAxis: {
        crosshair: true
    },

        annotations: [{
          draggable: false,
          zIndex:1,
          shapes: [{
            points: [{
              x: 1635255000000,
              y: 140,
              xAxis: 0, // xAxis reference used, use xAxis value
              yAxis: 0  // yAxis reference used, use xAxis value
            }, {
              x: 1635255000000,
              y: 150,
              xAxis: 0,
              yAxis: 0
            }, {
              x: 1653571800000,
              y: 150,
              xAxis: 0,
              yAxis: 0
            }, {
              x: 1653571800000,
              y: 140,
              xAxis: 0,
              yAxis: 0
            }],
            fill:'#FAA0A0',
            stroke:'#FAA0A0',
            type: 'path'
          }]
        }],
        series: [{
            type: 'hollowcandlestick',
            name: 'Hollow Candlestick',
            data: data
        }]
    });
});