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

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

CSS

.highcharts-container rect,
.highcharts-container text,
.highcharts-container path {
  transition: opacity 1s;
}

.highcharts-container .fade-in {
  opacity: 1;
}

.highcharts-container .fade-out {
  opacity: 0;
}

JavaScript

function showTooltip(xAxis, event) {
  var chart = xAxis.chart,
    nav = chart.navigator,
    leftTooltip,
    rightTooltip;

  nav.tooltips = nav.tooltips || [];
  leftTooltip = nav.tooltips[0];
  rightTooltip = nav.tooltips[1];

  // Create:
  if (!leftTooltip) {
    nav.tooltips[0] = leftTooltip = chart.renderer
      .label('', 0, 0, 'callout')
      .attr({
        fill: 'rgba(102,133,194,0.3)',
        'stroke-width': 1,
        stroke: '#cccccc',
        padding: 3,
        r: 3,
        zIndex: 6,
        align: 'center'
      })
      .css({
        color: '#999999',
        fontSize: '10px'
      })
      .add();
  }

  if (!rightTooltip) {
    nav.tooltips[1] = rightTooltip = chart.renderer
      .label('', 0, 0, 'callout')
      .attr({
        fill: 'rgba(102,133,194,0.3)',
        'stroke-width': 1,
        stroke: '#cccccc',
        padding: 3,
        r: 3,
        zIndex: 6,
        align: 'center'
      })
      .css({
        color: '#999999',
        fontSize: '10px'
      })
      .add();
  }

  // Update text and position:
  leftTooltip.show().attr({
    x: nav.left + parseInt(nav.zoomedMin),
    y: nav.top - 25,
    text: Highcharts.dateFormat('%d-%m-%Y', xAxis.min),
    anchorX: nav.left + parseInt(nav.zoomedMin),
    anchorY: nav.top,
  });

  rightTooltip.show().attr({
    x: nav.left + parseInt(nav.zoomedMax),
    y: nav.top - 25,
    text: Highcharts.dateFormat('%d-%m-%Y', xAxis.max),
    anchorX: nav.left + parseInt(nav.zoomedMax),
    anchorY: nav.top
  });
}

function hideTooltip(chart) {
  if (chart && chart.navigator) {
    (chart.navigator.tooltips || []).forEach(
      function(tooltip) {
        tooltip.hide();
      }
    );
  }
}

Highcharts.addEvent(document, 'mouseup', function() {
  Highcharts.charts.forEach(function(chart) {
    hideTooltip(chart);
  });
});

$.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function(data) {
  // Create the chart
  Highcharts.stockChart('container', {


    rangeSelector:...