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

Answer 1

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..

Answer 2

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?

Answer 3

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>

Answer 4

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

Answer 5

<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