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,