How do I add an event listener to a Highcharts object *AFTER* I've created it

Question

I\'m trying to add an event listener to a highcharts object after it\'s been created. I can add one during declaration. When I try to use the chrome console to sort out where to

Answer 1

If you want to add an event listener after the chart is already created, the documentation provides some insight regarding extending highcharts:

Events can be added to the instance through framework event binding. If your framework is jQuery, you can for example run $(chart).bind('load', someFunction);

There is even some mention in the "Hooking up to Chart.init" section (on the same page) as to how you might bind an event after the chart has rendered, but it is a more invasive solution. I've adapted the code sample below with some modifications:

// General, global event listener
var globalCallback = function (chart) {

    // Specific event listener
    Highcharts.addEvent(chart.container, 'click', function (e) {
        e = chart.pointer.normalize();
        console.log('Clicked chart at ' + e.chartX + ', ' + e.chartY );
    ​});

    // Specific event listener
    Highcharts.addEvent(chart.xAxis[0], 'afterSetExtremes', function (e) {
        console.log('Set extremes to ' + e.min + ', ' + e.max);
    });
}

// Add `globalCallback` to the list of highcharts callbacks
Highcharts.Chart.prototype.callbacks.push(globalCallback);

You can also take a look at their example JSFiddle for this scenario.