Angular 9/10 Google Charts Working Example

angular-10-google-charts

Hello to all, welcome again on therichpost.com. 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: [
    ...
    GoogleChartsModule.forRoot(),
  ]

 

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.

Jas

Thank you

Comments

10 responses to “Angular 9/10 Google Charts Working Example”

  1. Damian Avatar
    Damian

    Man this is not working

  2. Damian Avatar
    Damian

    Oh never mind, it is working now!

  3. Chandu Ratkal Avatar
    Chandu Ratkal

    For me, I was getting error : Type ‘string’ is not assignable to type ‘ChartType’, I just googled it and following is the solution:
    Need to following additional import in : import { ChartType, Row } from “angular-google-charts”;
    myType = ChartType.PieChart; // Angular CLI: 12.0.4

  4. Ajay Malhotra Avatar

    Great and thanks.

  5. Leonel Avatar
    Leonel

    Nice. It works.

  6. Alonso Morales Avatar
    Alonso Morales

    Gracias por el aporte.

  7. ThorEEEE Avatar
    ThorEEEE

    Saved my life Chandu, thank you! Well, saved the rest of my work day at least 🙂