How To Add Google AreaChart In Angular

This article will teach you how to add an AreaChart to Google Charts.

Inside the browser, an area chart is displayed using SVG or VML. When a point hovers over, it shows tips.

Step 1:

Create a New Application

ng new areaChart

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 = 'Area Chart';
   type = 'AreaChart';
   data = [
      ["2019", 1000, 400],
      ["2020", 1170, 460],
      ["2021", 660, 1120]
   ];
   columnNames = ['Year', 'Purchase',"Expenses"];
   options = { 
      isStacked:true,
      hAxis: {
         title: 'Year'
      }  
   };
   width = 580;
   height = 200;
}

Step 5:

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

<google-chart
  title="Area Chart"
  [type]="areaChart"
  [data]="data"
  [columns]="columnNames"
  [width]="width"
  [height]="height"
>
</google-chart>

Step 6:

Run your application using the following code

ng serve

Output: