Home / Questions / 446439
Accepted
PieroDev
Asked: 2022-04-23 15:35:09 +0800 CST 2022-04-23 15:35:09 +0800 CST

Increase width to graphics width - angular

  • 772

sorry I have a problem, I have two highchart charts that I want to show half and half, I have noticed that when I place fxLayout and fxFlex , the charts are reduced to small and I want them to cover the full width

when I click on the small square it is minimized and when I keep clicking on it it enlarges as I want

when I click several clicks to the last one if the whole width is graphed

enter image description here

I have tried with this code but nothing, if you could help me please.

<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>

I attached the image as seen enter image description here

I would like it to look like this

enter image description here

graphic-basic.component component regarding css has none

<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>

I have found that with this the size is changed, I place the class but it does not render, as if it is not reading it

enter image description here

css

2 Answers

  1. Best Answer

    Well the solution I did is to follow up with Inspect Element and see what styles were added in each direction of Angular. I noticed that these dynamic classes were added from Higcharts, so I added :Host ::ng-deep and the class to make it work.

    :host ::ng-deep  .ng-tns-c13-4 {
  flex-flow: row wrap; box-sizing: border-box; display: flex;
}

:host ::ng-deep .ng-tns-c13-4 .ng-star-inserted{
  flex: 1 1 100%; box-sizing: border-box; max-width: 100%;
}

    enter image description here

    • 4

  2. I think the problem is the screen width, you have it set in the div

    fxFlex.sm="50"

    That causes the responsive to force it to occupy half the size on small-medium screens, in your code example it would only be to eliminate the part that forces it in the graphic-basic.component component

    <div fxLayout="row wrap">
    <div 
        *ngFor='let item of carousel;'
        fxFlex="100" 
        [@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>
    • 3