CODEWITHSUNDEEP
angulard3.jsnvd3.jsng2-nvd3
Stu
Stu

Reputation: 2436

ng2-nvD3 on Angular2 2.1.1

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.

Upvotes: 0

Views: 2149

Answers (5)

hendrathings
hendrathings

Reputation: 3755

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

Upvotes: 0

Marquis
Marquis

Reputation: 1

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

Upvotes: 0

ekuusi
ekuusi

Reputation: 57

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

Upvotes: 0

user781861
user781861

Reputation: 89

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

import "d3";  
import "nvd3";

Upvotes: 0

kodeaben
kodeaben

Reputation: 2055

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>

Upvotes: 1

Related Questions