Ionic 3 Angular 4 Line Charts - Line, Bar and Doughnut
In this blog post, I am going to share “How to
create Line charts in Angular 4 using Ionic 3 CLI?”. I hope you love this blog post.
The following steps are to achieve,
Install
Angular 2 Charts and Charts.js -
npm
install ng2-charts
--save
npm
install chart.js
--save
Once installation is completed, import chartsModule
import
{ ChartsModule } from
'ng2-charts';
After Import chartsModule, declare the charts
module in imports array.
import
{ BrowserModule } from
'@angular/platform-browser';
import
{ ErrorHandler, NgModule
} from '@angular/core';
import
{ IonicApp, IonicErrorHandler,
IonicModule } from
'ionic-angular';
import
{ ChartsModule } from
'ng2-charts';
import
{ MyApp } from
'./app.component';
import
{ HomePage } from
'../pages/home/home';
import
{ ListPage } from
'../pages/list/list';
import
{ LoginPage } from
'../pages/login/login';
import{
RegisterPage } from
'../pages/register/register';
import{
UsersPage } from
'../pages/users/users';
import
{ StatusBar } from
'@ionic-native/status-bar';
import
{ SplashScreen } from
'@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
LoginPage,
RegisterPage,
UsersPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
ChartsModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
LoginPage,
RegisterPage,
UsersPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler,
useClass: IonicErrorHandler}
]
})
export
class AppModule
{}
After declare the charts module in imports array,
add the charts HTML code in your Apps,
Home.html
–
<div
class="row">
<div
class="col-md-6">
<div
style="display:
block;">
<canvas
baseChart height="350"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
Home.ts
import
{ Component } from
'@angular/core';
import
{ NavController } from
'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export
class HomePage
{
constructor(public
navCtrl: NavController)
{ }
//line Chart Data
public
lineChartData:Array<any>
= [
{data: [65,
59, 80,
81, 56,
55, 40],
label: 'Series1'},
{data: [28,
48, 40,
19, 86,
27, 90],
label: 'Series2'},
{data: [18,
48, 77,
9, 100,
27, 40],
label: 'Series3'}
];
public
lineChartLabels:Array<any>
= ['January', 'February',
'March', 'April',
'May', 'June',
'July'];
public
lineChartOptions:any
= {
responsive: true
};
public
lineChartLegend:boolean
= true;
public
lineChartType:string
= 'line';
public
lineChartColors:Array<any>
= [
{
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor:
'rgba(22,15,17,1)',
pointBorderColor:
'#fff',
pointHoverBackgroundColor:
'#fff',
pointHoverBorderColor:
'rgba(148,159,177,0.8)'
},
{
backgroundColor: 'rgba(23,33,33,0.2)',
borderColor: 'rgba(77,83,96,1)',
pointBackgroundColor:
'rgba(77,83,96,1)',
pointBorderColor:
'#fff',
pointHoverBackgroundColor:
'#fff',
pointHoverBorderColor:
'rgba(77,83,96,1)'
},
{
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor:
'rgba(148,159,177,1)',
pointBorderColor:
'#fff',
pointHoverBackgroundColor:
'#fff',
pointHoverBorderColor:
'rgba(148,159,177,0.8)'
}];
// Chart events
public chartClicked(e:any):void
{
console.log(e);
}
// Chart events
public chartHovered(e:any):void
{
console.log(e);
}
}
Result looks like –
I hope you are enjoying with this post! Please share with you friends. Thank you so much!