Browser Console: [ECharts] There is a chart instance already initialized on the dom.

[robertgz]

Description

I am seeing a browser console messages when a component containing the EChart is rendered multiple times while the chart is initializing. I am not sure if this is an issue or if I need to change how I use the EChart component.

The console message I see when using Chrome is:
[ECharts] There is a chart instance already initialized on the dom.

Link to Reproduction

https://stackblitz.com/edit/stackblitz-starters-6kgmdx?file=app%2Fpage.tsx

Steps to reproduce

1. Open the Stackblitz
2. Click Open Preview in a new tab at the top right of stackblitz and click on Connect to Project in the new tab/window.
3. Open the browser Console for the new tab/window.
4. The tab/window with the Preview may need to be refreshed a few times to see the message in the browsers Console.

JS Framework

Next.js 13 (TS)

Version

1.2.0

Browser

Google Chrome 126

Operating System

• macOS
• Windows
• Linux

Additional Information

If the number used in setInterval is increased from 200 to 2000 the console message does not show.

[hugocxl]

@robertgz fixed in 1.2.1

[toshiya14]

@robertgz fixed in 1.2.1

Still appears in 1.4.0

[hoeflerjo]

This issue appears not to be solved.
Like @toshiya14 it also still happens to me for most Charts without apparent reason.
I found out this only accures on the first render when the chart is rerendered the chart appears.
So my current solution: I use the useEffect hook without parameters and make a timeout with 1ms delay that just somehow triggers a rerender. In my case by just useing the next best useState I found.
Like this:

const [value, setValue] = useState(0);
useEffect(() => {
    setTimeout(() => {
      setValue(value);
    }, 1);
  });

But this is propably the dirtiest quick fix I came up with and I hate it.

Addition: the setValue forcing a rerender must also be a dependency in the Chart instance to force the rerender there.

[piotrzarzycki21]

I can confirm. I'm experiencing same issue here. Any chance it will be fixed ?

[hugocxl]

Hi guys, I am currently really busy and I cannot dedicate much time to solve it. It'd great if you could take a look (I can provide details for those who are interested).
I am planning on releasing a v2.0 with a fresher API in the upcoming future, but currently I am not getting much time to dedicate to the lib. Sorry for the inconveniences 🙏

[piotrzarzycki21]

Workaround from @hoeflerjo worked, but definitely I would love to look and see if I can provide PR. :)

[piotrzarzycki21]

If you could point me to the right direction @hugocxl or if you won't have time I will try to figure out myself what is going on, but it will be probably super slowly ;)

[hugocxl]

@piotrzarzycki21 sure. Whenever the init function is called the ECharts instance gets initialized.

react-echarts/src/use-echarts.ts

Line 164 in 68f40a9

return init(containerRef.current, theme, {

I tried disposing when the component unmounts (well I tried several options to do this, nothing worked), but somehow the instance does not get discarded. Therefore, next time init is called that warning is thrown.

Not sure what I'm missing here 😕

[piotrzarzycki21]

@piotrzarzycki21 sure. Whenever the init function is called the ECharts instance gets initialized.

react-echarts/src/use-echarts.ts

Line 164 in 68f40a9

return init(containerRef.current, theme, {

I tried disposing when the component unmounts (well I tried several options to do this, nothing worked), but somehow the instance does not get discarded. Therefore, next time init is called that warning is thrown.

Not sure what I'm missing here 😕

Thank you! :) I will dive into that, won't be quick since I'm busy as well, but this warning drive me crazy in our app. ;)

[brandanking-decently]

@hugocxl I have implemented a solution to this in the PR I created.

const setContainerRef = async (node: T) => {
    if (!node || node === containerRef.current) return;
    if (echartsRef.current) echartsRef.current.dispose();

    containerRef.current = node;
    echartsRef.current = await setupECharts(node, options);
    resizeObserverRef.current = startResizeObserver();

    setStarted(true);
};