Angular 2 with chart.js library example charts

chart.component.ts

  /*
  ** ##### DOUGHNUT-CHART #####
  */

  public doughnutChartLabels: string[] = ['New', 'Pending', 'Granted'];
  public doughnutChartData: number[] = [250, 150, 100];
  public doughnutChartType: string = 'doughnut';
  public doughnutChartColors: Array<any> = [{
    backgroundColor: ['rgba(81,175,49,0.8)', 'rgba(148, 148, 148,0.8)', 'rgba(0,0,153,0.8)'],
    borderColor: ['rgba(255,255,255,0.1)', 'rgba(255,255,255,0.1)', 'rgba(255,255,255,0.1)'],
    pointBackgroundColor: [
      'rgba(81,175,49,1)',
      'rgba(148, 148, 148,1)',
      'rgba(0,0,153,1)',
    ],
    pointBorderColor: ['#FFFFFF', '#FFFFFF', '#FFFFFF'],
    pointHoverBackgroundColor: ['#51AF31', '#949494', '#000099'],
    pointHoverBorderColor: ['rgba(255,255,255,0.8)', 'rgba(255,255,255,1)', 'rgba(255,255,255,0.8)']
  }];

  // events
  public chartClicked(e: any): void {}

  public chartHovered(e: any): void {}

  /*
  ** ##### BAR-CHART #####
  */
  public barChartOptions: any = {scaleShowVerticalLines: false, responsive: true};
  public barChartLabels: string[] = ['March', 'April', 'May', 'June', 'July', 'August', 'September'];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = false;

  public barChartData: any[] = [
    {data: [65, 59, 80, 81, 56, 55, 23]},
  ];
  public barChartColors: Array<any> = [{
    backgroundColor: 'rgba(0,0,153,0.8)',
    borderColor: 'rgba(255, 255, 255,0.1)',
    pointBackgroundColor: 'rgba(0,0,153,1)',
    pointBorderColor: '#FFFFFF',
    pointHoverBackgroundColor: '#000099',
    pointHoverBorderColor: 'rgba(0,0,153,0.8)'
  }];

  /*
  ** ##### LINE-CHART #####
  */

  public lineChartData: any[] = [{data: [65, 59, 80, 81, 56, 67, 111], label: '"Granted" per Month'}];

  public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartType: string = 'line';
  public lineChartColors: Array<any> = [{
    backgroundColor: 'rgba(0,0,153,0.2)',
    borderColor: 'rgba(0,0,153,1)',
    pointBackgroundColor: 'rgba(0,0,153,0.8)',
    pointBorderColor: '#000099',
    pointHoverBackgroundColor: '#000099',
    pointHoverBorderColor: 'rgba(0,0,153,0.8)'
  }];

charts.html

<div class="row" style="margin-top: 20px;">
<div class="col-lg-4 col-md-12">
    <div class="panel panel-spacer">
        <div class="panel panel-header">
            Access-Request per status
        </div>
        <div class="panel panel-body">
            <div class="panel panel-content">
                <canvas baseChart height="270" [colors]="doughnutChartColors" [data]="doughnutChartData" [labels]="doughnutChartLabels" [chartType]="doughnutChartType"
                    (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
            </div>
        </div>
    </div>
</div>



<div class="col-lg-8 col-md-12">
    <div class="panel panel-spacer">
        <div class="panel panel-header">
            Access-Request per month
        </div>
        <div class="panel panel-body">
            <div class="panel panel-content">
                <canvas baseChart [colors]="barChartColors" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
                    [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
            </div>
        </div>
    </div>
</div>



</div>



<div class="row" style="margin-top: 20px;">

<div class="col-md-12">
    <div class="panel panel-header">
        Access-Request granted per month
    </div>
    <div class="panel panel-body">
        <div class="panel panel-content">
            <canvas baseChart [colors]="lineChartColors" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions"
                [chartType]="lineChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
        </div>
    </div>
</div>
</div>
</div>

package.json

"ng2-charts": "^1.4.1",