Height of plot is 0 until resize after changing layout input

[jakehockey10]

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?

[PSanetra]

I am experiencing a similar issue when I update the plot data. Sometimes the height of the .svg-container div is set to 100% instead of the desired 450px (the plotly default height). 100% is scaled to 0px automatically by the browser.

It looks like some race condition.

[PSanetra]

My workaround for now was to set style.height to a static value:

E.g.

<plotly-plot
  [style]="{ height: '600px'}"
  [data]="data"
  [layout]="layout"
  [config]="config"
  />