Chart Created Using ng2-google-charts

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>