Angular 13 Pie Chart Example | Angular 13 Tutorial

Share the post

Hello All, In this angular tutorial, We will learn How to show a piechart in angular 13 application with example. In this Angular 13 Pie Chart Example, we will use ng2-google-charts npm module which helps us to implement a Pie chart in the angular application. In the last angular tutorial, We had discussed How to do email validation in angular 13 application. Now, let’s continue with the angular 13 Pie Chart Example.

Steps for Angular 13 Pie Chart Example

  • Step1: Create Angular Project
  • Step2: Import Ng2GoogleChartsModule
  • Step3: Update Template
  • Step4: Update TS Code
  • Step5: Run Angular Project

Step1: Create angular project

Create a new angular project in the windows machine using the following command.

ng new <APPNAME>

Now, move to our root project directory using the following command

cd <APPNAME>



Open the newly created angular project in Visual Studio Code. Use the following command to open the project.

code .

Step2: Import Ng2GoogleChartsModule

Now, We need to install the required module dependency using the following command

npm i --save ng2-google-charts

Import the Ng2GoogleChartsModule in app.module.ts as shown below

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    Ng2GoogleChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step3: Update Template

Now, We have to update app.component.html as shown below

<google-chart
  [data]="pieChart"
>
</google-chart>

Step4: Update TS Code

We will write the code in our TypeScript file. Update the app.component.ts file as shown below.

import { Component } from '@angular/core';
import { GoogleChartInterface, GoogleChartType } from 'ng2-google-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {


  constructor() {

  }

  pieChart: GoogleChartInterface = {
    chartType: GoogleChartType.PieChart,
    dataTable: [
      ['Student', 'Marks'],
      ['A', 80],
      ['B', 90],
      ['C', 88]
    ],
    options: { 'title': 'Student Marks' },
  };
}

In the above example, We are trying to show a pie chart of student marks.

Step5: Run Angular Project

To run the angular project use the below command.

ng serve

See the output in http://localhost:4200/

Angular 13 Pie Chart Example
Angular 13 Pie Chart Example
Angular 13 PieChart Example

1 thought on “Angular 13 Pie Chart Example | Angular 13 Tutorial”

Leave a Comment