Pie Chart In Angular 12

Parth Mandaliya Aug 10, 2022 0 751

Hello friends, In this angular tutorial, We will learn How to show a piechart in the angular 12 application with an example. In this Angular 12 Pie Chart Example, we will use the ng2-google-charts npm module which helps us to implement a Pie chart in the angular application.

What is ng2-google-charts?

Ng2GoogleChartsModule is used to represent the data of eCommerce or more.
It is open-source and is free to use in commercial applications.

Steps for Angular 12 Pie Chart Example

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

Step 1: Create a new project in Angular using this command.

ng new PieChart

Step 2: Import Ng2GoogleChartsModule

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 { }

Step 3: Update Template

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

Step 4: Update TS Code

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

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

export class AppComponent {
  pieChart: GoogleChartInterface = {
    chartType: GoogleChartType.PieChart,
    dataTable: [
      ['Student', 'Marks'],
      ['A', 76],
      ['B', 57],
      ['C', 88]
    ],
    options: { 'title': 'Student Marks' },
  };
}

Step 5: Run Angular Project