What is angular-google-charts ?

==> angular-google-charts is a open source angular based wrapper for Google Charts to provides an elegant and feature rich Google Charts visualizations within an Angular application and can be used along with Angular components seamlessly.

==> Google Charts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. Google Charts provides a wide variety of charts. For example, line charts, spline charts, area charts, bar charts, pie charts and so on. This tutorial will teach you the basics of Google Charts.

* Steps to Follow:

Install Google Charts Wrapper

step1 :       command :    npm angular-google-charts

step2 :     Import the GoogleChartsModule in your app.module.ts

import { GoogleChartsModule } from 'angular-google-charts';

@NgModule({
  ...
  imports: [
    ...
    GoogleChartsModule,
    ...
  ],
  ...
})
export class AppModule {}

step 3 :  Following is the content of the modified HTML host file app.component.html.

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

 step 4:   Consider the following example to further understand the Configuration Syntax −   app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Browser market shares at a specific website, 2014';
   type = 'PieChart';
   data = [
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
      ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7] 
   ];
   columnNames = ['Browser', 'Percentage'];
   options = {    
   };
   width = 550;
   height = 400;
}

step 5 : see the result