Height of plot is 0 until resize after changing layout input

Beginne mit der Angular-Vorlage und ihrer -Komponente sowie dem durch das Theme-Signal aktualisierten Layout-Input. Führe einen Theme-Wechsel durch und vergleiche anschließend die Höhe des Chart-Containers vor und nach der Aktualisierung, ohne das Fenster neu zu dimensionieren. Erledigt ist die Aufgabe, wenn responsive Charts unmittelbar nach den Layout-Änderungen ihre tatsächliche Containerhöhe beibehalten.

Hello,

I'm having a bit of trouble with my charts in a dashboard. I've implemented theme switching in my application using system variables and Angular Material. I'm able to change my chart's look and feel according to the colors of my theme. However, the container will collapse when I switch to a new theme because the plotly-plot element has a height of 0 until I resize the window.

Injectable

import { DOCUMENT } from '@angular/common';
import {
  computed,
  effect,
  inject,
  InjectionToken,
  signal,
} from '@angular/core';
import { WA_WINDOW } from '@ng-web-apis/common';

export const THEME = new InjectionToken('Theme', {
  factory: () => {
    const w = inject(WA_WINDOW);
    const d = inject(DOCUMENT);
    const darkMode = signal(true);
    const setDarkMode = effect(() =>
      d.documentElement.classList.toggle('light', !darkMode())
    );
    return {
      darkMode,
      textColor: computed(() => {
        darkMode();
        return getComputedStyle(d.documentElement).getPropertyValue(
          '--mat-app-text-color'
        );
      }),
    };
  },
});

Component

...
  readonly #theme = inject(THEME);

  readonly ageGenderChartLayout = computed<Partial<Plotly.Layout>>(() => ({
    barmode: 'stack',
    autosize: true,
    margin: {
      l: 60,
      r: 50,
      b: 100,
      t: 50,
      pad: 4,
    },
    title: 'People by Age',
    paper_bgcolor: 'rgba(255,255,255,0)',
    plot_bgcolor: 'rgba(255,255,255,0)',
    font: {
      color: this.#theme.textColor(),
    },
  }));
...

Template

<mat-card>
  <mat-card-content>
    @if (mapData$ | async; as mapData) {
    <plotly-plot [data]="mapData"
                 [layout]="mapLayout()"
                 [config]="{responsive: true, mapboxAccessToken: mapboxToken, displaylogo: false, modeBarButtonsToRemove: ['toImage']}" />
    } @else {
    <mat-spinner style="margin: auto;"></mat-spinner>
    }
  </mat-card-content>
</mat-card>

Before switching themes:

After switching themes (which updates the layout input of the plotly-plot component):

How can I have responsive charts while still have their containers "see" their actual height? is this a Plotly chart issue?