apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG

https://apexcharts.com

MIT License

14.28k stars 1.3k forks source link

Charts randomly stop working when using Tabs #2137

Open PrzemyslawKlys opened 3 years ago

PrzemyslawKlys commented 3 years ago

Bug report

Full code: https://codepen.io/MadBoyEvo/pen/dypKEMX

Behavior: ErrorApex

I've created sample charts where charts on the 2nd and 3rd tab stop working. They sometime come back on F12 press (which forces resize) and keep on working, that is until I press F5 it stops working again.

I've posted the code in codepen but you may not be able to replicate it in there. I am able to replicate it when I use a local file (as this is how I work with ApexCharts)

Example-ChartTabs.zip

PrzemyslawKlys commented 3 years ago

Changing 3.23 to 3.22 solves the issue.

        <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js" type="text/javascript"></script>
        <script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20180112/classList.min.js" type="text/javascript"></script>
        <script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn@1.0.0/findIndex.min.js" type="text/javascript"></script>
        <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.22.0/dist/apexcharts.min.js" type="text/javascript"></script>

junedchhipa commented 3 years ago

Can you please update the Codepen link? The link you provided is not showing the issue you mentioned.

PrzemyslawKlys commented 3 years ago

Sorry, updated codepen - it didn't save last time. https://codepen.io/MadBoyEvo/pen/dypKEMX

manueledones commented 3 years ago

I have a similar issue, but changing to 3.22 doesn't solve it. I'm using angular 11, angular material tab, chrome 88 If I resize the window the charts will appear... I will provide a stackblitz when I have time if it may help

heyanctil commented 3 years ago

I have a similar issue, but changing to 3.22 doesn't solve it. I'm using angular 11, angular material tab, chrome 88 If I resize the window the charts will appear... I will provide a stackblitz when I have time if it may help

@manueledones Have you tried to wrap the content of your tab? I had the same problem you describe and it works with ng-template.

PrzemyslawKlys commented 3 years ago

Just wanted to add that it works fine in the newest versions - so I'm good to close the issue.

ultra86 commented 3 years ago

I'm still having this issue with the latest version. If it helps anyone, wrap your charts in a container that you show/hide instead of show/hiding the charts themselves. It seems charts do not like to be hidden directly.

do this:

NOT this: