Highcharts-Vue "Infinite Update Loop" Error

[mdf96]

Expected behaviour

I am using highcharts-vue wrapper, I am developing for a mobile application using chrome with the debug level of console log enabled. Pressing "Add Data" button runs this.options.series[0].data.push([i++,3]); where options options: { series: [{id: "1", data: [[0,0],[1,1]]}] } is declared in the data() function of the Vue export of a single file component. I expect one point to be added to the series and the chart updated relatively quickly, without errors.

Actual behaviour

The chart does update after a moment but only after giving several warnings and finally and infinite update loop error. The same data point is added ~100 times, and subsequently adding data in the future leads to Error #15s (data out of order -- because of duplicates) and poor performance.

Live demo with steps to reproduce

This only occurs in Highcharts 7.X
Changing the version back down to 6.2 will show expected behavior.
https://codesandbox.io/embed/moyjol492j

Product version

Highcharts 7.X

Affected browser(s)

Only tested in Chrome & Edge

[pawelfus]

Hi @mdf96

Thanks fro reporting the issue. It looks like problem with points defined as arrays. Using simple values works without issues: https://codesandbox.io/s/10o15oxrpj

@Denyllon - could you take a look?

[Denyllon]

Hi @mdf96 ,

Basically, mutating data in Vue component is a bit not consistent with its patterns of implementation, and it's always better (or much safer) to assign new array with new data, than pushing that new value directly into an existing component data. I recommend you to write your addData() method like below:

methods: {
    addData() {
      this.options.series[0].data = [...this.options.series[0].data, [this.i++, 3]];
      console.log(this.options.series[0].data)
    }
  }

If you'll apply the above solution, then your example will work correctly.

Regarding a performance of that conception, I'm not really sure what's happening with old data arrays "under the hood", but I hope that Vue cares about that. Anyway, that question would be better to ask Vue developers.

Kind regards!

[sebastianbochan]

Closed due to inactivity.