Chart.js 2.0 - How to?

Personal preference really.

Hi @mhartington,

In you source code you do

import * as c3 from 'c3';

The ‘c3’ between single quote is the c3.js or the directory?

What would you do for chart.js?

import * as chart from ‘chart’

?

Hi @luchillo17,

In that other post, you mentioned that you did not have time to play with chart.js v2. Did you have time since that time?

Right now, for some reason, when I use ng2-chart, I get

Error: Uncaught (in promise): EXCEPTION: TypeError: (intermediate value)[this.chartType] is not a function in [_chartOptions in DashboardPage@82:11]

The html looks like this:

<base-chart class="chart"
       [data]="_chartData"
       [labels]="_chartLabels"
       [colours]="_chartColors"
       [chartType]="_chartType"
       [legend]="true"
       [options]="_chartOptions"
       (chartHover)="chartHovered($event)"
       (chartClick)="chartClicked($event)">
</base-chart>  

Any clue why I have that error?

Let me ask you, are you using chart.js v2? idk if ng2-charts works ok with chart.js v2, i still use the v1.0.0 and i don’t want to update until the project is mature, you can see i’m not even using the latest 1.x.x version, however i will tell you tomorrow, i’m away from the laptop.

You can see this page :http://valor-software.com/ng2-charts/.

@luchillo17,

I was using ng2-charts and chart.js version 1.x.x (don’t remember which one). It was working ok. (by the way, where did you find chart.ts file?)

Then, suddenly, no more labels.

I upgraded to the latest 1.x.x. Suddenly, no more graph. Only 4 colors dots representing the 4 labels. Maybe it was at the same time I upgraded to new Ionic, angular and other librairies needed to work with Ionic. Not sure.

I then tried to use the latest version (2.x) because I thought maybe it was the issue. Got worst!

My original package.json looks like this:

{
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "chart.js": "1.1.1",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.6",
    "ionic-native": "^1.1.1",
    "ionicons": "3.0.0-alpha.3",
    "ng2-charts": "^1.0.3",
    "ng2-translate": "1.11.1",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.0.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": "^1.0.1",
    "run-sequence": "1.1.5"
  },
  "name": "nexusionic",
  "description": "NexusIonic: An Ionic project",
  "cordovaPlugins": [
    "cordova-sqlite-storage",
    "cordova-plugin-camera",
    "cordova-plugin-file",
    "cordova-plugin-x-toast",
    "phonegap-plugin-barcodescanner",
    "cordova-plugin-statusbar",
    "cordova-plugin-whitelist",
    {
      "locator": "https://github.com/VitaliiBlagodir/cordova-plugin-datepicker.git",
      "id": "cordova-plugin-datepicker"
    },
    "cordova-plugin-globalization",
    "cordova-plugin-network-information"
  ],
  "cordovaPlatforms": [
    {
      "platform": "android",
      "locator": "windows"
    }
  ]
}

I have the chart.ts in my ‘app’ root. Still don’t know where that file comes from. I thought I could find it in ng2-chart or chart.js node directory, but nope. I took it from @ihadeed example that he put in your post.

In ts page file, I have:

import {CHART_DIRECTIVES} from '../../charts';

What am I missing?

Ok i’m currently using this:

{
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "chart.js": "^1.0.2",
    "es6-promise": "3.0.2",
    "es6-shim": "^0.35.0",
    "es7-reflect-metadata": "^1.6.0",
    "intl": "^1.1.0",
    "ionic-angular": "^2.0.0-beta.6",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0-alpha.3",
    "lodash": "^4.2.1",
    "moment": "^2.11.1",
    "ng2-charts": "^1.0.0-beta.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "^0.6.6"
  }

Note that i’m not neither using latest ng2-charts nor chart.js, i think the upper versions of ng2-charts were compiled to systemjs, i’m using webpack so if i try to update it breaks as webpack only understand commonjs and amd.

