ngx-admin/src/app/pages/charts/components/chartJs/chartJs.html

<div class="row">
  <div class="col-md-4">
    <ba-card title="Pie" baCardClass="medium-card">
      <base-chart class="chart chart-pie"
              [legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Pie')" [labels]="labels.one" (chartClick)="changeData($event)">
      </base-chart>
    </ba-card>
  </div>

  <div class="col-md-4">
    <ba-card title="Doughnut" baCardClass="medium-card">
      <base-chart class="doughnut chart-doughnut"
                  [legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Doughnut')" [labels]="labels.one" (chartClick)="changeData($event)">
      </base-chart>
    </ba-card>
  </div>

  <div class="col-md-4">
    <ba-card title="Polar" baCardClass="medium-card">
      <base-chart class="polar chart-polar"
                  [legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('PolarArea')" [labels]="labels.one" (chartClick)="changeData($event)">
      </base-chart>
    </ba-card>
  </div>
</div>

<div class="row ">
  <div class="col-md-6">
    <ba-card title="Animated Radar" baCardClass="with-scroll col-eq-height">
      <base-chart class="waveLine chart-waveLine"
                  [legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Radar')" [labels]="labels.two" (chartClick)="changeData($event)">
      </base-chart>
    </ba-card>
  </div>
  <div class="col-md-6">
    <ba-card title="Animated Bars" baCardClass="with-scroll col-eq-height">
      <base-chart class="waveBars chart-waveBars"
                  [legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
      </base-chart>
    </ba-card>
  </div>
</div>