Question

Using http://api.highcharts.com/highcharts#loading

Is it possible to have an image as part of the overlay that is shown? specifically a “loading” gif image?

I’ve tried using the labelStyle section, but no luck so far!

Answer 1

After examining the API. This does seem to be possible.

labelStyle accepts any valid CSS. Properties that are normally hyphenated remove the hyphen, and capitalize the next letter. This means we can use something like background-image to supply a background image (like a loading .gif).

var chart = new Highcharts.Chart({
    // ...

    loading: {
        labelStyle: {
            backgroundImage: 'url("http://jsfiddle.net/img/logo.png")',
            display: 'block',
            width: '136px',
            height: '26px',
            backgroundColor: '#000'
        }
    },

    // ...
});

Example fiddle here.