Home › Forums › Chart Support › How can i use canvasjs in ionic 2? › Reply To: How can i use canvasjs in ionic 2?
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 } }] } }
});
@ViewChild(‘barCanvas’) barCanvas; @ViewChild(‘doughnutCanvas’) doughnutCanvas; @ViewChild(‘lineCanvas’) lineCanvas;
barChart: any; doughnutChart: any; lineChart: any;
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