Chart.js in Ionic

Fire Focus
Nov 8, 2020
1 min read

Outputs

Introduction

In this lesson, I will teach you how you can implement Charts in your Ionic Framework application using chart.js.

Install Chart.js

Install chart.js using the below command:

npm i chart.js --save

Displaying Charts

We use canvas element to display various kind of charts in our app.

chart.page.html

<ion-content>
 <ion-card>
  <ion-card-header>
      Line Chart
  </ion-card-header>
  <ion-card-content>
   <canvas #lineCanvas></canvas>
  </ion-card-content>
 </ion-card>
 
 <ion-card>
  <ion-card-header>
      Bar Chart
  </ion-card-header>
  <ion-card-content>
   <canvas #barCanvas></canvas>
  </ion-card-content>
 </ion-card>

 <ion-card>
  <ion-card-header>
      Doughnut Chart
  </ion-card-header>
  <ion-card-content>
   <canvas #doughnutCanvas></canvas>
  </ion-card-content>
  </ion-card>
</ion-content>

Initialize Chart.js

Next thing is to import chart.js in our app.Then, we use Viewchild to get reference of each canvas.

Next we create each chart by using Chart.js and we passing data to it.

chart.page.ts

import { Component, ElementRef, ViewChild } from '@angular/core';
import { Chart } from "chart.js";

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

export class Tab3Page implements OnInit{
  @ViewChild("barCanvas",{static:false}) barCanvas: ElementRef;
  @ViewChild("doughnutCanvas",{static:false}) doughnutCanvas: ElementRef;
  @ViewChild("lineCanvas",{static:false}) lineCanvas: ElementRef;
 
 private barChart: Chart;
 private doughnutChart: Chart;
 private lineChart: Chart;
 
 ionViewDidEnter(){
 
 this.barChart = new Chart(this.barCanvas.nativeElement, {
 type: "bar",
 data: {
 labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
 datasets: [
          {
 label: "# of Votes",
 data: [12, 19, 3, 5, 2, 3],
 backgroundColor: [
 "rgba(255, 99, 132, 0.2)",
 "rgba(54, 162, 235, 0.2)",
 "rgba(255, 206, 86, 0.2)",
 "rgba(75, 192, 192, 0.2)",
 "rgba(153, 102, 255, 0.2)",
 "rgba(255, 159, 64, 0.2)"
            ],
 borderColor: [
 "rgba(255,99,132,1)",
 "rgba(54, 162, 235, 1)",
 "rgba(255, 206, 86, 1)",
 "rgba(75, 192, 192, 1)",
 "rgba(153, 102, 255, 1)",
 "rgba(255, 159, 64, 1)"
            ],
 borderWidth: 1
          }
        ]
      },
 options: {
 scales: {
 yAxes: [
            {
 ticks: {
 beginAtZero: true
              }
            }
          ]
        }
      }
    });

 this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
 type: "doughnut",
 data: {
 labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
 datasets: [
          {
 label: "# of Votes",
 data: [12, 19, 3, 5, 2, 3],
 backgroundColor: [
 "rgba(255, 99, 132, 0.2)",
 "rgba(54, 162, 235, 0.2)",
 "rgba(255, 206, 86, 0.2)",
 "rgba(75, 192, 192, 0.2)",
 "rgba(153, 102, 255, 0.2)",
 "rgba(255, 159, 64, 0.2)"
            ],
            hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#FF6384", "#36A2EB", "#FFCE56"]
          }
        ]
      }
    });

 this.lineChart = new Chart(this.lineCanvas.nativeElement, {
      type: "line",
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
          {
            label: "My First dataset",
            fill: false,
            lineTension: 0.3,
            backgroundColor: "#222222",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: "butt",
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: "miter",
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
            spanGaps: false
          }
        ]
      }
    });
 
  }
}