How To Create Google Charts In Angular

Introduction

In this article, we will learn how to create Google charts in Angular 11 in visual studio code.

Step 1

Create an Angular project setup using the below commands or however you create your Angular apps.

ng new googlechart

Step 2 - angular-google-charts

It is an open-source angular based wrapper for Google Charts to provides elegant and feature-rich Google Charts visualizations within an Angular application.

It can be used with Angular components.

Google Charts

It is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability.

Supported Chart Types

Area charts
Bar charts
Bubble charts
Calendar charts
Column charts
Pie charts
Scatter charts
Histogram charts
Tree map charts
Radar charts
TimeLines charts
Gauge charts
Line charts
WaterFall charts
Table charts
Donut charts

Step 3

Open a new terminal and run the following below commands.

Install Google Charts Wrapper module in Your App.

npm install angular-google-charts

Step 4 - App.module.ts

Now we will declare Google chart in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
GoogleChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 5

Now, we will write integration on App.component.html

<google-chart #chart
[title]="title"
[type]="type"
[data]="data"
[columnNames]="columnNames"
[options]="options"
[width]="width"
[height]="height">
</google-chart>

Step 6

Next, we can open the app.component.ts and write some code.

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { GoogleChartComponent } from 'angular-google-charts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'googlechart';
type = 'PieChart';
data = [
['Name1', 5.0],
['Name2', 36.8],
['Name3', 42.8],
['Name4', 18.5],
['Name5', 16.2]
];
columnNames = ['Name', 'Percentage'];
options = {
};
width = 500;
height = 300;
constructor(){}
ngOnInit() {}
}

Step 6

Chart Configuration

Set Chart Type

type='PieChart';

Pie chart

It is rendered within the browser using SVG or VML.

Pie charts are used to draw pie based charts.

Basic pie chart.
Donut Chart.
3D Pie chart.
Pie chart with exploded slices

column names

columnNames = ['Browser', 'Percentage'];

Options

Configure the other options.

options = { colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], is3D: true};

is3D is false by default, so here we explicitly set it to true.

You can separate pie slices from the chart with the offset property of the slices option

Step 7

Now we will run the application

ng serve --port 1234

On successful execution of the above command, it will show the browser,

2 Comments

Join the conversation! Your thoughts help the community grow.

Shruti Sharma5y ago
Hi, would you please can give us the downloadable code, as I am still facing issue in angular 11 version for chart and google chart implementation.
- Maragatha Mani5y ago
  Okay sure Shruti Sharma. what type of issue you are facing in angular11