Angular 13 Scatter Area Chart Example | Angular 13 Tutorial

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

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]="scatterChart"
>
</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() {

  }

  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/

Video Tutorial