Extending Highcharts

Highcharts has been built in a modular way to help make extending convenient. This capability opens up new possibilities to enhance default functionality. Plugins can be built and custom events can be inserted to account for specific project requirements and client needs.

To extend Highcharts, we wrap our code inside a self-executing anonymous function as follows:

(function( H ) {
  //Our code here
})( Highcharts );

The function receives an argument, Highcharts; this prevents variable pollution in the global scope. In the following example, we will insert a new event handler for the Point component.

Adding custom event handlers

In order to add custom event listeners to a chart or its components, we need to push a function to the Chart.prototype.callbacks array. This function receives a chart object as its argument that can be further used to navigate through chart hierarchy.

In the following example, we will add a custom event handler to the Point component to listen for a...