How to show data on pie chart in angular 2 using ng2-charts?

Question

As in fig I can implement pie chart but how to show data on chart

like this:

<canvas baseChart  class="pie"
  [data]="Data"
  [labels]="Labels"
  [colors]="Colors"
  [chartType]="pieChartType">
</canvas>

 public Labels:string[]=['Female','Male'];
 public Data:any =[51,30];
 public pieChartType:string = 'pie';
 public Colors:any = 
 [
{
  backgroundColor: [      
  'green',
  'red'
  ]
  }
]; 

Answer 1

First you need to run two npm command

npm install ng2-charts --save

npm install chart.js --save

Important: Embedding Chart.js in application is mandatory! in your index.html

<script src="node_modules/chart.js/src/chart.js"></script>

Import this one on App.module.ts

import { ChartsModule } from 'ng2-charts';
imports: [ChartsModule]

Component.html

<div style="display: block">
  <canvas baseChart
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [chartType]="pieChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>

Component.ts

public pieChartLabels: string[] = ['Male', 'Female'];
  public pieChartData: number[] = [51, 30];
  public pieChartType: any = 'pie';

  // events
  public chartClicked(e: any): void {
    console.log(e);
  }

  public chartHovered(e: any): void {
    console.log(e);
  }

this code is working as you expect.