Accepted answer

The easiest way is to create the events as you described in the first example, and in those functions execute all necesary event handlers from an array.

Something like:

  var redrawCallbacks = [];

  chart: {
      events: {
          redraw: function(event) {
              for (var i = 0; i < redrawCallbacks.length; ++i) redrawCallbacks[i].call(this, event);

See full example at:

Assuming you are using the default jQuery adapter, you can define events later with:

$(chart).on('redraw', function(){ alert('new event handler'); });

See demo at


You need to add callback (like event load), where you can also add redraw events. You need ot do this before creating chart.


var redrawCallbacks = [];

function appendOnRedrawEvent(callback) {

var loadCallbacks = [];

function appendOnLoadEvent(callback) {

appendOnLoadEvent(function () {
    alert('onload added dynamically');

H = Highcharts;
H.Chart.prototype.callbacks.push(function (chart) {
    for (var i = 0; i < loadCallbacks.length; ++i) loadCallbacks[i].call(this, event);

    H.addEvent(chart, 'redraw', function (e) {
        for (var i = 0; i < redrawCallbacks.length; ++i) redrawCallbacks[i].call(this, event);

//create chart
    series: [{
        data: [29.9, 71.5]

appendOnRedrawEvent(function () {
    alert('redraw added later');


For Highchart 4.2, you have to use the addEvent method to add event to chart object. Follow the below code, first retrieve highchart object and then add redraw/load event to it

var chart1= Highcharts.charts[0];
Highcharts.addEvent(chart1,'redraw', function(){alert('hi');});

Related Query

More Query from same tag