материал angular проблема сетки с небольшим содержанием плитки сетки

Question

Просто возиться с Angular пользовательским интерфейсом материала, и этот HTML:

<mat-card class="chart-card">
<mat-card-header>
  <mat-card-title>Temperature Graph (from ws)</mat-card-title>
  <mat-card-subtitle>Temperature by days in 14h</mat-card-subtitle>
</mat-card-header>
<mat-card-content>

  <mat-grid-list cols="2">

    <mat-grid-tile>
      <mat-card class="chart-card">
        <mat-card-header>
          <mat-card-title>Line graph</mat-card-title>
        </mat-card-header>
        <mat-card-content>
        <app-temperature-chart [chartType]="'line'" [ws] = "true"></app-temperature-chart>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>

    <mat-grid-tile class="my-tile">
      <mat-card class="chart-card">
        <mat-card-header>
          <mat-card-title>Bar graph</mat-card-title>
        </mat-card-header>
        <mat-card-content>
        <app-temperature-chart [chartType]="'bar'" [ws] = "true"></app-temperature-chart>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>

  </mat-grid-list>

</mat-card-content>

производит такой вывод:

Эти графики настолько малы, и я не знаю почему, места много ...