Pie Chart In Angular 12

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

ng serve

Output:

Conclusion

In our article, we have learned How to show a piechart in angular 12 application with an example.

Thank you.

Also check, How To Capture Photo Using Ngx-webcam In Angular 12

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories