Introduction

In this article, we will learn how to create Google charts in Angular 11 in visual studio code.
Step 1
Create an Angular project setup using the below commands or however you create your Angular apps.
ng new googlechart
How To Create Google Charts In Angular
Step 2 - angular-google-charts
It is an open-source angular based wrapper for Google Charts to provides elegant and feature-rich Google Charts visualizations within an Angular application.
It can be used with Angular components.
Google Charts

It is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability.
Supported Chart Types
Step 3
Open a new terminal and run the following below commands.
Install Google Charts Wrapper module in Your App.
npm install angular-google-charts
How To Create Google Charts In Angular
Step 4 - App.module.ts
Now we will declare Google chart in app.module.ts
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { AppRoutingModule } from './app-routing.module';
  4. import { AppComponent } from './app.component';
  5. import { GoogleChartsModule } from 'angular-google-charts';
  7. @NgModule({
  8. declarations: [
  9. AppComponent
  10. ],
  11. imports: [
  12. BrowserModule,
  13. AppRoutingModule,
  14. GoogleChartsModule
  15. ],
  16. providers: [],
  17. bootstrap: [AppComponent]
  18. })
  19. export class AppModule { }
Step 5
Now, we will write integration on App.component.html
  1. <google-chart #chart
  2. [title]="title"
  3. [type]="type"
  4. [data]="data"
  5. [columnNames]="columnNames"
  6. [options]="options"
  7. [width]="width"
  8. [height]="height">
  9. </google-chart>
Step 6
Next, we can open the app.component.ts and write some code.
  1. import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
  2. import { GoogleChartComponent } from 'angular-google-charts';
  4. @Component({
  5. selector: 'app-root',
  6. templateUrl: './app.component.html',
  7. styleUrls: ['./app.component.scss']
  8. })
  9. export class AppComponent implements OnInit{
  10. title = 'googlechart';
  11. type = 'PieChart';
  12. data = [
  13. ['Name1', 5.0],
  14. ['Name2', 36.8],
  15. ['Name3', 42.8],
  16. ['Name4', 18.5],
  17. ['Name5', 16.2]
  18. ];
  19. columnNames = ['Name', 'Percentage'];
  20. options = {
  21. };
  22. width = 500;
  23. height = 300;
  24. constructor(){}
  25. ngOnInit() {}
  26. }
Step 6
Chart Configuration
Set Chart Type
type='PieChart';
Pie chart
It is rendered within the browser using SVG or VML.
Pie charts are used to draw pie based charts.
column names
  1. columnNames = ['Browser', 'Percentage'];
Options
Configure the other options.
  1. options = { colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], is3D: true};
is3D is false by default, so here we explicitly set it to true.
You can separate pie slices from the chart with the offset property of the slices option
Step 7
Now we will run the application
ng serve --port 1234
How To Create Google Charts In Angular
On successful execution of the above command, it will show the browser,
How To Create Google Charts In Angular