score:21

Accepted answer

indeed the delayed call is not a very good approach. the load event is working properly, but the current chart is referred by the this keyword, i.e.

// create the chart
var chart = new highcharts.chart({
    chart: {
        renderto: 'container',
        events: {
            load: function(event) {
                //when is chart ready?
                console.log(this); //this refers to the loaded chart.
            }
        }        
    },
    xaxis: {
    },

    series: [{
        animation: false,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
    }]
});

demo

hope this helps :)

score:3

this is definitely less elegant than the accepted answer, but still works fine with a few lines of code. the essence is to simply poll all chart container html elements.

the code below assumes you have one or more highcharts attached to elements having class="chart": 

var chartstoload = [];

$('.chart').each(function(n,elem) {

    chartstoload[n] = window.setinterval(function() {

        if(typeof($(elem).highcharts()) !== 'undefined') {

            // it's loaded now, go ahead...
            $(elem).highcharts().dosomehighchartsstuffhere()

            // permanently stop polling
            window.clearinterval(chartstoload[n]);
        }

  }, 100); // check every 100ms


});

score:6

the highcharts.chart constructor takes a callback argument that is called "when the chart object is finished loading and rendering". the chart object is passed as an argument to the callback.

$("#the-chart").highcharts(options, function (chart) {
    alert("the chart is ready now");
    console.log("chart", chart);
});

chart (object options, function callback) this is the constructor for creating a new chart object.

parameters

  • options: object
    the chart options, as documented under the heading "the options object"in the left menu.

  • callback: function
    a function to execute when the chart object is finished loading and rendering. in most cases the chart is built in one thread, but in internet explorer version 8 or lessthe chart is sometimes initiated before the document is ready, and in thesecases the chart object will not be finished directly after callingnew highcharts.chart(). as a consequence, code that relies on the newly built chart object should always run in the callback. defining a chart.event.load handler is equivalent.

returns

  • chart

Related Query

More Query from same tag