A reusable charting library written in d3.js


NVD3 - A reusable D3 charting library

Inspired by the work of Mike Bostock's Towards Reusable Charts, and supported by a combined effort of Novus and the NVD3 community.

View Examples | NEW Documentation! | Development build status: Build Status


Simply add the nv.d3 assets to your project and include them in your HTML.

<link href="nv.d3.min.css" rel="stylesheet">
<script src="nv.d3.min.js"></script>
  • nv.d3.js should appear after d3.js is included.
  • Prefer minified assets (.min) for production.


NVD3 is recommended to go with d3.js version 3.5.3 and later, but NOT d3 4.x yet. version 3.5.17 is the most recent d3 v3 release.

Minimum D3 version required: 3.4.4

For a D3v4 Version, see the work in progress at the nvd3 organization

Along with pieChart options padAngle and cornerRadius, the interactive guideline tooltip now requires these later versions of D3 (3.4.4+, specifically, to get interactive tooltips). The interactive guide lines rely on the more recent d3.bisector() method which treats accessors taking two parameters (the second being the element index) as comparators (see d3.bisector()).

Supported Browsers

NVD3 runs best on WebKit based browsers.

  • Google Chrome: latest version
  • Opera 15+ (i.e. webkit version)
  • Safari: latest version
  • Firefox: latest version
  • Internet Explorer: 10+

Do we support D3 v4.x?

No, we do not... we are very interested in taking this on but could use some help. Please let us know if you'd like to help make this a reality! :)


1.8.6 Changes:

  • Community bugfixes

1.8.5 Changes:

  • Community bugfixes
  • New force-directed graph

1.8.4 Changes:

  • Community bugfixes including tooltip fixes.

1.8.3 Changes:

  • Lots of community bugfixes
  • Added force-directed chart

1.8.2 Changes:

  • Lots of community bugfixes and a few extra minor features

1.8.1 Changes:

  • Tooltips were refactored - If you have customized your tooltips, note that you may need to adjust your custom functions as the data passed has changed format. See the new tooltip options for more details.
  • Added boxplot charts | example
  • Added candlestick charts | example
  • Added extra donut chart abilities | examples
  • Added sunburst Charts | example
  • Time Series | example
  • Another legend format available | example
  • Lots of bug fixes (see closed issues)
  • (for all examples, see here)

1.7.1 Changes:

  • Fixed axis.staggerLabels bug.
  • Fixed Karma unit tests.
  • Fixed chart test pages.
  • Merged in nvd3-community changes and development branch.

1.7.0 Changes:

  • Fixes around 20 small bugs.
  • Fixed the notorious slowness of line charts and scatter plots on chrome
  • Combined the scatterChart and scatterChartWithLines models
  • Combined the linePlusBarChart and linePlusBarChartWithFocus models.
  • renamed some of the options (see the new documentation for what options are available for each chart)
  • Completed the migration of the option functions to an object format which allows the generation of the documentation in an automated way. Not everything has a description yet, but check it out!
  • Added extra options to the donut charts based on features that will be in d3 3.5. The donut example page loads the latest d3 from their 3.5 branch so keep that in mind.
  • Added an example of the parallelCoordinates chart.
  • Fixed up the half-done OHLC bar chart, and made an example for it as well.

1.6.0 Changes:

  • includes about a dozen bug fixes and pull requests I fixed and merged in from the issues/pulls from the original project.
  • It also standardized all indention

Current development focus

  • Review outstanding pull requests and issues.
  • Try to find an easy way to actually document usage and all chart options.
  • Improve the testing framework.
  • Setup continuous integration.


Found a bug? Check out the latest from the master branch and make sure it's not already fixed first! If you don't see a related fix, please open an issue.

Optional dependencies

Including Fastdom in your project can greatly increase the performance of the line chart (particularly in Firefox and Internet Explorer) by batching DOM read and write operations to avoid layout thrashing. NVD3 will take advantage of Fastdom if present.


If one of the existing models doesn't meet your needs, fork the project, implement the model and an example using it, send us a pull request, for consideration for inclusion in the project.

If you'd like to contribute consistently, show me what you've got with some good pull requests and you may get added to the nvd3-community org!

A few rules for pull requests

  1. Please commit to the master branch
  2. Do NOT check in anything under the build directory, it clutters up the commit and just gets overwritten later.
  3. All new features must come with unit test coverage
  4. Bug fixes should come with unit tests that prove their fix

