Wednesday, July 24, 2024
Angular 10Angular 9google chartsJavascript

Angular 9/10 Google Charts Working Example


Hello to all, welcome again on In this post, I will tell you, Angular 9/10 Google Charts Working Example.

Post Working:

In this post, I am showing google pie chart in Angular 10.
Angular google chart working
Angular 9/10 google chart working example

Here is the working code snippet and please follow carefully:

1. Very first, here are common basics steps to add angular 10 application on your machine:

npm install -g @angular/cli

ng new angularcharts // Set Angular10 Application on your pc

cd angularcharts // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server


2. Now run below command into your terminal to include google chart package into your angular 10 application:

npm install angular-google-charts


3. Now add below code into your app.module.ts file:

import { GoogleChartsModule } from 'angular-google-charts';

   imports: [


4. Now add below code into your app.component.ts file:

export class AppComponent { ...myType = 'PieChart';
myData = [
    ['London', 8136000],
    ['New York', 8538000],
    ['Paris', 2244000],
    ['Berlin', 3470000],
    ['Kairo', 19500000]
  ]; }


5. Finally add, below code into your app.component.html file:

<google-chart [type]="myType" [data]="myData" ></google-chart>


This is it and if you have any kind of query then please let me know.


Thank you

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.