How To Add PieChart In Angular

Learn how to add a PieChart using Google Charts in this post.

Pie charts often have the left edge of the first slice going straight up.

Step 1:

Create a New Application

ng new pieChart

Step 2:

Install Following Package

npm install angular-google-charts

Step 3:

Include the GoogleChartsModule in your app. The module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4:

Insert the following code into your app.component.ts file.

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  chart = 'PieChart';
  chartVal= [
    ['PHP', 8136000],
    ['Node', 8538000],
    ['JQuery', 2244000],
    ['.Net', 3470000],
    ['Java', 19500000]
  ];
  
  width = 550;
  height = 400;
}

Step 5 :

Insert the following code into your app.component.html file

<google-chart 
    [type]="chart" 
    [data]="chartVal" 
    [width]="width"
    [height]="height">
      
</google-chart>

Step 6:

Run your Application using following code

ng serve