Creating Beautiful Charts Using Ionic 3 and Angular 4 - Line, Bar and Doughnut Charts!

If you are not already Setup and Install Ionic Framework with Angular 4 – Setup and Install Ionic 3 and Angular 4

If you are not already created your apps using Ionic 3 and Angular 4, Please follow below Ionic 3 CLI Commands steps.

Step 1 – Once installed the globally utilities, create your first Ionic app using the commands.

ionic start myApp sidemenu

That is the syntax for a new project in Ionic. 

1.     myApp - will be the directory name and the app name from your project.

2.     sidemenu - ionic start myApp sidemenu. This is starter template for your project.

The myApp is any name of your choice and sidemenu is one of the Ionic supported template. The app-name and template name is decided by you as per your requirements.

Step 2 -Run your App

For viewing the app in a browser, we need to run below command

o   cd myApp

o   ionic serve

Step 3 – 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!