Introduction to Highcharts events

For almost every Highcharts feature, there are a bunch of events that will unleash a whole set of custom interactions users can take vis-a-vis your charts.
In this article, we will show you the basic concept of Highcharts events within the chart feature, and how/when you can use them.
Let’s start with the basic chart events on the demo below:

Zoom in.
Click on the chart.
Resize the window.
Change the series type.

When the user interacts with the chart such as the zoom in, chart resize, etc. events occur. Each event on the chart has an event listener or handler that fires when an event occurs. For example, the code below displays a message for each of the event above:

  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'
  },

Here is the explanation of the events used in the demo above:

Load event

The load event is the first event to be fired, even before the render phase. Btw, the load event is fired only once at the beginning of the chart creation. That is why this part of code is usually used to:

Manipulate static/hardcoded data (check demo).
Updating chart options ( check demo).

Render event

The render event is a very universal and powerful event. It is fired after the load phase and after a few other events. Basically, whenever anything is changed in the chart – this event is triggered.
This function has to be treated with caution because you might accidentally create an infinite loop with this event.
Here are examples of how to use this event:

Manipulate dynamically loaded data.
Use SVG renderer to add custom responsive paths (check demo)

Redraw event

The redraw event may often be seen before render. Notice that this event isn’t fired at the initial chart rendering phase.
However, this function has one very popular use case – to force the chart to rerender once more. It is useful when dealing with a lot of updates at one time:

After each update, the redraw function is invoked. To get better performances, it is recommended to avoid invoking the redraw function each time by adding a second argument (‘false’) to the update method. Next, when all points are updated, you can force the chart to redraw just once. As this simple example shows, rendering time can be about ten times shorter:

Click event

The click event only gets fired after clicking on the chart plot area. If a chart is displayed on mobile devices, all click events will also be fired on touch. It helps to interact with users, usually used for getting coordinates of clicked points to use in the further functionalities. Notice that clicking on the series or point won’t fire this event unless you disable the enableMouseTracking property.
Click on the chart below to check the enableMouseTracking property in action:

Selection event

The selection event is fired after selecting the area on the chart. It might be helpful in situations when developers need to know the exact coordinates of selected areas. In the example below, the subtitle can be changed after zooming in or out.
Select a section on the chart below to fire the selection event:

Now you know how to use the chart property events, feel free to create demos, and explore the power of Highcharts events.

Post categories: