whatisgithub

What is nvd3?

novus/nvd3 — explained in plain English

Analysis updated 2026-06-24

7,232JavaScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

A JavaScript charting library built on D3.js v3 that provides ready-to-use interactive chart components, line, bar, pie, scatter, candlestick, and more, with tooltips and legends included out of the box.

Mindmap

mindmap
  root((NVD3))
    What it does
      D3 charting wrapper
      Ready-to-use components
      Interactive by default
    Chart Types
      Line and bar charts
      Pie and donut charts
      Scatter and box plots
      Candlestick charts
      Sunburst charts
    Features
      Tooltips built in
      Legend included
      Reusable components
    Tech Stack
      JavaScript
      D3.js version 3
      CSS
    Limitation
      D3 v3 only
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add an interactive line chart with tooltips to a web page by including two files and writing a few lines of JavaScript.

USE CASE 2

Display financial data as a candlestick chart in a browser-based dashboard.

USE CASE 3

Create a stacked area chart to visualize multiple data series changing over time.

USE CASE 4

Build a hierarchical data visualization using the sunburst chart component.

What is it built with?

JavaScriptD3.jsCSS

How does it compare?

novus/nvd3kazupon/vue-i18nwin12-online/win12
Stars7,2327,2377,226
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasyeasy
Complexity2/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Requires D3.js version 3.x, does not work with D3 v4 or newer, which limits compatibility with modern D3 projects.

So what is it?

NVD3 is a JavaScript charting library built on top of D3.js, a lower-level tool for drawing data-driven graphics in the browser. D3 is powerful but requires considerable effort to produce standard chart types from scratch. NVD3 wraps that complexity into ready-to-use, configurable chart components, so you can drop in a line chart, bar chart, pie chart, or scatter plot with much less code. The chart types available include line charts, bar charts, stacked area charts, pie and donut charts, scatter plots, box plots, candlestick charts for financial data, sunburst charts for hierarchical data, and a force-directed graph layout. Each chart comes with interactive features like tooltips and legends built in. Adding a chart to a page involves including two files (a JavaScript file and a CSS file) and writing a few lines to point the chart at your data. NVD3 was designed around the idea of reusable chart components, following a pattern from D3's own documentation. This means each chart type exposes a consistent set of configuration options rather than requiring you to build chart internals by hand. The documentation and live examples are hosted at the nvd3-community GitHub Pages site. One important compatibility note: NVD3 requires D3 version 3.x and does not support D3 v4 or newer. Since the broader D3 ecosystem has moved on to later versions, this is a meaningful limitation. A separate community fork at the nvd3 GitHub organization tracks D3 v4 support as a work in progress. NVD3 runs on all major browsers including Chrome, Firefox, Safari, and Internet Explorer 10 and above. It works best on WebKit-based browsers according to the README.

Copy-paste prompts

Prompt 1
Show me how to create an interactive line chart with NVD3 using a JSON dataset, with tooltips and a legend.
Prompt 2
How do I create a stacked bar chart with NVD3 that re-renders when the underlying data changes?
Prompt 3
Build a responsive pie chart with NVD3 that highlights slices on hover and shows a legend below.
Prompt 4
I'm using D3 v3, how do I add an NVD3 candlestick chart to display stock price data on a page?
Prompt 5
How do I configure NVD3 chart colors, axis labels, and margins to match my site's design?

Frequently asked questions

What is nvd3?

A JavaScript charting library built on D3.js v3 that provides ready-to-use interactive chart components, line, bar, pie, scatter, candlestick, and more, with tooltips and legends included out of the box.

What language is nvd3 written in?

Mainly JavaScript. The stack also includes JavaScript, D3.js, CSS.

How hard is nvd3 to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is nvd3 for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.