Search code examples
cssangular-materialngx-charts

Angular mat card won't wrap ngx-charts element

I am trying to put ngx-charts elements into mat-cards in Angular. But <mat-card> will not encapsulate the graphic. I have found the exact same issue here, and yet, the solution does not seem to work for me.

not wrapping

My html looks like this:

<mat-card>
    <mat-card-header>
        <mat-card-title>Starting fifteen</mat-card-title>
    </mat-card-header>

        <ngx-charts-pie-chart 
            [results]="starting"
            [legend]="false"
            [doughnut]="true"
            [view]="[100,100]"
            [labels]="false" >
        </ngx-charts-pie-chart>
                
   
</mat-card>

The solution suggests wrapping the <ngx-charts-pie-chart> in a <div class="spectre-pie-chart"> and applying the following style to it:

:host {
  height: 100%;
  width: 100%;
}

.spectre-pie-chart {
  height: 100%;
  width: 100%;
  float: right;
}

I think I might have applied the sccs to a wrong element. The solution is not overly particular on how to apply it. Can anybody help me getting the card to fully wrap around the graphic?

Solution 
  • <div class="chart-container">
    <div class="spectre-pie-chart">
         <ngx-charts-pie-chart 
            [results]="starting"
            [legend]="false"
            [doughnut]="true"
            [view]="[100,100]"
            [labels]="false" >
        </ngx-charts-pie-chart>
    </div>
</div>

    You should add your chart inside a parent container, it should fix your problem