I will go through how to utilise ng2-google-charts in this tutorial. I’ll go into detail on how to include ng2 Google Charts into our project. I’ll also go through some of the basics of ng2 Google Charts.
Installation
npm i ng2-google-charts
Importing
Importing the Ng2GoogleChartsModule into your app.module.ts is the following process. You’ll be able to utilise all of the capabilities offered by this Ng2 Google Charts Library as a result.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { Ng2GoogleChartsModule } from 'ng2-google-charts'; import { GoogleChartsComponent } from './google-charts/google-charts.component'; @NgModule({ declarations: [ AppComponent, GoogleChartsComponent, ], imports: [ BrowserModule, AppRoutingModule, Ng2GoogleChartsModule ], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
How to use the ng2 Google Chart feature
To utilise Ng2 Google Charts, the following line must be added to the HTML page.
<div> <google-chart></google-chart> </div>
Org-Chart
component.ts
import { Component, OnInit } from '@angular/core'; import { GoogleChartInterface} from 'ng2-google-charts'; @Component({ selector: 'app-google-charts', templateUrl: './google-charts.component.html', styleUrls: ['./google-charts.component.scss'] }) export class GoogleChartsComponent implements OnInit { public orgChart: GoogleChartInterface = { chartType: 'OrgChart', dataTable: [ ['Name', 'Manager', 'Tooltip'], [{v: 'Denish', f: 'Denish<div style="color:red; font-style:italic; width:192px">Project Manager</div>'}, '', 'The President'], [{v: 'Prinkesha', f: 'Prinkesha<div style="color:red; font-style:italic">Team Leader</div>'}, 'Denish', 'VP'], [{v:'Lija', f: 'Lija<div style="color:red; font-style:italic">Sr. Web Developer</div>'}, 'Prinkesha', 'SW'], [{v:'Jubin', f: 'Jubin<div style="color:red; font-style:italic">Sr. Web Developer</div>'}, 'Prinkesha', 'SW'], [{v:'sinngy', f: 'sinngy<div style="color:red; font-style:italic">Web Developer</div>'}, 'Jubin', 'JW'] ], options: { allowHtml: true, allowCollapse: true } }; ngOnInit(): void { } }
component.html
<div> <google-chart [data]="orgChart"></google-chart> </div>
Pie-Chart
component.ts
import { Component, OnInit } from '@angular/core'; import { GoogleChartInterface, GoogleChartType} from 'ng2-google-charts'; @Component({ selector: 'app-google-charts', templateUrl: './google-charts.component.html', styleUrls: ['./google-charts.component.scss'] }) export class GoogleChartsComponent implements OnInit { public pieChart: GoogleChartInterface = { chartType: GoogleChartType.PieChart, dataTable: [['Task', 'Hours per Day'], ['Work',6],['Lunch',2],['Stand-Up', 0.5],['Shore-end', 0.5],['Fun', 1]], options: { allowHtml: true, allowCollapse: true } }; ngOnInit(): void { } }
component.html
<div> <google-chart [data]="pieChart"></google-chart> </div>
Line-Chart
component.ts
import { Component, OnInit } from '@angular/core'; import { GoogleChartInterface, GoogleChartType} from 'ng2-google-charts'; @Component({ selector: 'app-google-charts', templateUrl: './google-charts.component.html', styleUrls: ['./google-charts.component.scss'] }) export class GoogleChartsComponent implements OnInit { public lineChart: GoogleChartInterface = { chartType: GoogleChartType.LineChart, dataTable: [['Task', 'Hours per Day'], ['Work',7],['Lunch',1],['Stand-Up', 0.5],['Shore-end', 0.5],['Fun', 1]], options: { allowHtml: true, allowCollapse: true } }; ngOnInit(): void { } }
component.html
<div> <google-chart [data]="lineChart"></google-chart> </div>
Column-Chart
component.ts
import { Component, OnInit } from '@angular/core'; import { GoogleChartInterface, GoogleChartType} from 'ng2-google-charts'; @Component({ selector: 'app-google-charts', templateUrl: './google-charts.component.html', styleUrls: ['./google-charts.component.scss'] }) export class GoogleChartsComponent implements OnInit { public ColumnChart: GoogleChartInterface = { chartType: GoogleChartType.ColumnChart, dataTable: [['Task', 'Hours per Day'], ['Work',7],['Lunch',1],['Stand-Up', 0.5],['Shore-end', 0.5],['Fun', 1]], options: { allowHtml: true, allowCollapse: true } }; ngOnInit(): void { } }
component.html
<div> <google-chart [data]="ColumnChart"></google-chart> </div>
Area-Chart
component.ts
import { Component, OnInit } from '@angular/core'; import { GoogleChartInterface, GoogleChartType} from 'ng2-google-charts'; @Component({ selector: 'app-google-charts', templateUrl: './google-charts.component.html', styleUrls: ['./google-charts.component.scss'] }) export class GoogleChartsComponent implements OnInit { public areaChart: GoogleChartInterface = { chartType: GoogleChartType.AreaChart, dataTable: [['Task', 'Hours per Day'], ['Work',7],['Lunch',1],['Stand-Up', 0.5],['Shore-end', 0.5],['Fun', 1]], options: { allowHtml: true, allowCollapse: true } }; ngOnInit(): void { } }
component.html
<div> <google-chart [data]="areaChart"></google-chart> </div>