nvd3

chart visualization

nvd3 is a reusable charting library written in d3.js. It provides a simple yet powerful chart interface that makes data visualization tasks easier.

Latest Ver 1.8.6

Homepage

Github

7,227

📢 Simple and powerful charting library based on d3.js

CDN Download

License: Apache-2.0

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js.map

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css.map

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js.map

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<svg style="width:800px;height:600px;"></svg><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script><script>var data = [{ values: [{x: 1, y: 10}, {x: 2, y: 20}, {x: 3, y: 30}], key: 'Sample Data' }]; nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis.axisLabel('Time').tickFormat(d3.format(',r')); chart.yAxis.axisLabel('Value').tickFormat(d3.format('.02f')); d3.select('svg').datum(data).call(chart); return chart; });</script>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>

⚙️ JavaScript
var data = [{ values: [{x: 1, y: 10}, {x: 2, y: 20}, {x: 3, y: 30}], key: 'Sample Data' }]; nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis.axisLabel('Time').tickFormat(d3.format(',r')); chart.yAxis.axisLabel('Value').tickFormat(d3.format('.02f')); d3.select('svg').datum(data).call(chart); return chart; });