Highcharts Demo

author(s): Torstein Hønsi

HTML

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

(function(H) {
  H.wrap(H.Annotation.prototype, 'initLabel', function(proceed, shapeOptions) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    var label = this.labels[this.labels.length - 1]
    var annotation = label.annotation
    if (label && annotation) {
      label.element.onclick = label.options.events.click || annotation.options.events.click
    }
  })
})(Highcharts)

// 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],
  }]

});