@coreui/ajax/Angular4_CLI_Full_Project/src/app/chartjs/chartjs.component.html

Open Source Bootstrap Admin Template

<div class="animated fadeIn">
  <div class="card-columns cols-2">
    <div class="card">
      <div class="card-header">
        Line Chart
        <div class="card-actions">
          <a href="http://www.chartjs.org">
            <small class="text-muted">docs</small>
          </a>
        </div>
      </div>
      <div class="card-body">
        <div class="chart-wrapper">
          <canvas baseChart class="chart"
          [datasets]="lineChartData"
          [labels]="lineChartLabels"
          [options]="lineChartOptions"
          [colors]="lineChartColours"
          [legend]="lineChartLegend"
          [chartType]="lineChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        Bar Chart
        <div class="card-actions">
          <a href="http://www.chartjs.org">
            <small class="text-muted">docs</small>
          </a>
        </div>
      </div>
      <div class="card-body">
        <div class="chart-wrapper">
          <canvas baseChart class="chart"
          [datasets]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartOptions"
          [legend]="barChartLegend"
          [chartType]="barChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        Doughnut Chart
        <div class="card-actions">
          <a href="http://www.chartjs.org">
            <small class="text-muted">docs</small>
          </a>
        </div>
      </div>
      <div class="card-body">
        <div class="chart-wrapper">
          <canvas baseChart class="chart"
          [data]="doughnutChartData"
          [labels]="doughnutChartLabels"
          [chartType]="doughnutChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        Radar Chart
        <div class="card-actions">
          <a href="http://www.chartjs.org">
            <small class="text-muted">docs</small>
          </a>
        </div>
      </div>
      <div class="card-body">
        <div class="chart-wrapper">
          <canvas baseChart class="chart"
          [datasets]="radarChartData"
          [labels]="radarChartLabels"
          [chartType]="radarChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        Pie Chart
        <div class="card-actions">
          <a href="http://www.chartjs.org">
            <small class="text-muted">docs</small>
          </a>
        </div>
      </div>
      <div class="card-body">
        <div class="chart-wrapper">
          <canvas baseChart class="chart"
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [chartType]="pieChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        Polar Area Chart
        <div class="card-actions">
          <a href="http://www.chartjs.org">
            <small class="text-muted">docs</small>
          </a>
        </div>
      </div>
      <div class="card-body">
        <div class="chart-wrapper">
          <canvas baseChart class="chart"
          [data]="polarAreaChartData"
          [labels]="polarAreaChartLabels"
          [legend]="polarAreaLegend"
          [chartType]="polarAreaChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>