If you want to test your changes using the example pages, you'll have to run grunt production to build the items into the build directory. You must do this before your changes show up in the examples, as they link to the build directory in order to properly show off the finished product. Please remember to NOT include the build files in your commit though, only include the source files you changed!

Tips for Testing

  • Unit tests were written in Karma and Mocha. Follow instructions in Building Latest to get npm packages setup. This may not work on Windows machines.
  • Run bower install to get bower dependencies.
  • Run grunt to start the unit tests.
  • Also visually inspect the HTML pages in the examples/ and test/ folders. Make sure there are no glaring errors.
  • Novus now uses Travis CI for continuous integration. Visit our travis build page to see the latest status.

Meteor Tinytests

  • Any Meteor-specific features can be tested from the command line using tinytest and Spacejam
  • spacejam can be installed by running npm install -g spacejam.
  • Tinytests can then be executed by running spacejam test-packages ./ from this project's root.

Building latest

  1. First clone the repository and checkout the master branch
  2. make sure nodejs is installed via your system's package manager.
  3. Install grunt, grunt-cli, and bower: npm install -g grunt grunt-cli bower

have node download nvd3's required modules with: npm install

build with: grunt production

You should now have a build directory with the js and css files within.

  • Refactor tooltips for great good

    Refactor tooltips for great good

    Trying this again

    This is the massive refactor of the tooltips. This all started due to us needing to keep track of the tooltip dom element, but all the charts were still using a single function which made it hard to track, so I converted them all to using the tooltip object that the interactive guideline uses.

    A few things to note:

    1. This might break anyone using a customized tooltip, because I changed the data format to be more generic in many cases (needed extra info that it wasn't giving and then tried to make that consistent).
    2. best I can tell, stackedArea tooltips were already broken, so I fixed those.
    3. The tooltip object is put onto the chart object, so you can easily modify your tooltips like you do the axis or legend.
    4. I deprecated the "tooltips" and "tooltipContent" options on the charts themselves.

    I'm sorry I didn't add tests around this, but I burnt myself out a little bit so I'm kind of sick of tooltips :/

    I know it's a lot of changes, so feel free to just try it out and test it yourself along with the code review... get the "fix_tooltips" branch from my personal repo and build it.

    opened by liquidpele 57
  • Tooltips: nvtooltip-pending-removal div is not removed on multiBarChart

    Tooltips: nvtooltip-pending-removal div is not removed on multiBarChart

    On the development branch, when I open the file examples/multiBarChart.html, I mouse over the chart and I see the following:

    screen shot 2015-02-10 at 3 24 23 pm

    When I inspect the DOM, there are lots of divs with 'nvtooltip-pending-removal' classed to them.

    opened by robinfhu 57
  • Discussion of making build 1.8.0

    Discussion of making build 1.8.0

    @robinfhu @portante @joshjordan

    Before we start merging in any more features/etc, I think this may be a good time to cut 1.8.x out, which has several fixes and the new tooltip code. Thoughts?

    opened by liquidpele 35
  • d3.time.scale compatibility

    d3.time.scale compatibility

    It seems to me that d3.time.scale cannot be used with nvd3.

    For example, this seems like it should work to me, but it doesn't:


    It seems to ignore the tickFormat (add possibly the tickValues) completely.

    The reason I want to use d3.time.scale is because it seems to have good handling of automatic time ticks (https://github.com/mbostock/d3/wiki/Time-Scales#wiki-ticks). Specifically, it looks like it automatically aligns tick marks to human friendly intervals:

    1-, 5-, 15- and 30-second.
    1-, 5-, 15- and 30-minute.
    1-, 3-, 6- and 12-hour.
    1- and 2-day.
    1- and 3-month.

    Is there any way to get nvd3 working with d3 time scales? Is there something I'm missing? I'm happy to help out if someone can point me in the right direction.

    opened by ninjudd 34
  • Version 1.8.1 breaks i Meteor.js when using nvd3:nvd3 package.

    Version 1.8.1 breaks i Meteor.js when using nvd3:nvd3 package.

    I did a "meteor update" and got v1.8.1 of the nvd3:nvd3 package. My application broke, and it turns out the global nv variable is === undefined. I reverted to 1.7.1 and everything works again.

    opened by JesperWe 26
  • Problem with some charts and ShadowDOM

    Problem with some charts and ShadowDOM

    @liquidpele after your tooltip pull request, the line, cumulativeLine and stackedArea charts started to work perfectly under Shadow DOM (at least with the tooltips).

    The problem is, with all other charts, the tooltips just stopped to appear. The code of my project that adds ShadowDOM to nvd3 is here: https://github.com/RenatoUtsch/polynvd3/tree/development

    Two links for examples of the bug: StackedArea (working perfectly): http://renatoutsch.com.br/bower_components/polynvd3/nvd3-stacked-area-chart/demo.html Scatter (broken): http://renatoutsch.com.br/bower_components/polynvd3/nvd3-scatter-chart/demo.html

    Other examples can be found here (currently only the bullet chart should be broken): http://renatoutsch.com.br/bower_components/polynvd3/

    What did you do differently with the other charts that with those three that are working you didn't? All I know is that they have interactive guideline while the others don't.

    opened by RenatoUtsch 26
  • More problems with Shadow DOM and tooltips

    More problems with Shadow DOM and tooltips


    So, today I went and started to test the tooltips again, but a change yesterday must have broken something, because now if I create multiple charts only the tooltip of the first chart gets positioned right. All the other tooltips appear at wrong positions or at the bottom of the screen.

    Also, I noticed another problem: The tooltips stopped showing the information of some charts that are built correctly and used to have correct values on the tooltips. Now only NaN appears.

    For example, in my repo in nvd3-scatter-chart/demo.json, the 2nd chart that does NOT set the size of the circles shows only NAN in the tooltips. The first pie chart example also shows NAN but I don't know why, but it used to work correctly. The 2nd discrete bar chart example also.

    Maybe the tooltips are getting the wrong data?

    opened by RenatoUtsch 24
  • nvd3 community version

    nvd3 community version

    I'm new with nvd3 and I'm seeing that there are several pull requests from long time ago and still have not been merged (some bugs or leaks) and project owners don't have all the desired time to maintain the master branch, merging the PR and so on. We could help them with the maintainability and create a "nvd3-community" project/branch integrating all the fixes and interesting features that are already submitted as a PR. What do you think?

    opened by raulgomis 24
  • Chatroom?


    Is there an IRC or Gitter room for this project? Having a venue for bouncing ideas around would be helpful that is less formal/obtrusive than the issue tracker would be nice.

    An example low-impact issue: would it be good to store availableHeight in the height var if height goes unset in discreteBarChart.js? I am writing a transition to reorder and resize the bars of that chart, and I am having to calculate rect height as availableHeight - y(d.value); having the height the plot field would be helpful here. Alternatively, if there is a better way to do this, a chatroom might be a better way of discovering it.

    opened by bwarren2 22
  • Enhancement #770 - MultiBarWithFocusChart feature in multibarChart model...

    Enhancement #770 - MultiBarWithFocusChart feature in multibarChart model...

    Just one small in my local example, need to call chart.update() in callback after chart is rendered to make context area visible. Though this is not reproducible in the examples in the code.

    Enhancement Request Pending 
    opened by vishal1shukla2 22
  • Tooltip Ghosting issue (introduced in development branch)

    Tooltip Ghosting issue (introduced in development branch)

    An issue must have been introduced when all the tooltip code was changed in: https://github.com/novus/nvd3/commit/5cba3b425c5c

    See my screenshot video: line chart tooltip bug

    If you move the mouse kind of fast, it introduces a 'ghost' tooltip that briefly shows up and goes away. This is happening in the latest Chrome and using nvd3 development.

    @liquidpele I'd like to assign this to Drew Peterson, does he have a github account?

    opened by robinfhu 21
  • Scatter chart point colors

    Scatter chart point colors

    Prior to version 1.8 in the scatter schart, custom colors per point was wokring, by defining color property of a point. In release 1.8.6 this feature isn't working any more. Here is to illustrate what I'm looking for (works with v. 1.6): https://jsfiddle.net/zh1x34tc/ - one serie and different color for each point.

    opened by vesko-k 0
  • Chart legend issue

    Chart legend issue

    I need to add a scroll to chart legend area. is there a way to do this. ? when the legend count is high it will reduce the size of the chart. i need to avoid it.

    opened by lahiru-wa 0
  • Y axes are weird with different x-axis values

    Y axes are weird with different x-axis values

    const tickValues = val.series[0].values.map((o,i)=>o.x/1000);  // something like["0.10","0.20"] etc.
                nv.addGraph(() => {
                    var height = 300;
                    var chart = nv.models.multiChart().legendRightAxisHint("").useInteractiveGuideline(true).showLegend(false).height(height);
                    chart.xAxis.axisLabel('Date').tickValues(tickValues).tickFormat(function(d) {
                        return d3.time.format('%x')(new Date(d))
                    //              chart.yAxis2.tickFormat(d3.format('.02f'));
                    this.chartRef = chart


    opened by kaankilic 0
  • NVD3 Line Chart Zoom Points Position

    NVD3 Line Chart Zoom Points Position

    When zooming the position of the points is wrong. I found the useInteractiveGuideline set to true, if is set to false everything is working fine.

    Kapture 2021-01-05 at 15 35 42

    Also, the official example doesn't work properly (https://github.com/novus/nvd3/blob/master/examples/lineChart.html) Kapture 2021-01-06 at 11 36 42

    I found this commit, by changing back these changes everything works fine https://github.com/novus/nvd3/pull/2054

    opened by maloun96 0
  • nvd3 zoom feature

    nvd3 zoom feature

    Hello There, I have created a graph using nvd3 but now I want to add zoom feature but zoom feature not work perfectly details given below:

    jsfiddle link for zoom feature http://jsfiddle.net/guerler/cqNkB/

    currently I am using addZoom function from jsfiddle but in my chart parameter are xAxis(date) and yAxis (number). When I try with number and date, its zoomed only with number

    // add zoom handler
    function addZoom(options) {
     // scaleExtent
        var scaleExtent = 10;
        // parameters
        var yAxis       = options.yAxis;
        var xAxis       = options.xAxis;
        var xDomain     = options.xDomain || xAxis.scale().domain;
        var yDomain     = options.yDomain || yAxis.scale().domain;
        var redraw      = options.redraw;
        var svg         = options.svg;
        var discrete    = options.discrete;
        // scales
        var xScale = xAxis.scale();
        var yScale = yAxis.scale();
        // min/max boundaries
        var x_boundary = xScale.domain().slice();
        var y_boundary = yScale.domain().slice();
        // create d3 zoom handler
        var d3zoom = d3.behavior.zoom();
        // ensure nice axis
        // fix domain
        function fixDomain(domain, boundary) {
            if (discrete) {
                domain[0] = parseInt(domain[0]);
                domain[1] = parseInt(domain[1]);
            domain[0] = Math.min(Math.max(domain[0], boundary[0]), boundary[1] - boundary[1]/scaleExtent);
            domain[1] = Math.max(boundary[0] + boundary[1]/scaleExtent, Math.min(domain[1], boundary[1]));
            return domain;
        // zoom event handler
        function zoomed() {
            yDomain(fixDomain(yScale.domain(), y_boundary));
            xDomain(fixDomain(xScale.domain(), x_boundary));
        // zoom event handler
        function unzoomed() {
        // initialize wrapper
              .scaleExtent([1, scaleExtent])
              .on('zoom', zoomed);
        // add handler
        d3.select('#chart').call(d3zoom).on('dblclick.zoom', unzoomed);
            // add zoom
                xAxis  : chart.xAxis,
                yAxis  : chart.yAxis,
                yDomain: chart.yDomain,
                xDomain: chart.xDomain,
                redraw : function() { chart.update() },
                svg    : svg

    here in my chart image nvd3-bar_charts

    opened by sandeep-staple 0
  • v1.8.6(Aug 24, 2017)

  • v1.8.5(Dec 1, 2016)

  • v1.8.4(Jul 14, 2016)

  • v1.8.2(Jan 24, 2016)

  • v1.8.1(Jul 15, 2015)

    Tooltips were refactored - If you have customized your tooltips, note that you may need to adjust your custom functions as the data passed has changed format. See the new tooltip options for more details. Added boxplot charts | example Added candlestick charts | example Added extra donut chart abilities | examples Added sunburst Charts | example Time Series | example Another legend format available | example Lots of bug fixes (see closed issues)

    Source code(tar.gz)
    Source code(zip)
  • v1.7.1(Feb 6, 2015)

    nvd3-community/master was merged into novus/nvd3 master.

    Also made the following fixes:

    • Fixed axis.staggerLabels bug.
    • Fixed Karma unit tests.
    • Fixed chart test pages.
    • Merged in nvd3-community changes and development branch.

    Something to note: NVD3 should work with the latest d3.js (version 3.5), but I did notice that the interactive guideline tooltip was broken for d3.js 3.5. Changing it to d3.js 3.3.13 fixes it. This will need to be investigated.

    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Feb 3, 2015)

    • The following charts are no longer being actively supported in NVD3:
      • indentedTree
      • horizon
      • linePlusBar, linePlusBarWithFocus, lineWithFishEye, lineWithFocus
      • multiChart
      • ohlcBar
      • parallelCoordinates
    • We will keep these charts in the library, but won't continue updating them. Pull requests for them will be ignored.
    • nv.utils.optionsFunc has been deprecated. Will be removed on next release. It not really a 'd3' way of handling chart settings, and it also introduced compatibility issues with Internet Explorer and PhantomJS.
    • transitionDuration has been deprecated. It will be removed on next release. On supported charts, it has been replaced with 'duration'.
    • pie.description is no longer a valid option.
    • 'renderWatch' functionality added to supported charts.
      • What is 'renderWatch'? Basically, it's a dispatch fired from the chart when all its components are done transitioning. This feature is useful for printing charts in headless browsers, like PhantomJS. See an example of it being used in examples/lineChart.html.
    • Basic unit tests added. They are in the test/mocha folder.
    • Removed d3.v2.js from the lib/ folder.
    • Removed everything from the deprecated/ folder. If you need something from it, checkout an older version.
    Source code(tar.gz)
    Source code(zip)
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jared Wilber 6.4k Jan 4, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
:dango: An interactive and responsive charting library

English | 简体中文 G2Plot A charting library based on the Grammar of Graphics. G2Plot is an interactive and responsive charting library. Based on the gram

AntV team 2.3k Dec 30, 2022
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Simple yet powerful JavaScript Charting library built using d3.js

uvCharts Simple, robust, extensible JavaScript charting library built using d3 designed to help developers embed, build charts in less than couple of

Imaginea 267 May 20, 2021
📱📈An elegant, interactive and flexible charting library for mobile.

中文 README F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex an

AntV team 7.8k Dec 31, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023
Open-source JavaScript charting library behind Plotly and Dash

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosyste

Plotly 15.3k Jan 4, 2023
Liquify charting library

Liquify Liquify: fast, multi-threaded visualization of stream data with ChartJS & Angular. The aim of Liquify is to provide a fast, customizable and e

null 4 Aug 23, 2022
React components for Chart.js, the most popular charting library

react-chartjs-2 React components for Chart.js, the most popular charting library. Supports Chart.js v3 and v2. Quickstart • Docs • Slack • Stack Overf

null 5.6k Jan 4, 2023
📱📈An elegant, interactive and flexible charting library for mobile.

F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。英文 README 在此衷心感谢《The Grammar of Graphics》的作者

AntV team 7.8k Dec 27, 2022
An easy-to-use cross-framework JS charting library

Compact Chart Visualize your data under a minute, in any Javascript framework Table of Contents About How to use it Examples Demo Plain HTML Example w

Mireo 1 Jul 28, 2021
A server-side-rendered charting library for Fresh

fresh_charts A server side rendered charting library for Fresh based on Chart.js. Usage There are two main ways to render a chart. There is the JSX/TS

Deno 57 Jan 2, 2023
A friendly reusable charts DSL for D3

D4 D4 is a friendly charting DSL for D3. The goal of D4 is to allow developers to quickly build data-driven charts with little knowledge of the intern

Mark Daggett 429 Dec 5, 2022
A framework for building reusable components with d3.js

Koto A framework for creating reusable charts with D3.js, written in ES6. Introduction KotoJS is HEAVILY inspired by another reusable charting framewo

KotoJS 280 Dec 23, 2022
Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Cornerstone Systems 702 Jan 3, 2023
Highcharts JS, the JavaScript charting framework

Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers. Official website: www.highcharts.com D

Highsoft 10.9k Jan 9, 2023
Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js

dc.js Dimensional charting built to work natively with crossfilter rendered using d3.js. In dc.js, each chart displays an aggregation of some attribut

null 7.4k Jan 4, 2023
:bar_chart: Declarative Charting Framework for Angular

ngx-charts Declarative Charting Framework for Angular! ngx-charts is unique because we don't merely wrap d3, nor any other chart engine for that matte

Swimlane 4.2k Dec 27, 2022