Scatter Area Chart Example In Ionic 5 | Ionic 5 Tutorial

Share the post

Hello All, This is the Scatter Area Chart Example In Ionic 5. In the last Ionic 5 tutorial, We had discussed How to check device is rooted or not in Ionic?

In this Ionic 5 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 Ionic 5 application.

Table of Contents

Steps for Scatter Area Chart Example In Ionic 5

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

Step1: Create Ionic project

Create a new Ionic project in the windows machine using the below command.

ionic start myApp blank

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

cd <APPNAME>

Open the newly created Ionic 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 home.module.ts as shown below

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    Ng2GoogleChartsModule
  ],
  declarations: [HomePage],
  providers: []
})
export class HomePageModule { }

Step3: Update Template

Now, We have to update home.page.html as shown below

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Scatter Area Chart Example in Ionic
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <google-chart [data]="scatterChart">
  </google-chart>
</ion-content>

Step4: Update TS Code

We will write the code in our TypeScript file. Update the home.page.ts file as shown below.

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  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 Ionic Project

To run the Ionic project using the below command.

ng serve

or use the below command

npm run start

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