Highcharts Stock

author(s): Torstein Hønsi

HTML

<div id="container"></div>
<button id="button1" class="autocompare">Set extremes 1</button>
<button id="button2" class="autocompare">Set extremes 2</button>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript">
  var data = [
    [1558887360000, 85.26883713453887],
    [1558887420000, 82.93413211258363],
    [1558887480000, 84.58480829908949],
    [1558887540000, 87.33672816662241],
    [1558887600000, 92.39130896222217],
    [1558887660000, 81.03324105939805],
    [1558887720000, 83.36281148263531],
    [1558887780000, 84.53410407457415],
    [1558887840000, 96.58942250711519],
    [1558887900000, 93.48777664554561],
    [1558887960000, 92.98100591972145],
    [1558888020000, 86.40688528217443],
    [1558888080000, 88.83403213742662],
    [1558888140000, 99.0172558521015],
    [1558888200000, 94.31409541012434],
    [1558888260000, 93.29340233657574],
    [1558888320000, 97.6627741462103],
    [1558888380000, 84.90175921007926],
    [1558888440000, 99.59429854950511],
    [1558888500000, 92.92187908008133],
    [1558888560000, 82.70240456281499],
    [1558888620000, 86.7190532575719],
    [1558888680000, 99.87783768024124],
    [1558888740000, 86.6625465348651],
    [1558888800000, 92.87024616017395],
    [1558888860000, 88.58362365979752],
    [1558888920000, 84.2271418496686],
    [1558888980000, 90.74137094823853],
    [1558889040000, 97.32449484315929],
    [1558889100000, 92.04250093357398],
    [1558889160000, 91.00874190197871],
    [1558889220000, 93.43023377605115],
    [1558889280000, 87.74767799209826],
    [1558889340000, 96.73773695283761],
    [1558889400000, 88.45333206404963],
    [1558889460000, 97.43084661681692],
    [1558889520000, 82.76036471546485],
    [1558889580000, 92.71007511781754],
    [1558889640000, 83.11325655227922],
    [1558889700000, 96.57072070285825],
    [1558889760000, 92.76648966427756],
    [1558889820000,...

CSS

.highcharts-plot-background {
  fill: black !important;
}

TypeScript

let pageBottom = window.innerHeight;
let requiredAxisHeight = 150; //(in pixels)
let navigatorAndLabelsize = 85;
let chart = Highcharts.stockChart('container', {

  chart: {
    zoomType: 'x',
    marginBottom: 0,
    height: (requiredAxisHeight * 4) + navigatorAndLabelsize,
    scrollablePlotArea: {
      minHeight: 200,
      scrollPositionY: 0
    }
  },

  navigator: {
    top: pageBottom - 80
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      day: '%H:%M<br/>%e %b',
    },
    labels: {
      autoRotation: 0
    },
    tickInterval: 900000,
    tickPositioner: function() {
      var defaultTicks = this.tickPositions,
        newTicks, previousDate = null, higherRanks = {};

      if (
        this.toPixels(defaultTicks[1]) -
        this.toPixels(defaultTicks[0]) <
        50
      ) {
        newTicks = this.tickPositions.filter(function(el, i) {
          if (i % 4 === 0) {
            var current = new Date(el).setHours(0, 0, 0, 0);
            if (current !== previousDate) {
              higherRanks[el] = 'day';
            }
            previousDate = current;
            return true;
          } else {
            return false
          }
        });
				console.log(higherRanks);
        newTicks.info = this.tickPositions.info;
        newTicks.info.higherRanks = higherRanks;
        return newTicks
      }
    },
    //tickPixelInterval: 50,
    ordinal: false
  },
  yAxis: [{
      title: {
        text: 'GOOGL'
      },
      opposite: false,
      height: requiredAxisHeight,
      top: 0,
      offset: 0
    }, {
      title: {
        text: 'MSFT'
      },
      opposite: false,
      height: requiredAxisHeight,
      top: requiredAxisHeight,
      offset: 0,
    },
    {
      title: {
        text: 'GOOGL'
      },
      opposite: false,
      height: requiredAxisHeight,
      top: requiredAxisHeight * 2,
      offset: 0
    }, {
      title: {
        text: 'MSFT'
      },
      opposite: false,
      height:...