How To Create Google ColumnChart In Angular

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

According to the capabilities of the user’s browser, a column chart is a vertical bar chart that is shown in the browser using either SVG or VML.

As with all Google charts, when a user hovers over the data, column charts provide tooltips.

Step 1:

Create a New Application

ng new columnChart

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 = 'ColumnChart';
   columnChartData = [
      ["2012", 900],
      ["2013", 1000],
      ["2014", 1170],
      ["2015", 1250],
      ["2016", 1530]
   ];
   columnChartData = ['Year', 'Asia','Europe'];
   options = {};
   width = 550;
   height = 400;
}

Step 5:

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

<google-chart
  [title]="title"
  [type]="type"
  [data]="columnChartData"
  [columns]="columnChartColumns"
  [options]="options"
></google-chart>

Step 6:

Run your application using the following code

ng serve