Chart.js 2.0 - How to?

Ionic Framework ionic-v3
1

Hi,

If I want to use Chart.js 2.0, how do you suggest me to try it using Typescript?

I can see a chart.js/dist directory with 4x Chart.*.js files

I saw that blog from Mike and would like to inspire myself with how he did it with lodash, but don’t know which module I can import from Chart.js (import {} from 'Chart';)!

I am still newbie with Typescript and import. I can deal and understand how to do it with my code and Ionic one, but when it comes to Javascript in Typescript, not sure.

If you can give me some directives or links it would be very appreciated.

Thanks

1 Like
2

There was pretty lengthy post about adding chart.js to a v2 project.

Personally, Im not a huge fan of chart, so I created an example app using C3.js

If you want to look over the thread, you can give it a read here.

3

Hi @mhartington i’m the one that started that looong post, i’ll like to know why do you like more c3?
I personally found easier and light-weighter (if that’s even a word) using ng2-charts (that builds over chart.js) instead of using C3 (on top of D3) or using D3 directly.

Maybe you like the huge amount of power and customization to display data in a hell lot of different ways while chart.js only have 5~6 chart types, however for simple uses i think chart.js is good enough and light-weight.

What do you think?

4

Personal preference really.

5

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’

?

6

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?

7

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.

8

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

9

@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?

10

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.

11

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

12

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

13

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.

14

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

15

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

16

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

17

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.

18

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
19

Hi @rapropos,

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

Thanks

20

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,
    });
  }
}