Hi Follow the below-given steps:
Generate a New Ionic 2 Application
ionic start ionic2-charts blank
cd ionic2-charts
Install Chart.js
npm install chart.js –save
import { Chart } from ‘chart.js’;
Set up the Template
<ion-header>
<ion-navbar color=”danger”>
<ion-title>
Charts in Ionic 2
</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>
Modify src/pages/home/home.scss to reflect the following:
.ios, .md {
page-home {
.scroll-content {
background-color: map-get($colors, light);
}
ion-card-header {
font-weight: bold;
}
}
}
Create the Graphs
Modify src/pages/home/home.ts to reflect 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(‘barCanvas’) barCanvas;
barChart: any;
constructor(public navCtrl: NavController) {
}
ionViewDidLoad() {
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
}
}]
}
}
});
}
Modify src/pages/home/home.ts to reflect 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(‘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: [“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.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],
spanGaps: false,
}
]
}
});
}
}
For complete tutorials click here: https://hackr.io/tutorials/learn-ionic