Ionic 2 + ng-charts / chartjs

Related to: [SOLVED] Ionic 2 + NG2-Charts

I have been trying for 24 hrs to set this up with no luck.

I get no errors in my console or terminal. Just a blank canvas.
I tried:

  2. (from @ihadeed)
  3. (the demo sample code)

My package.json below

  "dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/http": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
    "@angular/router": "^2.0.0-rc.1",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.7",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "chart.js": "1.0.2",
    "ng2-charts": "1.1.0"
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.1.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "run-sequence": "1.1.5"
  "cordovaPlugins": [
  "cordovaPlatforms": [
      "platform": "ios",
      "version": "",
      "locator": "ios"
  "name": "cutepuppypics",
  "description": "cutePuppyPics: An Ionic project"

My index.html importing chart.js

  <script src=""></script>
  <!-- <script type="text/javascript" src=""></script> -->

And my page:
Typescript file:

import {Page, NavController, NavParams} from 'ionic-angular';

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';

// import {CHART_DIRECTIVES} from './charts';
import {CHART_DIRECTIVES} from "ng2-charts/ng2-charts";

// Local services
import { SettingsService } from '../../model/settings/settings.service.ts';

// Page template
    templateUrl: 'build/pages/history/history.html',

export class HistoryPage {
    public lineChartData: Array<any> = [
        [65, 59, 80, 81, 56, 55, 40],
        [28, 48, 40, 19, 86, 27, 90]
    public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
    public lineChartType: string = 'line';
    public pieChartType: string = 'pie';

    // Pie
    public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
    public pieChartData: number[] = [300, 500, 100];

    public randomizeType(): void {
        this.lineChartType = this.lineChartType === 'line' ? 'bar' : 'line';
        this.pieChartType = this.pieChartType === 'doughnut' ? 'pie' : 'doughnut';

    public chartClicked(e: any): void {

    public chartHovered(e: any): void {

HTML file:

  <div class="col-md-6">
    <base-chart class="chart"
  <div class="col-md-6">
    <base-chart class="chart"
  <div class="col-md-12 text-center" style="margin-top: 10px;">
    <button (click)="randomizeType()" style="display: inline-block">Toggle</button>

Note: I have tried both Chartjs 1 and 2 (2 has a breaking change with ng2-charts that’s a known issue) with no luck.

Any help is appreciated ;D

Just tested out my repos, looks like they don’t work anymore. I tried creating a new app from scratch and it seems like the directives are broken now.

Since Charts.js 2.0 is out, I think we need new set of directives anyways :slight_smile:

So there is no way to have ng2-charts with Ionic 2 right now? If not, is there some other plugin to use for charts?

I think I managed to make ng2-charts work correctly in the meantime!

  • I installed ng2-charts and chart.js through npm
  • I used the setup described in the ng2-charts docs for html & typescript
  • I imported chart.js in my app.ts as follows:

import ‘…/node_modules/chart.js/dist/Chart.bundle.min.js’;

(this is what mainly made the difference in the end)

  • In the scss of the page that is displaying the chart, I added

.chart {
display: block;
height: 100%;

The charts now show up fine :smile:

1 Like

en my case only added class .chart in css and done.

file css or scss :
.chart {