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.
Table of Contents
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/
