Vault data

author(s): Torstein Hønsi

by pepperdigital

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/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 600px; min-width: 310px"></div>

CSS

/* Series Colours*/
.highcharts-point.highcharts-color-0,
.highcharts-legend-item.highcharts-color-0 .highcharts-point,
.highcharts-tooltip .highcharts-color-0 {
	fill: #F9A630;
} 
.highcharts-legend-item-hidden * {
fill: #cccccc !important;
transition: fill 250ms;
}
.highcharts-point.highcharts-color-1,
.highcharts-legend-item.highcharts-color-1 .highcharts-point,
.highcharts-tooltip .highcharts-color-1 {
	fill: #8E9090;
}
.highcharts-point.highcharts-color-2,
.highcharts-legend-item.highcharts-color-2 .highcharts-point,
.highcharts-tooltip .highcharts-color-2 {
	fill: #562361;
}
.highcharts-point.highcharts-color-3,
.highcharts-legend-item.highcharts-color-3 .highcharts-point,
.highcharts-tooltip .highcharts-color-3 {
	fill: #18B5BB;
}
.highcharts-point.highcharts-color-4,
.highcharts-legend-item.highcharts-color-4 .highcharts-point,
.highcharts-tooltip .highcharts-color-4 {
	fill: #9CA045;
}
.highcharts-point.highcharts-color-5,
.highcharts-legend-item.highcharts-color-5 .highcharts-point,
.highcharts-tooltip .highcharts-color-5 {
	fill: #F9A630;
}
.highcharts-point.highcharts-color-6,
.highcharts-legend-item.highcharts-color-6 .highcharts-point,
.highcharts-tooltip .highcharts-color-6 {
	fill: #F15A26;
}

/* Colours */
.highcharts-background {
    fill: #FFFFFF;
  stroke: #FFFFFF;
}
.highcharts-point {
stroke-width: 0px  !important;
}

.highcharts-legend-item rect.highcharts-point {
width: 16px;
height: 16px;
rx: 14px;
ry: 14px;
y: 12px;
x: 0px;
}
.highcharts-plot-band {
fill: rgba(204, 214, 235, 0.2) !important;
}


.highcharts-grid-line {
  stroke: rgba(204, 214, 235, 0) !important;
}
.highcharts-tick {
  stroke: rgba(204, 214, 235, 0.5);
}
.highcharts-axis-title {
  fill: #000000 !important;
}
.highcharts-axis-labels text {
  fill: #000000 !important;
  }

/* Tooltips */
.highcharts-tooltip-box .highcharts-label-box {
    fill: rgb(255, 255, 255);
    fill-opacity: 1;
    stroke-width: 0px;
}
.highcharts-markers {
    stroke-width: 2px;
    fill:...

JavaScript

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function (data) {

    // split the data set into ohlc and volume
    var ohlc = [],
        volume = [],
        dataLength = data.length,
        // set the allowed units for data grouping
        groupingUnits = [[
            'month',                         // unit name
            [1]                             // allowed multiples
        ], [
            'month',
            [1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12]
        ]],

        i = 0;

    for (i; i < dataLength; i += 1) {
        ohlc.push([
            data[i][0], // the date
            data[i][1], // open

        ]);

        volume.push([
            data[i][0], // the date
            data[i][5] // the volume
        ]);
    }


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

        rangeSelector: {
            selected: 0,
           inputEnabled: false
        },
     exporting: {
        enabled: false
    },

    credits: {
        enabled: false
    },
        title: {
            text: ''
        },
    navigator: {
        height: 80
    },
        yAxis: [{
            labels: {
                align: 'left',
                x: 3
            },
            title: {
                text: 'Gold - Troy Ounces (000s)'
            },
            height: '45%',
            lineWidth: 2,
            resize: {
                enabled: true
            }
        }, {
            labels: {
                align: 'left',
                x: 3
            },
            title: {
                text: 'Silver - Troy Ounces (000s)'
            },
            top: '55%',
            height: '45%',
            offset: 0,
            lineWidth: 2
        }],

        tooltip: {
            split: true
        },

        series: [{
            type: 'column',
            name: 'AAPL',
            data: ohlc,
            dataGrouping: {
                units: groupingUnits
            }
        }, {
           ...