Home Angular 8 Angular 8 Google Charts working example

Angular 8 Google Charts working example

by therichpost
Published: Last Updated on 29 comments
angular 8 google charts

Hello to all, welcome again on therichpost.com. In this post, I will tell you, Angular 8 Google Charts working example.

Post Working:

In this post, I am showing google pie chart in Angular 8.
angular 8 google charts
angular 8 google charts

Here is the working code snippet and please follow carefully:

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

$ npm install -g @angular/cli

$ ng new angularcharts // Set Angular8 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 8 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:

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

You may also like


Cameron March 20, 2020 - 3:17 pm

Hi Ajay, Thanks for the tutorial. How do we reference the chart again, say on a mouse move event? In JS there is something like var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’)) but how do we do this in Angular 8.

Ajay Malhotra March 21, 2020 - 4:05 pm

You want use mouse move event?

Cameron Crum March 23, 2020 - 10:36 pm

Yes. I need a mouse move on the chart so I can get the value of the X axis where the tooltip is.

Ajay Malhotra March 24, 2020 - 7:25 am

yes and I will update this.

sameer March 25, 2020 - 2:31 pm

hi ajay i need to display data from from rest response in google chart can you help ?

Ajay Malhotra March 25, 2020 - 2:35 pm

Hello sameer, you want to show dynamic API data?

sameer April 2, 2020 - 7:41 pm

yes i want to show dynamic data as soon as i click button i should change data in graph

Ajay Malhotra April 3, 2020 - 5:39 am

Yes, I will make video tutorial on it.

Osmar March 26, 2020 - 5:35 pm

Works like a charm, thank you so much!!

Ajay Malhotra March 27, 2020 - 10:16 am

You are welcome

Shaninath April 22, 2020 - 6:56 am

Hi Ajay , What if I want show multiple charts on one page like say 3 to 4 different charts with different data how can we do that

Ajay Malhotra April 22, 2020 - 7:06 am

You just need to different id’s and I will update the post with that.

Thank you

Shagun May 14, 2020 - 1:38 pm

Hi Ajay, I want to display data retrieved from DB through rest api and in different types of charts. How can i do that. Can you update on this please.

Namit Jain July 4, 2020 - 10:41 am

Hi Ajay,
I need to make a google chart using Angular 9 and want to use the data in my database hosted on Amazon RDS. And the data should be fetched using PHP. Can you help me?

Ajay Malhotra July 4, 2020 - 10:44 am

Hi, I have made post on it and publish at night and also made video on it.


Mohit July 15, 2020 - 12:23 pm

Any idea how to use google.visualization.events.addListener() with your tutorial ? Thanks in advance

Ajay Malhotra July 15, 2020 - 12:25 pm

Yes and I will share soon.

JuliaPeao July 31, 2020 - 5:01 pm

Hi Ajay, can you take a look at my code and help me? I am using data from mysql for the chart? The function map seems to break. It works for a day and then the whole app crashes. I can add my code here?

Ajay Malhotra July 31, 2020 - 5:05 pm

Send me on my email: therichposts@gmail.com


JuliaPeao July 31, 2020 - 5:52 pm Reply
Ishan Tewari August 9, 2020 - 4:28 pm

Ok.. I am sending you my code in email. Please have a look.

Vikas adhikari September 4, 2020 - 12:19 pm

TypeError: Cannot read property ‘loadChartPackages’ of undefined at GoogleChartComponent.ngOnInit…..
I am getting this error on angular 8. Please help

Ajay Malhotra September 4, 2020 - 12:21 pm

okay, I will update you. Thanks

Nitish Dhiamn September 5, 2020 - 10:48 am

AppComponent.html:5 ERROR TypeError: Cannot read property ‘ngMetadataName’ of undefined at injectArgs.
I’m having this error can anyone help me plz..
i’m using angular cli 8.0.3

Ajay Malhotra September 5, 2020 - 10:50 am

Where you have “‘ngMetadataName’ of undefined at injectArgs” used this?

Abhinaw Tiwari September 23, 2020 - 10:14 am

node_modules/angular-google-charts/lib/components/google-chart/google-chart.component.d.ts(85,9): error TS1086: An accessor cannot be declared in an ambient context.

I am getting this error. Can you help?

Ajay Malhotra September 23, 2020 - 10:18 am

Setting “skipLibCheck”: true in tsconfig.json will solve your problem.

“compilerOptions”: {
“skipLibCheck”: true


Leave a Comment

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