Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/7.0.1/highcharts.src.js"></script>
<script src="https://code.highcharts.com/7.0.1/modules/annotations.src.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="height: 400px; min-width: 380px"></div>

CSS

#container {
  max-width: 800px;
  min-width: 380px;
  height: 400px;
  margin: 1em auto;
}

JavaScript

// Now create the chart
Highcharts.chart('container', {

  annotations: [{
    labelOptions: {
      backgroundColor: 'rgba(255,255,255,0.5)',
      verticalAlign: 'top',
      y: 15
    },
    labels: [{
      events: {
        click() {
          alert("works - from label definition")
        }
      },
      point: {
        xAxis: 0,
        yAxis: 0,
        x: 3,
        y: 4,
      },
      text: 'Arbois',
    }],
    events: {
      click: function(e) {
        alert('works - from annotation definition');
      }
    }
  }],

  series: [{
    data: [1, 2, 3, 4, 5, 6],
  }]

});