[Solved]-when is a highchart completely loaded?-Highcharts

in Polymer 3 I had to use window.setTimeout() function to get width working properly as below.load: function() { window.setTimeout(() => { this.reflow(); }, 1); },

In angular project I had to use setTimeout() function to get width working properly as below:

setTimeout(()=>this.chart.reflow())

This was answered, but not clearly enough imo. Highcharts documentation says

... In most cases the chart is built in one thread, but in Internet Explorer version 8 or less the chart is sometimes initiated before the document is ready, and in these cases the chart object will not be finished directly after calling new Highcharts.Chart(). As a consequence, code that relies on the newly built Chart object should always run in the callback.

So, dealing with the chart object in IE8 must be done in the callback, i.e. new Highcharts.Chart(options, function(chart) { ... }). You can also use function() { ... } and use this in the function.

In regards to your specific concern re a loading message. I had to do it in the callback, but it works.

chart1 = new Highcharts.Chart(options, function(){
  this.showLoading();
});

Try with the redraw event. This event is triggered after loading, but also after the series was added and chart resizing.

$(function () {
    // create the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                redraw: function(event) {
                    alert ('Chart loaded');
                }
            }        
        },
        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]     
        }]
    });
});

Redraw event from offical Highcharts reference: http://api.highcharts.com/highcharts#chart.events.redraw

And demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-redraw/

In the load callback function, you can access the chart object by using "this" pointer.

        events: {
            load: function(event) {
                alert ('Chart loaded with series :'+ this.series[0].name);
                console.log(this);
            }
        }        

JsFiddle : http://jsfiddle.net/msjaiswal/AVygG/25/

Highcharts has callback function

 var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                redraw: function(event) {
                    alert ('Chart loaded');
                }
            }        
        },
        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]     
        }]
    },function(chart){

alert('LOADED');

});