Google Charts Angular Tutorial

What is Google Charts?

Google Charts has a wide variety of charts and operates with both SVG and HTML5 technology to be highly compatible. It is free to use and is a great library to launch charting. It doesn't offer as much customizability as some other charting libraries, but is a great solution.

What is Angular?

Angular is a popular open-source framework developed by Google for building dynamic web applications. It's part of a broader ecosystem that includes tools and libraries designed to work together to enable efficient development of high-quality applications. Angular is known for its robustness, scalability, and ability to create single-page applications (SPAs) that offer a smooth, native-like user experience. Angular has a component-based architecture, enabling great modularity. Additionally, it is great at syncing data between a view and a model. It can have a steep learning curve, but has a great community and high performance.

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.