We want to show loading icon when the data loads and chart is made in highcharts.

Below is pseudo code:

// service call
// data is pushed in data set 
// and that data is used in highcharts.

$('Chart_name').highcharts({
});

We want to show loading icon when the data loads and chart is made in highcharts.

Below is pseudo code:

// service call
// data is pushed in data set 
// and that data is used in highcharts.

$('Chart_name').highcharts({
});

• javascript
• highcharts
• loader

• 2 What is the problem then? – VPK Commented Feb 3, 2017 at 7:10
• Please explain what you have tried, what you are expecting, if you have read the handbook. – pinturic Commented Feb 3, 2017 at 7:13
• You can set background image - see the answers here, read API for other options api.highcharts./highcharts/loading - example jsfiddle/86nuH/127 – morganfree Commented Feb 3, 2017 at 11:29

1 Answer 1

Render chart without data, then show loading screen, fetch data, hide loading screen.

Example:

// Options without data
const options = {
  series: [{
    data: [],
    type: 'column'
  }]
}

// Redner chart
const chart = Highcharts.chart('container', options)

// Simulate fetch request timeout, get data after some delay
setTimeout(() => {
  const data = [1,2,3]
  chart.hideLoading()
  chart.series[0].setData(data)
}, 2000)

// Show loading screen
chart.showLoading()

Live example: https://jsfiddle/hLj1advd/