There is a chart instance already initialized on the dom.

I just created one chart and get this warning on console:

There is a chart instance already initialized on the dom. (echarts.js:2168)

I just update options. I’m on Ionic (Angular) and show this chart on page navigation. But this is not the problem. I get this warning only once or twice (directly at the same time).

If I navigate back and then forward again to the page with the chart, there is no more warning. Only the two (or sometimes only one) message you see above.

On ngOnChanges I reassign the chart options like this.options = {...this.options} to trigger an update. Any idea? …

{
    "echarts": "^5.0.2",
    "ngx-echarts": "^6.0.1",
}

[MukeshS-hexaware]

Instead of updating the object passed to [options], you can define the changing data in a separate variable and pass that variable to [merge].

Example:

HTML:

<div echarts [options]="gaugeCommonOptions" [merge]="cpuLoadChartOptions"></div>

Component:

@Component()
export class MyComponent {
  gaugeCommonOptions: EChartsOption = {
    series: [
      {
        type: 'gauge',
      }
    ]
  }
  cpuLoadChartOptions: EChartsOption = {};

  plotCpuLoad(): void {
    this.cpuLoadChartOptions = {series: [{data: [100]}]}
  }
}

[apoorv-2204]

?