Ionic 3 CLI In Angular 4 Doughnut Charts - Line, Bar and Doughnut!

In this blog post, I am going to share “How to create doughnut 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 2</h2>

          <div style="display: block">

              <canvas baseChart height="350"

                          [data]="doughnutChartData"

                          [labels]="doughnutChartLabels"

                          [chartType]="doughnutChartType"

                          (chartHover)="chartHovered($event)"

                          (chartClick)="chartClicked($event)"></canvas>

            </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) {  }

// Doughnut data

  public doughnutChartLabels:string[] = ['Buy', 'Sale', 'in Stock'];

  public doughnutChartData:number[] = [350, 450, 100];

  public doughnutChartType:string = 'doughnut';

  // 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!