ng2-nvD3 on Angular2 2.1.1

Question

I'm trying to use ng2-nvd3 (https://github.com/krispo/ng2-nvd3) in an Angular2 project (core v2.1.1) but it's not working.

I've put nvD3 in the declarations in my @MgModule:

  declarations: [
        ...
        TestComponent,
        nvD3,
      ],

and I've set up the component as described:

import {Component} from '@angular/core';
import {nvD3} from 'ng2-nvd3';
declare let d3:any;

@Component({
    template: '<div><nvd3 [options]="options" [data]="data"></nvd3></div>'
})
export class TestComponent {
    options;
    data;
    ngOnInit(){
        this.options = {
            chart: {
                type: 'discreteBarChart',
                height: 450,
                margin : {
               ...

but I get the error:

EXCEPTION: Uncaught (in promise): Error: Error in ./TestComponent class TestComponent - inline template:0:31 caused by: nv is not defined

I've got nvd3 and d3 in my package.json file but I'm not sure what I should be doing with them.

score 1 · Answer 1 · answered Nov 11 '16 at 10:25

1

I had a similar problem, and though it´s not pretty, try including the following in your index.html:

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js"></script>

answered Nov 11 '16 at 10:25

kodeaben

1,829
3
24
33

hm, I tried the same by copying the local files (referenced by ng2-nvd3) but that still lead to errors, probably was the wrong version. – Akzidenzgrotesk Nov 11 '16 at 12:44

user781861 · Answer 2 · 2016-11-21T19:24:15.730

0

i fixed 'nv is not defined' by adding these lines to my vendor.ts (vendor dependencies)

import "d3";  
import "nvd3";

edited Nov 21 '16 at 19:24

answered Nov 18 '16 at 21:41

user781861

89
5

score 0 · Answer 3 · answered Nov 29 '16 at 19:31

You can check out a working solution in a very simple repo in the link below. It uses Webpack for bundling.

The relevant files from installed packages are

/public/stylesheets/nv.d3.min.css (copied from nvd3 node-modules folder)
/assets/nvd3/ng2-nvd3.ts (copied from ng2-nvd3 node-modules folder)
/assets/app/shared/nv.d3.min.js (copied from nvd3 node-modules folder)
(note: my current workaround doesn't use the nvd3.module.ts file)

Then in the project itself, to get everything working:

/views/index.hbd (link to styles)
/assets/app/app.module.ts (declare nvD3)
/assets/app/app.component.ts (import nvD3 and nv.d3.min.js, declare d3)

This setup allows for use of nvd3 in the target component (app.component in this case).

https://github.com/ekuusi/nvd3-ng2-grid-issue

score 0 · Answer 4 · answered Dec 29 '16 at 22:49

0

I had the same issue and discovered that it only works with D3 version 3, besides of required workarounds already mentioned.

answered Dec 29 '16 at 22:49

Marquis

1

score 0 · Answer 5 · answered Jan 21 '17 at 02:57

0

For angular 2 RC6 up try this:: angular2-nvd3

answered Jan 21 '17 at 02:57

hendrathings

3,720
16
30

ng2-nvD3 on Angular2 2.1.1

5 Answers5