CODEWITHSUNDEEP
javascripthighchartsloader
user2820794
user2820794

Reputation: 37

Highcharts show loading icon when fetching data in javascript

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({
});

Upvotes: 1

Views: 9049

Answers (1)

stpoa
stpoa

Reputation: 5573

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.net/hLj1advd/

Upvotes: 5

Related Questions