<app-breadcrumb [path]="routes.BAR_CHARTS"></app-breadcrumb>

<div class="cards-wrapper">
  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Basic Bar Chart</p>
    </mat-card-title>
    <app-bar-chart [barChartData]="barChartData$ | async" [currentTheme]="currentTheme"></app-bar-chart>
  </mat-card>

  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Grouped Bar Chart</p>
    </mat-card-title>
    <app-grouped-bar-chart [groupedBarChartData]="groupedBarChartData$ | async"></app-grouped-bar-chart>
  </mat-card>
</div>

<div class="cards-wrapper">
  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Stacked Bar Chart</p>
    </mat-card-title>
    <app-stacked-bar-chart></app-stacked-bar-chart>
  </mat-card>

  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>ECharts Bar Chart with Image</p>
    </mat-card-title>
    <app-image-bar-chart></app-image-bar-chart>
  </mat-card>
</div>
