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.

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


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

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

  imports: [
  declarations: [HomePage],
  providers: []
export class HomePageModule { }

Step3: Update Template

Now, We have to update as shown below

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

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

Step4: Update TS Code

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

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

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
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/

Scatter Area Chart Example In Ionic 5
Scatter Area Chart Example In Ionic 5

Leave a Comment