Graph disappears when changing data from another tab

[vibexpro]

On my project, I have two tabs with an Apexchart instance on each. The first chart's tab is active by default. As the page opens, both charts render normally as I switch tabs.

When the user updates the time range desired, it triggers an API call which updates a redux value that both charts use for series. The chart currently active updates flawlessly, but if I switch tabs, the (previously inactive) chart is blank.

I've noticed that on window resize the chart became visible (meaning render fine) I saw this is a common issue with vue.js and sadly I didn't find any official solution and I don't want to wait for any, so any workarounds?

Thanks in advance.

[francoiscabrol]

same issue for me... @HavivEderi have you finally find a workaround?

[francoiscabrol]

it looks like the problem occurs when we set the height to something else than auto...

[francoiscabrol]

The workaround I found is to add a small random value to the height during the render... not clean at all but works:

<Chart
           [...]
           height={360 + _.random(0, 1, true)}
/>

[vibexpro]

Hey,

I'm using a resize event trigger, also not a clean solution but it works.

window.dispatchEvent(new Event('resize')); Thanks for sharing your solution.

[francoiscabrol]

your workaround works better! Thank you :)

[HammadAhm3d]

Hey,

I'm using a resize event trigger, also not a clean solution but it works.

window.dispatchEvent(new Event('resize')); Thanks for sharing your solution.

Can you please elaborate it? I'm using ApexCharts in react js and they get empty whenever i move to another tab. Should I use the resize event in useEffect? Would you be kind enough to share a code snippet?

[ShantanuPhatke]

The workaround I found is to add a small random value to the height during the render... not clean at all but works:

<Chart
           [...]
           height={360 + _.random(0, 1, true)}
/>

Thanks! The idea of adding a small random number to the height helped me fix it. I am not sure why or how it works, would be great if you could explain

[ShantanuPhatke]

In my case the Pie chart was disappearing when either the container or window size changed, meaning even if I open the side nav drawer it would make the chart disappear. As per @francoiscabrol suggested, I added a random number between 1 and 2 (just so the difference isn't very noticeable) to the height property of the ReactApexChart component as below: <ReactApexChart options={options} series={series} type="pie" height={380 + Math.floor(Math.random() * 2) + 1} />

[pavanajmera]

Hey,

I'm using a resize event trigger, also not a clean solution but it works.

window.dispatchEvent(new Event('resize')); Thanks for sharing your solution.

To react what do we need to use?. In above Event refers for?