Highcharts Demo

author(s): Torstein Hønsi

by ewolden

HTML

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

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

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  title: {
    text: 'US and USSR nuclear stockpiles'
  },
  subtitle: {
    text: 'Sources: <a href="https://thebulletin.org/2006/july/global-nuclear-stockpiles-1945-2006">' +
      'thebulletin.org</a> &amp; <a href="https://www.armscontrol.org/factsheets/Nuclearweaponswhohaswhat">' +
      'armscontrol.org</a>'
  },
  xAxis: {
    allowDecimals: false,
    labels: {
      formatter: function() {
        return this.value; // clean, unformatted number for year
      }
    }
  },
  yAxis: {
    title: {
      text: 'Nuclear weapon states'
    },
    labels: {
      formatter: function() {
        return this.value / 1000 + 'k';
      }
    }
  },
  tooltip: {
    pointFormat: '{series.name} had stockpiled <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
  },
  plotOptions: {
    area: {
      pointStart: 1940,
      marker: {
        enabled: false,
        symbol: 'circle',
        radius: 2,
        states: {
          hover: {
            enabled: true
          }
        }
      }
    }
  },
  series: [{
    name: 'USA',
    trackByArea: true,
    data: [{
      y: null,
      drilldown: 'driller'
    }, {
      y: null,
      drilldown: 'driller'
    }, {
      y: null,
      drilldown: 'driller'
    }, {
      y: null,
      drilldown: 'driller'
    }, {
      y: null,
      drilldown: 'driller'
    }, {
      y: 6,
      drilldown: 'driller'
    }, {
      y: 11,
      drilldown: 'driller'
    }, {
      y: 32,
      drilldown: 'driller'
    }, {
      y: 110,
      drilldown: 'driller'
    }, {
      y: 235,
      drilldown: 'driller'
    }, {
      y: 369,
      drilldown: 'driller'
    }, {
      y: 640,
      drilldown: 'driller'
    }, {
      y: 1005,
      drilldown: 'driller'
    }, {
      y: 1436,
      drilldown: 'driller'
    }, {
      y: 2063,
      drilldown: 'driller'
    }, {
      y: 3057,
      drilldown: 'driller'
    }, {
      y: 4618,
      drilldown: 'driller'
    },...