How to add chart from chart.js to Ionic Apps


We can add a chart into ionic apps from the different library, the most popular libraries for adding charts are  D3, Chart.js and angular2-highcharts. The Chart.js  are easy to add in the Ionic framework as compare to D3. The chart.js  is Javascript library that uses the HTML5 <canvas> element to display graphs, which is perfect for an HTML5 mobile application.  The charts are super simple to set up, they look beautiful, and they are responsive by default – so they easily scale with your application as you change between devices or screen orientation.

Step in Creating charts in Ionic:

Step 1: 

ionic start charts blank
cd charts
npm install chart.js --save

Step 2: Add following code in home.html.  

<ion-header>
  <ion-navbar color="danger">
    <ion-title>
      Charts.js in Ionic 
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content>
    <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-card>
      <ion-card-header>
        Line Chart
      </ion-card-header>
      <ion-card-content>
        <canvas #lineCanvas></canvas>
      </ion-card-content>
    </ion-card>
</ion-content>

We have 3 cards, each card has an element

&lt;canvas&gt;

, and we add a local variable like so

#barCanvas

that we can easily grab a reference to it from our TypeScript file.

Add following code in home.ts 

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('barCanvas') barCanvas;
    @ViewChild('doughnutCanvas') doughnutCanvas;
    @ViewChild('lineCanvas') lineCanvas;
 
    barChart: any;
    doughnutChart: any;
    lineChart: any;
 
    constructor(public navCtrl: NavController) {
 
    }
 
    ionViewDidLoad() {
 
        this.barChart = new Chart(this.barCanvas.nativeElement, {
 
            type: 'bar',
            data: {
                labels: ["BJP", "INC", "AAP", "CPI", "CPI-M", "NCP"],
                datasets: [{
                    label: '# of Votes',
                    data: [200, 50, 30, 15, 20, 34],
                    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: ["BJP", "Congress", "AAP", "CPM", "SP"],
                datasets: [{
                    label: '# of Votes',
                    data: [50, 29, 15, 10, 7],
                    backgroundColor: [
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)'
                    ],
                    hoverBackgroundColor: [
                        "#FFCE56",
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56",
                        "#FF6384" 
                    ]
                }]
            }
 
        });
 
        this.lineChart = new Chart(this.lineCanvas.nativeElement, {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "November", "December"],
                datasets: [
                    {
                        label: "Sell per week",
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(75,192,192,0.4)",
                        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, 10, 5, 50, 10, 15],
                        spanGaps: false,
                    }
                ]
            }
 
        });
 
    }
 
}

 

Notice: –that we are importing Chart, and we are also importing ViewChild. We use ViewChild to grab a reference to the local variable we attached to the canvas in the template, and then we supply that element to new Chart when we are creating a chart. All we have to do is supply Chart with an object that defines the type of chart we want, and the type of data we want to display.

We don’t have to add anything to app.module.ts file.