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!