Basic line

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height:300px"></div>
<button id="change">Change series</button>
<h2>
  EVENTS:
</h2>
<div id='text'>
</div>

JavaScript

let start = +new Date(),
  text = document.getElementById('text');

let chart = Highcharts.chart('container', {
  chart: {
    events: {
      click: function() {
        let message = `Click event- fired after ${new Date() - start} ms. <br>`
        text.innerHTML += message;
      },
      load: function() {
        let message = `Load event- fired after ${new Date() - start} ms. <br>`
        text.innerHTML += message;
      },
      render: function() {
        let message = `Render event- fired after ${new Date() - start} ms. <br>`
        text.innerHTML += message;
      },
      redraw: function() {
        let message = `Redraw event- fired after ${new Date() - start} ms. <br>`
        text.innerHTML += message;
      },
      selection: function() {
        let message = `Selection event- fired after ${new Date() - start} ms. <br>`
        text.innerHTML += message;
      },
    },
    zoomType: 'x'
  },
  title: {
    text: "Test events"
  },
	subtitle: {
    text: "Zoom in, change series, resize window or click on chart to test events."
  },
  series: [{
    data: [2, 5, 1, 6, 7, 8, 5, 5, 35, 34, 34, 63, 46, 34, 4, 53, 34]
  }],
});
text.innerHTML += `Finished rendering chart after ${new Date() - start} ms. <br>`
document.getElementById("change").addEventListener("click", function() {
  chart.series[0].update({
    type: 'column'
  });
});