Angular 13 Area Chart Example | Angular 13 Tutorial

Share the post

Hello All, This is the Angular 13 Area Chart Example. In the last angular 13 tutorials, We had discussed How to implement PieChart in angular 13.

In this angular 13 example, We will try to show students marks in the form of an area chart. So, you will get an idea of How to implement an area chart in the angular 13 application.

Steps for Angular 13 Area Chart Example

  • Step1: Create Angular Project
  • Step2: Import Ng2GoogleChartsModule
  • Step3: Update Template
  • Step4: Update TS Code
  • Step5: Run Angular Project

Step1: Create angular project

Create a new angular project in the windows machine using the following command.

ng new <APPNAME>

Now, move to our root project directory using the following command

cd <APPNAME>

Open the newly created angular project in Visual Studio Code. Use the following command to open the project.

code .

Step2: Import Ng2GoogleChartsModule

Now, We need to install the required module dependency using the following command

npm i --save ng2-google-charts

Import the Ng2GoogleChartsModule in app.module.ts as shown below

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    Ng2GoogleChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step3: Update Template

Now, We have to update app.component.html as shown below

<google-chart
  [data]="areaChart"
>
</google-chart>

Step4: Update TS Code

We will write the code in our TypeScript file. Update the app.component.ts file as shown below.

import { Component } from '@angular/core';
import { GoogleChartInterface, GoogleChartType } from 'ng2-google-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {


  constructor() {

  }

  areaChart: GoogleChartInterface = {
    chartType: GoogleChartType.AreaChart,
    dataTable: [
      ['Student', 'Marks'],
      ['A', 80],
      ['B', 90],
      ['C', 88]
    ],
    options: { 'title': 'Student Marks' },
  };
}

In the above example, We are trying to show an area chart of student marks.

Step5: Run Angular Project

To run the angular project using the below command.

ng serve

or use the below command

npm run start

See the output in http://localhost:4200/

Angular 13 Area Chart Example
Angular 13 Area Chart Example
Angular 13 Area Chart Example

1 thought on “Angular 13 Area Chart Example | Angular 13 Tutorial”

Leave a Comment