Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork78
Open
Description
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';exportconstTHEME=newInjectionToken('Theme',{factory:()=>{constw=inject(WA_WINDOW);constd=inject(DOCUMENT);constdarkMode=signal(true);constsetDarkMode=effect(()=>d.documentElement.classList.toggle('light',!darkMode()));return{ darkMode,textColor:computed(()=>{darkMode();returngetComputedStyle(d.documentElement).getPropertyValue('--mat-app-text-color');}),};},});
Component
...readonly #theme=inject(THEME);readonlyageGenderChartLayout=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-spinnerstyle="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?
Metadata
Metadata
Assignees
Labels
No labels