Synced Charts are getting too many Options overwritten.

I have multiple <ApexChart>'s that share a group in order to synchronize the tooltips.

When I hover over “MAX(value)”, they’ll all get the same title

I tracked it down to multiple issues.

1. Something in apexcharts.js is modifying ApexCharts.props.options directly.

On the 2nd render of ApexCharts, this.chart.updateOptions(this.getConfig()) is being called because the prevOptions !== currentOptions https://github.com/apexcharts/react-apexcharts/blob/7345fdca622358f181aa64e1cdfc76f592f4bdf0/src/react-apexcharts.jsx#L116

When I pause the debugger, something has added xaxis.convertedCatToNumeric: false to my props.options

To get around this you should probably: A. Do a deep clone of options in getConfig(). B. Deep clone options in apexcharts.js. C. Stop modifying options in apexcharts.js

2. _updateOptions in apexcharts.js shouldn’t update so many options for Synced Charts

https://github.com/apexcharts/apexcharts.js/blob/433fccce57a1dfd3ff1b67a731818189146ca7ca/src/modules/helpers/UpdateHelpers.js#L63

What’s happening in my example, is you’re taking the options for the bottom chart and applying it to all the charts (minus the series).

I’m not sure the reasoning for doing this, but options like title.text definitely should not be synced, and I imagine many others.

[joshribakoff]

Also confirming that simply deep cloning in getConfig() solves the problem as @cdeutsch suggests. This should be an easy PR

[Andynopol]

Easy PR and 3 years late, the problem is still here. At this point, I think I am diching apexchart…