How To Add PieChart In Angular

The Code Points August 28, 2022 0

In this article, we will learn about the how to add PieChart in angular application. In this article, we are using Google Charts npm package for adding a PieChart.

So let's start with implementation

first we need to create a new angular application using the following command into the terminal.

ng new pieChart

Now, Install angular-google-charts NPM Package using the following command into the terminal.

npm install angular-google-charts

Now, add the GoogleChartsModule into the our app.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 { }

Now, Add the following code into the our 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;
}

Now, Using the following code add the google-chart component under the our app.component.html file.

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

Now, run the application using the ng serve command into the terminal and see the browser screen looks like below.

Conclusion

In this article, we learned how to add PieChart in angular application using Google Charts package.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.