Angular NGX Chart not fitting to parent container correctly onload

Question

I have a problem. For my angular website I use ngx-charts to draw different kind of charts. The problem is with the pie-chart, because that chart doesn't fit the parent container correctly. Here is the HTML:

<div class="grid-container">
    <mat-grid-list cols="10" rowHeight="250px">
        <mat-grid-tile [colspan]="6" [rowspan]="1">
            <mat-card class="dashboard-card">
                <mat-card-header>
                    <mat-card-title>
                        Popular countries
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content class="dashboard-card-content">
                    <ngx-charts-bar-vertical
                        [results]="popularCountriesData"
                        [legend]="false"
                        [showXAxisLabel]="false"
                        [showYAxisLabel]="false"
                        [xAxis]="true"
                        [yAxis]="false"
                        [gradient]="false">
                    </ngx-charts-bar-vertical>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>

        <mat-grid-tile [colspan]="4" [rowspan]="2">
            <mat-card class="dashboard-card">
                <mat-card-header>
                    <mat-card-title>
                        Popular hashtags
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content class="dashboard-card-content">
                    <ngx-charts-pie-chart
                        [labels]="true"
                        [results]="popularHashtagsData"
                        [legend]="false"
                        [legendPosition]="legendPosition"
                        [gradient]="false">
                    </ngx-charts-pie-chart>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>

        <mat-grid-tile [colspan]="6" [rowspan]="1">
            <mat-card class="dashboard-card">
                <mat-card-header>
                    <mat-card-title>
                        User accounts
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content class="dashboard-card-content">
                    <ngx-charts-line-chart
                        [legend]="false"
                        [showXAxisLabel]="false"
                        [showYAxisLabel]="false"
                        [xAxis]="true"
                        [yAxis]="true"
                        [timeline]="false"
                        [results]="accountData">
                    </ngx-charts-line-chart>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>

    </mat-grid-list>
</div>

With the css:

.dashboard-card {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 40px;
}

.dashboard-card-content {
    text-align: center;
    width: 100%;
    height: calc(100% - 30px);
}

But this results in:

As you can see, the pie-chart goes outside the container, while the documentation says:

The other charts are working perfectly... How can I fix this, wihtout hard coding the sizes in pixels, because it needs to be responsive?

Edit The weird thing is that this problem only occurs on my Dell XPS 13 laptop and not my desktop monitor. So for smaller screens this problem occurs!!!

Answer 1

You can try adding the following css to your code.

.dashboard-card-content {
    width: 100%;
    height: calc(100% - 30px);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}