disculpen tengo un problemilla, tengo dos graficos highchart que quiero mostrar la mitad y mitad, he notado que cuando coloco fxLayout y fxFlex , los graficos se reducen a pequeño y quisiera que abarquen todo el ancho
cuando doy clic en el cuadradito chiquito se minimiza y cuando le sigo dando se agranda como quiero
cuando doy clic varias clic al ultimo si se grafica todo el ancho
He intenado con este codigo pero nada, si me podrian ayudar por favor.
<div fxLayout="row wrap">
<div fxFlex="50" fxFlex.gt-sm="50" fxFlex.sm="100">
<mat-card class="default">
<p class="text-blue ml-1 mt-1">Transacciones por Corresponsal</p>
<mat-card-content >
<app-graphic-basic [config_graphic]='config_graphic_tcorr' class="grafica-full-fix"></app-graphic-basic>
</mat-card-content>
</mat-card>
</div>
<div fxFlex="50" fxFlex.gt-sm="50" fxFlex.sm="100" >
<mat-card class="default">
<p class="text-blue ml-1 mt-1">Transacciones por Territorio</p>
<mat-card-content >
<app-graphic-basic [config_graphic]='config_graphic_tteri' class="grafica-full-fix"></app-graphic-basic>
</mat-card-content>
</mat-card>
</div>
</div>
Quisiera que se vea asì
componente del graphic-basic.component con respecto a css no tiene ninguno
<div fxLayout="row wrap">
<div
*ngFor='let item of carousel;'
fxFlex="100"
fxFlex.gt-sm="20"
fxFlex.sm="50"
[@animate]="{value:'*',params:{scale:'.9',delay:'300ms'}}">
<mat-card>
<mat-card-title fxLayoutAlign="start center">
<small class="text-muted">{{item.desc}}</small>
<span fxFlex></span>
<mat-chip class="icon-chip" [style.background-color]="item.avance.color" selected="true" *ngIf="item.avance.value">
<mat-icon>trending_up</mat-icon>{{item.avance.value | percent :'.0-0'}}
</mat-chip>
</mat-card-title>
<mat-card-content>
<h3 class="m-0 font-normal">{{item.value | localNumber :item.format}}</h3>
<small class="text-muted">{{item.unit}}</small>
</mat-card-content>
</mat-card>
</div>
</div>
<div *ngIf="isLoadingGraphic">
<div fxLayout="row" fxLayout.lt-sm="column" class="shop-top-toolbar">
<span fxFlex></span>
<div [fxHide.lt-md]="true">
<button mat-icon-button [color]="grilla === 50 ? 'primary' : ''" (click)="red()">
<mat-icon>apps</mat-icon>
</button>
</div>
<span fxFlex="20px"></span>
</div>
<div fxLayout="row wrap">
<div fxFlex="100" [fxFlex.gt-sm]="grilla" *ngFor='let cg of config_graphic;let i=index'>
<div class="m-033">
<highcharts-chart [Highcharts]="Highcharts" [(update)]="update[i]" [options]="co[i]"
[runOutsideAngular]=true style="width: 100%; height: 400px;max-height: 80vh; display: block;">
</highcharts-chart>
</div>
</div>
</div>
</div>
he encontrado que con esto se cambia el tamaño, coloco la clase pero no se renderiza, como si no lo esta leyendo