In this tutorial we are going to add a Doughnut Chart to an Ionic application using Chart.js

Start by generating a new app using the command below

ionic start chartApp blank 1 2 3 ionic start chartApp blank

Now make it your working directory

cd ./chartApp 1 2 3 cd . / chartApp

Next we need to install the Chart.js by running the command below

npm install chart.js --save 1 2 3 npm install chart . js -- save

Now let’s update src/pages/home/home.html to the following

<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> The world is your oyster. <p> If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide. </p> <canvas #doughnutCanvas> </canvas> <ion-fab right bottom> <button ion-fab color="secondary" large outline icon-only (click)="addGreens()" > <ion-icon name='add' ></ion-icon> </button> </ion-fab> <ion-fab left bottom> <button ion-fab color="danger" (click)="addReds()"> <ion-icon name='add' ></ion-icon> </button> </ion-fab> </ion-content> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding > The world is your oyster. <p> If you get lost, the <a href = "http://ionicframework.com/docs/v2" > docs </a> will be your guide. </p> <canvas # doughnutCanvas > </canvas> <ion-fab right bottom > <button ion - fab color = "secondary" large outline icon - only ( click ) = "addGreens()" > <ion-icon name = 'add' > </ion-icon> </button> </ion-fab> <ion-fab left bottom > <button ion - fab color = "danger" ( click ) = "addReds()" > <ion-icon name = 'add' > </ion-icon> </button> </ion-fab> </ion-content>

Here we added the canvas to display the chart and also we added two fab buttons we will use to update the chart

Now let’s modify src/pages/home/home.ts to the following:

import { Component, ViewChild } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Chart } from 'chart.js'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { @ViewChild('doughnutCanvas') doughnutCanvas; greens: number; reds: number; doughnutChart: any; constructor(public navCtrl: NavController) { this.greens = 0; this.reds = 0; } addGreens(): void { this.greens++; this.displayChart(); } addReds(): void { this.reds++; this.displayChart(); } displayChart() { this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, { type: 'doughnut', data: { datasets: [{ data: [this.greens, this.reds], backgroundColor: [ 'rgba(0, 255, 0, 1)', 'rgba(255, 0, 0, 1)' ] }] }, options: { legend: { display: false }, tooltips: { enabled: false }, title: { display: false, fontStyle: 'bold', fontSize: 18 } }, }); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 import { Component , ViewChild } from '@angular/core' ; import { NavController } from 'ionic-angular' ; import { Chart } from 'chart.js' ; @ Component ( { selector : 'page-home' , templateUrl : 'home.html' } ) export class HomePage { @ ViewChild ( 'doughnutCanvas' ) doughnutCanvas ; greens : number ; reds : number ; doughnutChart : any ; constructor ( public navCtrl: NavController ) { this . greens = 0 ; this . reds = 0 ; } addGreens ( ) : void { this . greens ++ ; this . displayChart ( ) ; } addReds ( ) : void { this . reds ++ ; this . displayChart ( ) ; } displayChart ( ) { this . doughnutChart = new Chart ( this . doughnutCanvas . nativeElement , { type : 'doughnut' , data : { datasets : [ { data : [ this . greens , this . reds ] , backgroundColor : [ 'rgba(0, 255, 0, 1)' , 'rgba(255, 0, 0, 1)' ] } ] } , options : { legend : { display : false } , tooltips : { enabled : false } , title : { display : false , fontStyle : 'bold' , fontSize : 18 } } , } ) ; } }

As you can see here we imported Chart.js to the template and we created a doughnutChart to display reds & greens.

Let’s run the App using the command below

ionic serve 1 2 3 ionic serve

Use the fab buttons to update the chart and you will get the screen below. Check the code on GitHub



