Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.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: 400px; min-width: 310px"></div>

JavaScript

Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'AAPL Historical'
  },
  yAxis: [{
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: 'OHLC'
    },
    height: '60%',
    lineWidth: 2,
    resize: {
      enabled: true
    }
  }, {
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: 'Volume'
    },
    top: '65%',
    height: '35%',
    offset: 0,
    lineWidth: 2
  }],
  tooltip: {
    split: false,
    formatter: function() {
      var point = this.point,
        chart = point.series.chart,
        pointIndex = point.index,
        date = Highcharts.dateFormat('%b %e, %H:%M', this.x),
        volumePoint = chart.series[1].points[pointIndex],
        text =
        '<span style="color:' + point.color +
        '">\u25CF</span> ' + point.series.name +
        ': <b>' + point.y + '</b><br/>' +
        '<br><span style="color:' + volumePoint.color +
        '">\u25CF</span> ' +
        'Volume: <b>' + volumePoint.y +
        '</b><br>' + date;

      return text;
    }
  },
  series: [{
    type: 'spline',
    name: 'Price',
    data: [
      [1541514600000, 201.92],
      [1541601000000, 205.97],
      [1541687400000, 209.98],
      [1541773800000, 205.55],
      [1542033000000, 199],
      [1542119400000, 191.63],
      [1542205800000, 193.9],
      [1542292200000, 188.39],
      [1542378600000, 190.5],
      [1542637800000, 190],
      [1542724200000, 178.37],
      [1542810600000, 179.73],
      [1542983400000, 174.94],
      [1543242600000, 174.24],
      [1543329000000, 171.51],
      [1543415400000, 176.73],
      [1543501800000, 182.66],
      [1543588200000, 180.29],
      [1543847400000, 184.46]
    ]
  }, {
    type: 'column',
    name: 'Volume',
    data: [
      [1541514600000, 31882900],
      [1541601000000, 33424400],
      [1541687400000, 25362600],
      [1541773800000, 34365800],
      [1542033000000, 51135500],
      [1542119400000,...