Accepted answer

To update a chart I usually do this:

    pointStart: newSeries[0].pointStart,
    data: newSeries[0].data
}, true); //true / false to redraw

Try calling redraw after the update.


In my case, I want to initialise my chart before the data is available. So I initialise my chart with an empty series, and then I update it with addSeries.

Full jsFiddle here:

My chart receives the data 2 seconds after being initialized:

setTimeout(function() {
}, 2000);

So I initialise it with an empty series:

initHighcharts: function() {
  this.chart = new Highcharts.Chart({
    chart: {
      type: 'column',
      renderTo: 'container'
    series: [] // initialisation with empty series. This is intentional

And whenever the data is available, I do this:

updateChart: function() {
  this.dataFromApi.forEach(function(serie) { // for each row of data, add a series
    this.chart.addSeries(serie, false); // false is to prevent redrawing
  this.chart.redraw(); // manually redraw
  this.chart.hideLoading(); // stop loading if showLoading() was call before

See the jsfiddle above for the full code details.

Related Query

More Query from same tag