Charts are sporadically rendering blank

[hbcondo]

This library has been working well for various chart types (bars, waterfall, scatter) but every now and then, the chart doesn't render. This occurs for both canvas and svg renderers as shown below. I'm not sure if this is specific to the code echarts library and / sveltekit. There are no console errors / warnings either. Occurs in both Safari and Chrome. Any insights on this is appreciated. Thanks!

<svg>

<div _echarts_instance_="ec_1724023873799" style="width: 100%; height: 100%;">
  <div style="position: relative; overflow: hidden; width: 1359px; height: 450px; cursor: default;">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="1359" height="450" style="position: absolute; left: 0px; top: 0px; user-select: none;">
      <rect width="1359" height="450" x="0" y="0" fill="none"></rect>
      <g>
        <path d="M40.77 380.5L1318.23 380.5" fill="transparent" stroke="#6E7079" stroke-linecap="round"></path>
      </g>
    </svg>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: 0px auto auto 0px !important;"></div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: 0px 0px auto auto !important;"></div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: auto auto 0px 0px !important;"></div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: auto 0px 0px auto !important;"></div>
  </div>
</div>

<canvas>

<div _echarts_instance_="ec_1724023873800" style="width: 100%; height: 100%;">
  <div style="position: relative; width: 1359px; height: 450px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
    <canvas data-zr-dom-id="zr_0" width="1359" height="450" style="position: absolute; left: 0px; top: 0px; width: 1359px; height: 450px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: 0px auto auto 0px !important;"></div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: 0px 0px auto auto !important;"></div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: auto auto 0px 0px !important;"></div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: auto 0px 0px auto !important;"></div>
  </div>
</div>

[bherbruck]

Can you give an example of the svelte code and version you are on? It sounds like some reactivity stuff and we'll need to pinpoint where that is happening.

[hbcondo]

Thank you for your quick reply. I was on echarts 5.5.0 and svelte-echarts 1.0.0-rc1 but have since upgraded to 5.5.1 and 1.0.0-rc3. I'm actually using the example on this repo's readme. Have you by chance encountered this issue before?

[bherbruck]

I haven't seen this yet in my testing. What browser are you using and do you have any motion preferences? I think the demo has some animations when the data updates every second which could be causing the issues you're seeing, this is the default behavior of echarts. Maybe try disabling animation on the chart.

[hbcondo]

Thanks, it's the same issue unfortunately in that even with animation set to false, the graph only renders sometimes. This is occurring on the latest versions of Safari and Chrome with and without Incognito / Private modes. All client side libraries are loading too. I do see a warning in the console sporadically now stating: [ECharts] Instance ec_1724027982161 has been disposed but that returns even when the chart does render successfully.