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
