Height of plot is 0 until resize after changing layout input

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?

從 Angular 範本的  元件以及由主題訊號更新的 layout input 開始。重現主題切換，然後在不調整視窗大小的情況下，比較更新前後的圖表容器高度。完成標準是：responsive 圖表在 layout 變更後立即維持其實際容器高度。