There is a chart instance already initialized on the dom.

[y0nd0]

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",
}

[kevin-objectstudio]

@y0nd0 What version of angular are you on?

[jtomek]

Angular 12

[alextroto]

Same issue: Angular 12, "echarts": "^5.2.1", "ngx-echarts": "^7.0.2",

[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]

?

[sergioriverafl]

I solved it in vue 3, implementing a different id for each graph.

[rami-alloush]

Thanks, @sergioriverafl, I was able to do the same in Angular v16, having the ID as variable that changes with each chart solved it for me.

    <div
      echarts
      [options]="options"
      class="echart"
      [id]="'tankId' + tankId"
    ></div>