Create Chart In Ionic Using Chart Js

Chart.js is a popular open-source JavaScript library that allows us to add animated and responsive charts to our applications. It essentially represents the data using the HTML5 canvas.

Another significant advantage of chart JS is that it accepts data in JSON format, making the developer’s life easier.

If you are working on a Javascript project or a single-page application built on a Javascript framework like Angular, React, or others, Chart.js is one of the most acceptable options for your project because it is open source and does not cost anything.

Step 1:-

Create A New Ionic Application

ionic start chart-js

Create an Ionic angular app using the following code and select an Angular framework and blank template.

Step 2:-

Next, navigate to the program folder.

cd chart-js

Step 3:-

Add the following code to your .html file

<div>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card class="welcome-card">
          <ion-card-header>
            <ion-card-subtitle>No Of Plants</ion-card-subtitle>
            <ion-card-title>Plants</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <canvas #barChart style="position: relative; height:20vh; width:40vw"></canvas>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</div>

Step 4:-

Add the following code to your .ts file

import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { Chart, registerables } from 'chart.js';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
  bars: any;
  @ViewChild('barChart') barChart;

  ngOnInit() {
    this.changeDetector.detectChanges();
    this.createBarChart();
  }

  constructor(private changeDetector: ChangeDetectorRef) {

  }

  createBarChart() {
    Chart.register(...registerables);
    this.bars = new Chart(this.barChart.nativeElement, {
      type: 'line',
      data: {
        labels: ['2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],
        datasets: [{
          label: 'Small Plants',
          data: [3520, 2580, 3014, 2102, 2000, 1222, 1455, 1590],
          backgroundColor: 'rgba(0,0,0,0)', // array should have same number of elements as number of dataset
          borderColor: 'rgb(38, 194, 129)',// array should have same number of elements as number of dataset
          borderWidth: 1
        },
        {
          label: 'Large Plants',
          data: [2054, 3000, 2001, 1050, 3856, 5042, 6423, 5503],
          backgroundColor: '#dd1144', // array should have same number of elements as number of dataset
          borderColor: '#dd1144',// array should have same number of elements as number of dataset
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }] as any
        }
      }
    });
  }
}

Step 5:-

Run your ionic application

ionic start

Output:-