angularechartsngx-echarts

echarts line + area buggy scale

I am using a line and an area in the same chart, and I have a button to change the data source, when I press the button sometimes the scale is wrong, the data is good but the displayed area is cut in some parts or it shows a colored area where it shouldn't, it's very random and I can't figure out a scenario that reproduces that bug 100%.

So here's how things are going: I am using Angular and the ngx-echarts wrapper, everytime I update the chart 2 async requests are sent and the chart gets updated after each response is received, here's the code that I am using to update the chart options:

this.chartOptions.series[serieIndex].data = response
this.chartOptions = {...this.chartOptions};

I tried with getting the chartInstance and calling setOptions with notMerge set to true but in vain.

Solution

  • Solved by clearing the series data before assigning new series. I didn't deep dive to see if it's a setter in echarts or something in ngx-echarts, but that solved my issue and I am happy with it, here's what did work for me:

    this.chartOptions.series[serieIndex].data = [...response];
this.chartOptions = {...this.chartOptions};

    or you can write it that way too:

    this.chartOptions.series[serieIndex].data = [];
this.chartOptions.series[serieIndex].data = response;
this.chartOptions = {...this.chartOptions};