How To Create Google BarChart In Angular

Learn how to add a BarChart using Google Charts in this post.

SVG or VML, depending on the user’s browser, are used to render Google bar charts in the browser. Bar charts, like all other Google charts, provide tooltips when the user hovers over the data. View the column chart to see this chart in a vertical format.

Step 1:

Create a New Application

ng new barChart

Step 2:

Install Following Package

npm install angular-google-charts

Step 3:

Include the GoogleChartsModule in your app. The module.ts file

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

Step 4:

Insert the following code into your app.component.ts file.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
      title = 'Population (in millions)';
   type = 'BarChart';
   data = [
      ["2012", 900, 390],
      ["2013", 1000, 400],
      ["2014", 1170, 440],
      ["2015", 1250, 480],
      ["2016", 1530, 540]
   ];
   columnNames = ['Year', 'Asia','Europe'];
   options = {   
      hAxis: {
         title: 'Year'
      },
      vAxis:{
         minValue:0
      },
      isStacked:true	  
   };
   width = 550;
   height = 400;

}

Step 5:

Insert Following Code in your app.component.html file.

<google-chart 
    [type]="type" 
    [data]="data" 
    [columns]="columnNames" 
    [width]="500"
    [height]="400">
     
</google-chart>

Step 6:

Run your application using the following code

ng serve