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.
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 click event and then remove the point. We will use the Highcharts.addEvent() method to register an event handler as follows:
(function( H ) {
H.Chart.prototype.callbacks.push(function( chart ) {
H.addEvent( chart.series[0].points, 'click', function( e ) {
e.point.remove();
});
});
})( Highcharts );The addEvent() method receives an HTML element or a custom object as the first argument and the type of event as the second argument. The final argument is the event handler function that receives an event object as its argument. The event object contains information about the event fired and the corresponding element or the object.
We navigate to the point that has been clicked through e.point and call the Point.remove() method to remove the point.
Although our function doesn't do much in this case, it should give you a good basis to start experimenting on your own and build some advanced functionality.
Sometimes we need to alter the default behavior of the methods that Highcharts uses for its components. We can do so by using the Highcharts.wrap() method that accepts the parent object of the method to be altered, the name of the method, and a replacement method, as its arguments, respectively.
In the following code example, we will alter the hide() method of the tooltip component that is responsible for hiding the tooltip when the mouse pointer leaves it. We will alter the method to not do anything and hence keep the tooltip always visible.
(function( H ) {
H.wrap( H.Tooltip.prototype, 'hide', function() {
//do nothing
});
})( Highcharts );We start by wrapping our code inside the same self-invoking anonymous function. Inside the function, we call the Highcharts.wrap() method for the hide() method of the tooltip component. We pass an empty function that does nothing and hence keeps the tooltip visible once it's shown.
Note
You can learn more about extending Highcharts at the following link:
http://www.highcharts.com/docs/extending-highcharts/extending-highcharts
If you want to learn more about the Highcharts class structure, its components, and methods, then don't be afraid to jump inside the code. The source file we have been using in our examples is the minified one and you can find the actual source in the Highcharts-4.x.x/js/highcharts.src.js file.