Stack Overflow
Stack Overflow

Questions tagged [nvd3.js]

NVD3.js is a library of re-usable charts and chart components for D3.js.

NVD3 - A reusable 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.

Usage

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.

Dependencies

NVD3 should work with the latest d3.js version 3.5.3 and later.

Minimum D3 version required: 3.4.4

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+

Related tags

1828 questions
19
votes
7 answers

NVD3 Charts not rendering correctly in hidden tab

I am building a page which contains many charts, which are displayed one at a time depending on which tab you are looking at. The chart in the initially active tab renders correctly. However when I click to another tab, the chart is not rendered…
metaColin
  • 1,973
  • 2
  • 22
  • 37
19
votes
4 answers

How to disable some streams by default in a nvd3 Simple Line Chart?

I have several lines and I know that clicking on the "dot" in the legend will hide/show it. However, I need to start with some of the lines being disabled and not displayed, and the user will have to click on the dot in the legend to show it on the…
xavier
  • 233
  • 2
  • 6
19
votes
1 answer

nvd3 Stacked Bar Chart with discrete values

I am trying to use nvd3 to create a vertical stacked bar chart. I will be using discrete data values, as opposed to randomly generated values as the example on their website. I have tried to play around with the live code example of the Group /…
rhlsthrm
  • 769
  • 1
  • 12
  • 23
19
votes
4 answers

d3.js & nvd3.js axis and label precision formatting

Using the stacked area chart as seen in this example http://nvd3.com/ghpages/stackedArea.html Trying to format the y-axis tick labels and the tooltip labels to be integers instead of floats. Tried changing the follow code from chart.yAxis …
Viet
  • 3,257
  • 3
  • 28
  • 36
18
votes
2 answers

nvd3 line chart with string values on x-axis

i'm new to nvd3 charts. i need a line chart, with string-values on the x-axis the chart should be like this Bar Chart, but i need a line, instead of bars my result looks like this Line Chart The values are all mapped to x=0 my…
tobeController
  • 471
  • 1
  • 4
  • 11
17
votes
3 answers

Angular nvd3 Line Chart automatic resizing

I'm using angular nvd3 directives. according to the exemple :https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives/blob/master/examples/lineChart.with.automatic.resize.html