[Vue 3] Removal of synced chart causes multiple fatal errors.

[sneakylenny]

Description

Application context:

To simplify my issue I'll explain it in a blog context. Say I have a post that has comments. On my admin index page of the posts I want to show a list of my post with each post having a graph showing how many comments there were the past week on each day. I want them all synced up so when I hover over one graph I get to see it on all posts for that day. Like so:

Everything works fine this is totally possible. I can even add a post and everything still works:

But whenever I remove one, it will throw a fatal error and all the charts will be come unresponsive except for the first one:

Hovering over the charts will produce errors when moving the cursor:

Screenshot of the console errors

Steps to Reproduce

Case 1: Loop

1. Loop over any iterable in the template (v-for)
2. In each loop create a chart that has a unique chart id and a shared group key. Series should be filled, could be anything as it's not relevant to the issue.
3. If more than 2 loops, decrease the iterations by 1 (by removing an object from an array of objects or simply by decreasing the number of loops from x to x-1 )
4. The charts will produce unexpected errors and syncing will not work properly anymore

Case 2: v-if

1. Create 3 charts
2. Each chart has to have a unique chart id and a shared group key. Series should be filled, could be anything as it's not relevant to the issue.
3. Add a reactive boolean.
4. Add a v-if to one of the charts. This can either be on the chart element itself or a parent element. Use the reactive boolean as condition.
5. Toggle the reactive boolean.
6. The charts will produce unexpected errors and syncing will not work properly anymore

Expected Behavior

I expected the charts to still be synced and work properly.

Actual Behavior

The first chart seems to work fine but will produce errors when hovering over the chart and moving the cursor. The other charts also produce errors but are not responsive and show no tooltips and not sync anymore.

Screenshots

I supplied screenshots in the explanation of the issue.

Reproduction Links

Case 1: Loop

https://codesandbox.io/s/apex-charts-remove-synced-chart-bug-gn4pcd?file=/src/App.vue

Case 2: v-if

https://codesandbox.io/s/apex-charts-remove-synced-chart-bug-2-xmcqgj?file=/src/App.vue

In the sandbox it wil freeze and throw:

can't access property "querySelector", t.w.globals.dom.baseEl is null

But in my project it throws:

Uncaught TypeError: can't access property "ttItems", a3.w.globals.tooltip is null

Workaround

Don't sync the charts if you know one of the synced charts is going to be removed.

Additional info

Possibly related #3018

Edits:

1. Added another case
2. Added "workaround"

[turkhero]

I am encountering the same issue.

[Lobbyism]

Hello. There appears to be a workaround for this problem in VueApexCharts. In VueJS, the key attribute is described as follows

The key special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list.

This issue concerns a different problem. The workaround suggested is to set the key to Math.random(). This solved these two errors Uncaught TypeError: Cannot read properties of null (reading 'ttItems') TypeError: Cannot read properties of null (reading 'getPreviousPaths')

Note that is workaround is achievable through VueJS key built-in attribute. If you use the library without a wrapper or with another one, you may need to do it slightly differently.