fix: Charts would sometimes not display if used inside a vertical or horizontal stack card

Fixes #945

Author: RomRider

src/apexcharts-card.ts

@@ -782,8 +782,6 @@ class ChartsCard extends LitElement {
   }
 
   private async _initialLoad() {
-    await this.updateComplete;
-
     if (isUsingServerTimezone(this._hass)) {
       this._serverTimeOffset = computeTimezoneDiffWithLocal(this._hass?.config.time_zone);
     }
@@ -797,16 +795,18 @@ class ChartsCard extends LitElement {
         (layout as any).chart.id = Math.random().toString(36).substring(7);
       }
       this._apexChart = new ApexCharts(graph, layout);
-      this._apexChart.render();
+      const promises: Promise<void>[] = [];
+      promises.push(this._apexChart.render());
       if (this._config.series_in_brush.length) {
         const brush = this.shadowRoot.querySelector('#brush');
         this._apexBrush = new ApexCharts(
           brush,
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           getBrushLayoutConfig(this._config, this._hass, (layout as any).chart.id),
         );
-        this._apexBrush.render();
+        promises.push(this._apexBrush.render());
       }
+      await Promise.all(promises);
       this._firstDataLoad();
     }
   }
@@ -985,10 +985,13 @@ class ChartsCard extends LitElement {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const currentMax = (this._apexChart as any).axes?.w?.globals?.maxX;
       this._headerState = [...this._headerState];
-      this._apexChart?.updateOptions(
-        graphData,
-        false,
-        TIMESERIES_TYPES.includes(this._config.chart_type) ? false : true,
+      const chartUpdates: Promise<void>[] = [];
+      chartUpdates.push(
+        this._apexChart?.updateOptions(
+          graphData,
+          false,
+          TIMESERIES_TYPES.includes(this._config.chart_type) ? false : true,
+        ),
       );
       if (this._apexBrush) {
         const newMin = start.getTime() - this._serverTimeOffset;
@@ -1022,8 +1025,9 @@ class ChartsCard extends LitElement {
         brushData.chart.selection.stroke = { color: selectionColor };
         brushData.chart.selection.fill = { color: selectionColor, opacity: 0.1 };
         this._brushInit = true;
-        this._apexBrush?.updateOptions(brushData, false, false);
+        chartUpdates.push(this._apexBrush?.updateOptions(brushData, false, false));
       }
+      await Promise.all(chartUpdates);
     } catch (err) {
       log(err);
     }