Angular 13 Scatter Area Chart Example | Angular 13 Tutorial

Share the post

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

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

Steps for Angular 13 Scatter 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 below command.

ng new <APPNAME>

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


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';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Step3: Update Template

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


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';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']

export class AppComponent {

  constructor() {


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

In the above example, We are trying to show the Scatter 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/

Scatter Area Chart Example
Scatter Area Chart Example

Video Tutorial

Scatter area chart example in angular 13

Leave a Comment