In this blog post, I am going to share “How to
create bar 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
–
<h2>Business
Charts</h2>
<div>
<div
style="display:
block">
<canvas
baseChart height="350"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</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)
{ }
public barChartOptions:any
= {
scaleShowVerticalLines:
false,
responsive: true
};
//Chart Labels
public barChartLabels:string[]
= ['2011', '2012',
'2013', '2014',
'2015', '2016',
'2017'];
public barChartType:string
= 'bar';
public barChartLegend:boolean
= true;
//Chart data
public barChartData:any[]
= [
{data: [66,
55, 83,
82, 56,
51, 43],
label: 'Loss'},
{data: [29,
38, 40,
21, 82,
30, 89],
label: 'Profit'}
];
// Chart events
public chartClicked(e:any):void
{
console.log(e);
}
// Chart events
public chartHovered(e:any):void
{
console.log(e);
}
}
Result looks like –
Stayed Informed - Angular 4 Documents and Ionic 3 CLI Angular 4
I hope you are enjoying with this post! Please share with you friends. Thank you so much!
I hope you are enjoying with this post! Please share with you friends. Thank you so much!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
