Google Charts Angular Tutorial

Google Charts Angular Code Example

In this guide, we will integrate Google Charts into an Angular application. We'll display a simple pie chart as an example. Ensure you have Angular CLI installed and set up before proceeding.

Step 1: Setup Angular Project

Create a new Angular project by running the following command in your terminal:

ng new google-charts-angular-example


Move into your project directory:

cd google-charts-angular-example


Step 2: Install Angular Google Charts

Add the Angular Google Charts module to your project with this command:

npm install angular-google-charts


Step 3: Import AngularGoogleChartsModule

Open app.module.ts and import AngularGoogleChartsModule from angular-google-charts. Add it to the @NgModule imports array:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularGoogleChartsModule } from 'angular-google-charts';
import { AppComponent } from './app.component';

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   AngularGoogleChartsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }


Step 4: Add Google Chart to a Component

Open app.component.ts and set up the chart options and data. For our example, we'll create a simple pie chart:

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
   <google-chart
     [type]="chart.type"
     [data]="chart.data"
     [columnNames]="chart.columnNames"
     [options]="chart.options">
   </google-chart>
 `,
})
export class AppComponent {
 title = 'google-charts-angular-example';

 chart = {
   type: 'PieChart',
   data: [
     ['Task', 'Hours per Day'],
     ['Work', 11],
     ['Eat', 2],
     ['Commute', 2],
     ['Watch TV', 2],
     ['Sleep', 7]
   ],
   columnNames: ['Task', 'Hours per Day'],
   options: {
     is3D: true
   },
 };
}


Step 5: Run Your Application

Start your application by running:

ng serve


Open your browser and navigate to http://localhost:4200. You should see your Google Chart rendered on the page.

This basic example should help you get started with integrating Google Charts into your Angular applications. Explore further to discover the wide range of charts and customization options Google Charts offers.