<div fxLayout="row wrap">
  <div fxFlex="100" fxFlex.gt-sm="33">
    <mat-card class="p-0">
      <mat-card-title class="">
        <div class="card-title-text">Vertical Bar chart</div>
        <mat-divider></mat-divider>
      </mat-card-title>
      <mat-card-content>
        <canvas  
          baseChart 
          class="chart"
          [datasets]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartOptions"
          [colors]="chartColors"
          [legend]="barChartLegend"
          [chartType]="barChartType"></canvas>
      </mat-card-content>
    </mat-card>
  </div>
  <div fxFlex="100" fxFlex.gt-sm="33">
    <mat-card class="p-0">
      <mat-card-title class="">
        <div class="card-title-text">Horizontal Bar chart</div>
        <mat-divider></mat-divider>
      </mat-card-title>
      <mat-card-content>
        <canvas  
          baseChart 
          class="chart"
          [datasets]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartHorizontalOptions"
          [colors]="chartColors"
          [legend]="barChartLegend"
          [chartType]="barChartHorizontalType"></canvas>
      </mat-card-content>
    </mat-card>
  </div>
  <div fxFlex="100" fxFlex.gt-sm="33">
    <mat-card class="p-0">
      <mat-card-title class="">
        <div class="card-title-text">Stacked Bar chart</div>
        <mat-divider></mat-divider>
      </mat-card-title>
      <mat-card-content>
        <canvas  
          baseChart class="chart"
          [datasets]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartStackedOptions"
          [colors]="chartColors"
          [legend]="barChartLegend"
          [chartType]="barChartType"></canvas>
      </mat-card-content>
    </mat-card>
  </div>

  <div fxFlex="100" fxFlex.gt-sm="33">
    <mat-card class="p-0">
      <mat-card-title class="">
        <div class="card-title-text">Basic Line chart</div>
        <mat-divider></mat-divider>
      </mat-card-title>
      <mat-card-content>
        <canvas 
          baseChart 
          class="chart"
          [datasets]="lineChartData"
          [labels]="lineChartLabels"
          [options]="lineChartOptions"
          [colors]="chartColors"
          [legend]="lineChartLegend"
          [chartType]="lineChartType"></canvas>
      </mat-card-content>
    </mat-card>
  </div>
  <div fxFlex="100" fxFlex.gt-sm="33">
    <mat-card class="p-0">
      <mat-card-title class="">
        <div class="card-title-text">Point Line chart</div>
        <mat-divider></mat-divider>
      </mat-card-title>
      <mat-card-content>
        <canvas 
          baseChart 
          class="chart"
          [datasets]="lineChartPointsData"
          [labels]="lineChartLabels"
          [options]="lineChartPointsOptions"
          [colors]="chartColors"
          [legend]="lineChartLegend"
          [chartType]="lineChartType"></canvas>
      </mat-card-content>
    </mat-card>
  </div>
  <div fxFlex="100" fxFlex.gt-sm="33">
    <mat-card class="p-0">
      <mat-card-title class="">
        <div class="card-title-text">Bubble chart</div>
        <mat-divider></mat-divider>
      </mat-card-title>
      <mat-card-content>
        <canvas 
          baseChart 
          class="chart"
          [datasets]="bubbleChartData"
          [labels]="bubbleChartLabels"
          [options]="bubbleChartOptions"
          [legend]="bubbleChartLegend"
          [chartType]="bubbleChartType"></canvas>
      </mat-card-content>
    </mat-card>
  </div>
  
  <div fxFlex="100" fxFlex.gt-sm="33">
    <mat-card class="p-0">
      <mat-card-title class="">
        <div class="card-title-text">Doughnut chart</div>
        <mat-divider></mat-divider>
      </mat-card-title>
      <mat-card-content>
        <canvas 
          baseChart 
          class="chart"
          [data]="doughnutChartData"
          [labels]="doughnutChartLabels"
          [options]="doughnutOptions"
          [colors]="doughnutChartColors"
          [chartType]="doughnutChartType"></canvas>
      </mat-card-content>
    </mat-card>
  </div>
  <div fxFlex="100" fxFlex.gt-sm="33">
    <mat-card class="p-0">
      <mat-card-title class="">
        <div class="card-title-text">Pie chart</div>
        <mat-divider></mat-divider>
      </mat-card-title>
      <mat-card-content>
        <canvas 
        class="chart"
        baseChart
        [data]="pieChartData"
        [labels]="pieChartLabels"
        [options]="doughnutOptions"
        [colors]="doughnutChartColors"
        [chartType]="pieChartType"
        (chartHover)="pieChartHovered($event)"
        (chartClick)="pieChartClicked($event)"></canvas>
      </mat-card-content>
    </mat-card>
  </div>
  <div fxFlex="100" fxFlex.gt-sm="33">
    <mat-card class="p-0">
      <mat-card-title class="">
        <div class="card-title-text">Radar chart</div>
        <mat-divider></mat-divider>
      </mat-card-title>
      <mat-card-content>
        <canvas
        class="chart" 
        baseChart
        [datasets]="radarChartData"
        [labels]="radarChartLabels"
        [legend]="false"
        [colors]="chartColors"
        [chartType]="radarChartType"
        (chartHover)="radarChartHovered($event)"
        (chartClick)="radarChartClicked($event)"></canvas>
      </mat-card-content>
    </mat-card>
  </div>

</div>
