Bar and Doughnut

How to Create Bar Charts In Angular 4 using Ionic 3 CLI?

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!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions