Ionic 2 + ng-charts / chartjs

Ionic Framework ionic-v3
1

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:

  1. https://github.com/ihadeed/charttest
  2. https://github.com/ihadeed/ionic2-ng2charts (from @ihadeed)
  3. https://github.com/valor-software/ng2-charts (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": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "name": "cutepuppypics",
  "description": "cutePuppyPics: An Ionic project"
    }

My index.html importing chart.js

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></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
@Page({
    templateUrl: 'build/pages/history/history.html',
    directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})

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 {
        console.log(e);
    }

    public chartHovered(e: any): void {
        console.log(e);
    }
}

HTML file:

<ion-content>
  <div class="col-md-6">
    <base-chart class="chart"
            [datasets]="lineChartData"
            [labels]="lineChartLabels"
            [options]="lineChartOptions"
            [chartType]="lineChartType"></base-chart>
  </div>
  <div class="col-md-6">
    <base-chart class="chart"
            [datasets]="pieChartData"
            [labels]="pieChartLabels"
            [chartType]="pieChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></base-chart>
  </div>
  <div class="col-md-12 text-center" style="margin-top: 10px;">
    <button (click)="randomizeType()" style="display: inline-block">Toggle</button>
  </div>
</ion-content>

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

2

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:

3

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?
Thanks.

EDIT:
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
4

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

file css or scss :
.chart {
display:block;
}

greetings.