NVD3.js: ReferenceError: nv is not defined

Question

I am using NVD3.js library to generate graph. I tried adding line chart into it & getting the above error. How to resolve it?

I am trying this here

ISONecroMAn · Answer 1 · 2016-01-20T21:28:17.573

Actually i found out, the problem was the folder structure. The examples that comes with the angular-nvd3 website gives path

bower_components/nvd3/nv.d3.js

, check in your bower_components file the actual path would be

bower_components/nvd3/build/nv.d3.js

Similarly the nv.d3.css path is NOT

bower_components/nvd3/nv.d3.css

it is,

bower_components/nvd3/build/nv.d3.css

Also, DON'T forget to add

<meta charset="utf-8">

as the first line inside your head tag..

score 3 · Accepted Answer · answered Apr 16 '15 at 16:04

3

Can you post a Plunker/Fiddle? Off the top of my head, it may just be where you're including the nv.d3.js. Did you also include D3.js?

answered Apr 16 '15 at 16:04

Lucas

1,359
7
16

yes. i think i need to add D3.V3.min.js also. i havent seen the home page of NVD3.js website directly went to graph examples where there is no reference for files to be included.....thanks – Shaggie Apr 17 '15 at 05:24
2

any solution for this? – Balasubramani M Oct 31 '15 at 10:49
You need to make sure D3 is included before using NVD3. http://d3js.org/d3.v3.min.js – Lucas Nov 01 '15 at 00:23

Lenka Weiss · Answer 3 · 2016-12-02T10:18:42.320

I had the similar problem working with ionic2 (based on Angular2).

Although all the necessary libraries were included in the index.html. The problem finaly was that the scripts has to be included before the ionic app is loaded!!!

<!-- These scripts are copied from node_modules-->
  <script src="build/d3.min.js" charset="utf-8"></script>
  <script src="build/nv.d3.min.js"></script>

<!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

score 1 · Answer 4 · answered Nov 09 '16 at 19:03

1

Did u include nv.d3.js & d3.js as the sequence of these will also cause issues Try adding d3.js first

answered Nov 09 '16 at 19:03

VISHU KULKARNI

13
5

score 1 · Answer 5 · answered Dec 28 '17 at 11:50

1

<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.5/nv.d3.min.js"></script>

Add these files in your index.html

answered Dec 28 '17 at 11:50

TheDoozyLulu

384
2
6
23

1

Also need to add dependencies in package.json if you have forgotten – TheDoozyLulu Dec 28 '17 at 11:52
While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Isma Dec 28 '17 at 13:55

Umesh Patadiya · Answer 6 · 2019-04-10T06:18:37.460

0

If you are using angular 2 or higher version, then

"../node_modules/ng2-nvd3/node_modules/d3/d3.min.js",
"../node_modules/ng2-nvd3/node_modules/nvd3/build/nv.d3.min.js"

Just add above lines under scripts array in .angular-cli.json.

edited Apr 10 '19 at 06:18

answered Mar 13 '18 at 09:55

Umesh Patadiya

710
10
33

Thanks for giving a easy understanding solution – Prince Dholakiya Dec 26 '18 at 03:49

NVD3.js: ReferenceError: nv is not defined

6 Answers6

Linked