(bug) Animation causes all charts not to render unless resized or forced to reset

[tonyawad88]

Hello,

There is a bug it seems in how charts are rendering in Angular 18 with "apexcharts": "^3.53.0", and "ng-apexcharts": "^1.12.0",. This results in the chart data not rendering and remaining empty as shown in the below gif:

Animation Enabled (note how on refresh, chart loads and then clears):

Animation Disabled:

Temporary Workarounds:

There are a couple of workaround that I came across that seem hacky but have yielded results, each work on its own and no need to combine:

1. Disable animation on the chart chart: { animations: { enabled : false } }
2. Use @ViewChild("chart") chart: ChartComponent | undefined; to reference the apex chart and then when the chart options are set, call this.chart.resetSeries()
3. Use ng-if with a flag to delay rendering until ChartOption has been initialized

All seem hacky, any chance you can provide some guidance on this as to why you think it's happening? If you guide me I can see if I can code a fix.
Cheers.

[tonyawad88]

This may also have been my fault, as I was emitting an empty array and emitting a full array right after it. I have a BehaviorSubject containing the data to display and on init I was initializing with an empty array instead of undefined and then the data got loaded which caused double renders, animation issues, etc. If someone is running into this, check what you are emitting and how many times are you rendering as it could cause a race.