Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

JavaScript

$.getJSON(
  'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
  function(data) {
    var detailChart;

    // create the detail chart
    function createDetail(masterChart) {

      // prepare the detail chart
      var detailData = [],
        detailStart = data[0][0];

      $.each(masterChart.series[0].data, function() {
        if (this.x >= detailStart) {
          detailData.push(this.y);
        }
      });

      // create a detail chart referenced by a global variable
      detailChart = Highcharts.chart('detail-container', {
        chart: {
          marginBottom: 120,
          reflow: false,
          marginLeft: 50,
          marginRight: 20,
          inverted: true,
          style: {
            position: 'absolute'
          }
        },
        credits: {
          enabled: false
        },
        title: {
          text: 'Historical USD to EUR Exchange Rate'
        },
        subtitle: {
          text: 'Select an area by dragging across the lower chart'
        },
        xAxis: {
          type: 'datetime'
        },
        yAxis: {
          title: {
            text: null
          },
          maxZoom: 0.1
        },
        tooltip: {
          formatter: function() {
            var point = this.points[0];
            return '<b>' + point.series.name + '</b><br/>' + Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>' +
              '1 USD = ' + Highcharts.numberFormat(point.y, 2) + ' EUR';
          },
          shared: true
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          series: {
            marker: {
              enabled: false,
              states: {
                hover: {
                  enabled: true,
                  radius: 3
                }
              }
            }
          }
        },
        series: [{
          name: 'USD to EUR',
          pointStart: detailStart,
         ...