As for how to import it, it depends on your build system, idk how to do it with browserify but basically you can for simplicity and to test, import chart.js in the top of your app.ts:

import 'chart.js/Chart.min'
import {App, IonicApp, Platform, NavController} from 'ionic-angular'
@App({...})

And then you should be ready to use ng2-charts in the component you choose with the instructions in their page.

Hi @luchillo17,

Now, the error is

Error: Uncaught (in promise): EXCEPTION: ReferenceError: Chart is not defined in [_chartOptions in DashboardPage@82:11]

Does it give you some hint?

By the way, how do you use Chart.js in your app? How the code looks like?

Thanks in advance

I know what was my error. Now, the doughnut does not take the label anymore!

This was causing my issues!

[UPDATE]: it seems that options can generate the same issue. Need some investigation

You also need to put some style in one of the items, i can’t remember if it’s base chart or in canvas:

base-chart, canvas {
    display:block:
}

This one was frustrating since it happens when you instantiate the chart while hidden, as the container object doesn’t have any size it doesn’t render correctly if you have responsive property set.

Hello @icarus_31.

I recently using the chart in my ionic2 apps. I have the same issues as your mention.

Can you guide me out?

Thanks

I found out that, from the doc, there is no label for that type of chart! This is sad :frowning:

Hey, @icarus_31 thanks for you reply, can you more specific?
because I have this error:
EXCEPTION: ReferenceError: Chart is not defined
by following the guide from http://valor-software.com/ng2-charts/

and if i add the this in the one of a page.ts
import ‘chart.js/dist/Chart.min’

and I get this error:
TypeError: (intermediate value)[this.chartType] is not a function

Im so confusion now.
and the version of chart.js is “chart.js”: “2.1.3”,
and the version of ng2-charts is “ng2-charts”: “^1.0.3”.

And you share the step how you get your problem fix?
Thank you so much and have a great day

Finally, I found the issues.

  1. chart.js have to be 1.0.2. other version wont works.
  2. we can not import the chart.js/chart.min in the ts file. This will end up with the chart not defined.

So we have to put the chart.js to the libs file and add in the www/index.html.
and we have to modifier little bit the gulp file if you want to loading the js locally.

TODO: I hope the ng2-charts will fix those version issues.

FWIW, here is a datapoint. It’s not Ionic, but I do have an Angular2 application (using RC1) that uses chart.js version 2.1.2. I have the following line in a TypeScript file:

var Chart = require<any>('chart.js/src/chart');

I use @ViewChild to grab the canvas element, and pass its nativeElement member as the first argument to the Chart constructor. It works.

1 Like

Hi @rapropos,

Would you mind to show us the complete code related to the chart? Not sure to understand the @ViewChild

Thanks

Keep in mind that (a) I’m not using ng2-charts, and (b) this is a stock Angular2 app, not Ionic.

var Chart = require<any>('chart.js/src/chart');

@Injectable()
@Component({
  selector: 'donut-chart',
  template: `<canvas #canvas [height]="height" [width]="width"></canvas>`
})
export class DonutChart implements AfterViewInit {
  @ViewChild('canvas') private _canvas:ElementRef;
  @Input() height:number;
  @Input() width:number;
  @Input() values:number[];
  @Input() labels:string[];
  @Input() colors:string[];
  @Input() title:string;

  ngAfterViewInit():void {
    let data:any = {
      labels: this.labels,
      datasets: [{
        data: this.values,
        backgroundColor: this.colors,
      }]
    };
    let options:any = {
      // this avoids 0x0 charts
      responsive: false,
    };
    if (this.title) {
      options.title = {
        display: true,
        text: this.title,
      }
    }
    let chart = new Chart(this._canvas.nativeElement, {
      type: 'doughnut',
      data: data,
      options: options,
    });
  }
}

Thanks for the code.

By the way, do you confirm that no labels is available for doughnut chart?

Labels work fine for me using this component, in that they display in a legend above the donut, as they look in the screencaps in the docs.

oh! 2.0 is now official! Great

Thanks