chart.component.html

<div class="grid-container">
  <h1 class="mat-h1">Chart Examples</h1>
  
  <mat-grid-list cols="2" rowHeight="350px">
    <mat-grid-tile colspan="1" rowspan="1">
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>
            Line Chart
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          <div style="text-align:center">
            <canvas id="lineChart"></canvas>
          </div>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>

    <mat-grid-tile colspan="1" rowspan="1">
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>
            Bar Chart
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          <div style="text-align:center">
            <canvas id="barChart"></canvas>
          </div>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>

    <mat-grid-tile colspan="1" rowspan="1">
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>
            Pie Chart
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          <div style="text-align:center">
            <canvas id="pieChart"></canvas>
          </div>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
    
  </mat-grid-list>
</div>