Ng2-charts: There is no working example with systemjs and Angular 2.1.0

[timothyBrake]

I am trying to use this using systemjs and it worked prior to using Angular 2.1.0 (used Angular 2.0.0-RC5) and using the directives directly in the Components using @Component.

I am now however upgrading to Angular 2.1.0 with the @NgModule({ imports: ChartsModule) I have issues. There is a section systemjs in the docs but is just points to js files. I have tried to setup everythign correctly but I get an error in the systemjs javascript file on the line

_export($__require("./components/charts/charts"));

Probably I need to do some more setup but my issue is that there is not working example of ng2-charts using systemjs, which is the module loader being used in all Angular2 official documentation. Whether or not it is the best is besides the point.

It would help me (and probably others as well) if someone would add a simple example of setup using systemjs, Angular 2.1.0. and ng2-charts

Kind regards,
T

[timothyBrake]

I have managed to get the components loaded ok (I think) but now when using the ChartsModule I get:
localhost/:234 Error: (SystemJS) Unexpected value 'undefined' imported by the module 'AppModule' Error: Unexpected value 'undefined' imported by the module 'AppModule'

After debuggin it is the ChartsModule that is not being loaded correctly. Any help more than welcome.

[timothyBrake]

After some time I managed to get it working but I think there needs to be a change in the ng2-charts library to make it more elegant.

1) Configuration.
1.1) app.module.ts

...
import {ChartsModule} from "ng2-charts-components"

@NgModule({
    imports: [
       ...
        ChartsModule
       ...
    ],

1.2) systemjs.config.js

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
            'ng2-charts': 'npm:ng2-charts/bundles',
            'ng2-charts-components': 'npm:ng2-charts/components/charts/charts.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
            'ng2-charts': { defaultExtension: 'js' }

        }
    });
})(this);

2) the docs are out of date for 1.4.0 version of ng2-charts. You must use something like this now:

 ...
<div style="display: block">
    <canvas baseChart
        [data]="pieChartModel.pieChartData"
        [labels]="pieChartModel.pieChartLabels"
        [chartType]="pieChartModel.pieChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
 </canvas>
</div>
...

I guess normally you only need to use the import
import {ChartsModule} from "ng2-charts/ng2-charts"
and the SystemJS setup should only use
'ng2-charts': 'npm:ng2-charts/bundles',

A working example from the developers would still be excellent though ;-)

Kind regards,
T

[georgeedwards]

I am also having issues using this in 2.1.0. However, I'm using wepback2. Anyway, I was wondering why you are using the <canvas></canvas> tags? The docs say to use <base-chart></base-chart>.. however, only your solution works for me! Are there docs you followed t use that tag?

[timothyBrake]

I have found that in a commit message in one of the latest commits for 2.1.0.

[georgeedwards]

Thanks, I was looking in the wrong place!

[georgeedwards]

Have you published your working example? I have this in my template:

<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
    [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>

and then this in my component:

public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];

  // events
  public chartClicked(e: any): void {
    console.log(e);
  }

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

But it doesn't show anything in my app. The element exists, but the hover event doesn't trigger and I can't see anything... no console errors? Would be great to have something to work from.

[timothyBrake]

The surrounding "div with display block" that is

[georgeedwards]

Hmmm, even with

<div style="display: block">
<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
    [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>
</div>

I still don't see the chart...

[Methodician]

I have to be frank with a bit of a rant here: none of the Valor Software solutions I've tried have worked, especially since final release 2.0.0 and I might even suspect they're somehow gaming SEO!

I feel bad posting this here but I shouldn't. It's not appropriate but it is. So shoot me. How else can I get your attention?

Almost every time I look for an out-of-box solution for something simple like this with Angluar 2, Valor Software has the first 2-5 Google results. Almost every time their stuff is dependent on external libraries, poorly documented, woefully out of date, and/or generally over-complicated. I can't recall ANY of their solutions that have worked for me (this must be number 5 or 6). Why do I keep clicking their links and losing hours of dev. time when I'd be better off coding something from scratch or finding some non-Angular solution and adapting it myself? Valor people, if you're reading this, you have every right to find me irritating (because I'm irritated)... Just know you've wasted so much of my time that I'm learning to distrust your solutions, surely along with countless others. Please update your documentation and make sure your tools work while you manage to hold such great search ranking. Your solutions sound awesome on paper but so far none of them help.

Now for my actual problem: ChartsModlue comes through as "Undefined" at run time even though it's found at compile time. Timothy Blake's hack doesn't work for me either - 'ng2-charts-components' is not found in './components/charts/charts.js' at run time...

[nkholski]

I have no experience of Valor Software in general, but ng2-charts works fine here. I was planning to use Google Charts but couldn't find anything that actually worked (and I don't want to spend time doing a hacky solution), after some research I choose ng2-charts. So, it stands strong in the "competition" right now at least.

That said, I found this thread yesterday after running into problems with Angular 2.1.0. That was solved by the suggested div. However:

1. The div shouldn't be necessary.
2. At least it should be documented.
3. If I stumbled into this problem when I was comparing different repositories I would probably ditch ng2-charts instead of trying to find a solution.

If this was my repository I would remove the div-requirement as top priority, but by my experience it's not fair to say that ng2-charts isn't working.

[Methodician]

@nkholski - did you start with 2.1.0 or upgrade to it? I wonder if it's because I'm starting at Angular 2.1.0 rather than upgrading to it? Ranty as I may have been I'd still like to help get to the bottom of this. Also, I wonder if Valor Softare's solutions require some special hacking to be compatible with an ASP.Net application as that's what I'm working with. Like you, after some research this seemed like the best solution. However, "the div solution" will not help for me because I can't even get the solution to run time without the "Undefined" errors this thread was started for.

[nkholski]

I updated from 2.0.something. I'm using angular-cli which uses webpack so I'm unable to help you with your problem. The 2.1.0 upgrade should be free from breaking changes so it's a bit strange, even for me that got it to work with the div-trick. Have you tried to import other 3rd party modules with systemJS / your environment?

[Standaa]

@Methodician Same here, started from a fresh angular-cli project and the chart is not displayed anymore. The code used to work on previous version and no error is displayed. I've been playing around with all info I could find, but didn't manage to work my way around it.

[frosenberg]

Glad I found this. Thanks @timothyBrake for the fix. I used webpack but that does not make much difference as the loading part it straightforward.

[paviad]

Angular 2.1.0 is obsolete, closing this issue.