Line Chart is loaded after user interaction

[tamerplc]

@traviscox i'm using Ignition 8.1.12 with Apex Latest Module .. Line chart loaded on the view after user interaction on the page (Like press on Side Menu bar ) . after that chart appears on the view .

this happened one the first load of the page or refresh the the page .

[traviscox]

Can you send over a backup of a view with that problem? I can't seem to replicate it.

[traviscox]

Issue has been resolved in 1.0.6:

https://github.com/Kyvis-Labs/ignition-apexcharts-module/releases/tag/1.0.6

[traviscox]

This issue was resolved improperly. It will revert back to the same behavior in 1.0.9.

https://github.com/Kyvis-Labs/ignition-apexcharts-module/releases/tag/1.0.9

However, all you need to do is wrap the chart inside of Flex container inside of the coordinate container when the coordinate container is in "percent" mode.

Can you update and let me know?

[traviscox]

*bump

[nikolai-wolterstorff]

@traviscox

This appears to still be an issue. Ignition 8.1.20, ApexCharts 1.0.9

Please see attached exported views. You can see I have the same ApexChart nested in different configurations of Flex & Coordinates. I have been having an issue where certain charts would not display until a resize of the viewport (which is what I assume @tamerplc is doing by opening the side bar). I found that if I put my charts (no nesting in a Flex type view) at grow=0, shrink=0, basis=50px, this issue would not occur. The moment I put grow=1 and shrink=1, the issue would re-appear. Sometimes the charts would display correctly the first time, sometimes not. Unfortunately I cannot share those views so I hope the views I attached and this thread's issue are related to mine (attached views replicate OP's problem). You will see charts "In Coord -> Flex" and "In Flex -> Coord -> Flex" do not show up until a viewport resize. apex.zip

[traviscox]

Fixed the resizing issue in 1.0.10: Can you download and try it out:

https://github.com/Kyvis-Labs/ignition-apexcharts-module/releases/tag/1.0.10

[traviscox]

Had to fix another small issue, now at 1.0.11:

https://github.com/Kyvis-Labs/ignition-apexcharts-module/releases/tag/1.0.11

[nikolai-wolterstorff]

It seems 1.0.10/1.0.11 fixed the issue. Thank you!

[nikolai-wolterstorff]

@traviscox, the view I attached in https://github.com/Kyvis-Labs/ignition-apexcharts-module/issues/7#issuecomment-1372297758 is fixed in versions > 1.0.9, but I am still having the same issue. This is with charts that are in widgets in a dashboard application (modified version of https://www.inductiveautomation.com/exchange/101/overview). I'm working on getting a view built that replicates the issue, as of right now my architecture and the views rely heavily on multiple project resources.

[nikolai-wolterstorff]

It appears the increase of bindings on the ApexChart properties correlates with the issue. It's as if the chart loads and renders, a late binding finishes executing, and then the chart won't display until viewport resize.

[traviscox]

Ok, send me an example. I had to put a timer in there that will force a reload after initial mount.

[nikolai-wolterstorff]

See attached project. Ignition: 8.1.20, ApexCharts: 1.0.12. If you open the "/" page, use the button to navigate away, then go backward/forward until one of the charts stays at "No Data". At that point the viewport resize will render it. ApexChartsBug_20230131230600.zip

[traviscox]

Ok, I think we have finally figured out the root of the problem. The issue was a race condition with how the chart initially rendered and when bindings fired and were synced to the browser. We are handling the resize differently now using a react resize detector. That avoids the race condition. With your example I easily reproduced it in 1.0.12 but it never happened in 1.0.13. So give 1.0.13 a try:

https://github.com/Kyvis-Labs/ignition-apexcharts-module/releases/tag/1.0.13

[nikolai-wolterstorff]

Looks like 1.0.13 fixed all the issues I was experiencing. Thanks a ton!