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
7
votes
1 answer

How to export angularjs-nvd3 chart to a file

I would like to use nvd3 chart library in my AngularJS app by using angularjs-nvd3-directives Is there a way to export any given nvd3 chart to any of the graphics file formats?
Eugene Goldberg
  • 14,286
  • 20
  • 94
  • 167
7
votes
1 answer

d3.js nvd3 date on x axis: only some dates are show

I have a strange issue with showing dates on a xAxis. I am generating data like this: for (i=0;i<12;i++){ date=new Date(2013,i,1); ideas.values[i] = {"y" : Math.round(2*i*getRandom(1,2)), "x": date}; } In my lineChart I want to create the…
tobib_
  • 123
  • 1
  • 2
  • 7
7
votes
1 answer

Stacked Area Chart in nvd3js - X Axis overflow

I am trying to implement a 'Stacked Area Chart' with d3js and nvd3.js similar to this example. Additionally, I'd like to use a context brush like this one to select a date range, which effects the Stacked Area Chart. Actually, this is already…
caiuspb
  • 974
  • 1
  • 9
  • 23
7
votes
1 answer

nvd3 scatterPlot with rCharts in R: Vary size of points?

I've been playing with rCharts and nvd3 for a bit of time now. Now I'm in a situation where I need a bubble chart, or at least a scatterplot where the size of the dots is dependent on a variable in the data. From this example, it seems possible. The…
dynamo
  • 2,988
  • 5
  • 27
  • 35
7
votes
3 answers

NVD3 - removing options for stackedAreaChart

I'm using the stacked area chart in NVD3, but I don't want it to show the three options for Stacked, Stream, and Expanded. Is there a flag I can pass to remove the UI element to switch between them and pick which one to use?
Leopd
  • 41,333
  • 31
  • 129
  • 167
7
votes
1 answer

adjusting axis labels NVD3 graph in rCharts

I am using the rCharts nPlot() function to display stacked or grouped bar charts given contingency table type data. The "multiBarChart" is displayed in a shiny application. A piece of the code that I use in my shiny application is given below. …
Chris
  • 3,401
  • 5
  • 33
  • 42
7
votes
2 answers

Discrete Bar Chart colors nvd3.js

I am using nvd3.js discrete bar http://nvd3.org/ghpages/discreteBar.html I am inspecting the code and seen that the color is been derived inline style="fill: #ffbb78; stroke: #ffbb78;" I also track on the discreteBarChart function color =…
Petran
  • 7,677
  • 22
  • 65
  • 104
7
votes
4 answers

NVD3 force specific width of bar in bar chart

I am trying to get a specific width value set on a nvd3 discrete bar chart. I can change the rect elements after the initial render, but it seems like there would be some way to designate a bar width in the set-up of the chart. Here is my current…
nanno
  • 81
  • 1
  • 1
  • 3
7
votes
2 answers

d3.js - show large numbers on axis in abbreviated form

Is there a way to abbreviate large numbers on a d3.js axis? I recall seeing a helper method online but cannot find it again. I would like to abbreviate large numbers to reduce my chart margins and make it easier to read. i.e. 1,000,000 = 1M etc If…
paligap
  • 942
  • 1
  • 12
  • 28
7
votes
3 answers

NVD3 - Showing empty chart instead of noData message

Is there a way to show an empty chart instead of the "No Data Available" message when there is no data to show? http://jsfiddle.net/sammla/pYWkD/2/ data2 = [ { "key" : "A key" , "values" : [] } ]; Thanks!
martinpaulucci
  • 2,322
  • 5
  • 24
  • 28
7
votes
3 answers

How to add a title for a NVD3.js graph

I want to add a title text over the graph in NVD3.js. I tried the following, nv.addGraph(function() { var chart = nv.models.linePlusBarWithFocusChart() .margin({top: 30, right: 60, bottom: 50, left: 70}) .x(function(d,i) { return i }) …
Gnik
  • 7,120
  • 20
  • 79
  • 129
7
votes
1 answer

How to draw logarithmic line charts with nvd3

Is there a way to draw logarithmic line charts with nvd3
Andreas Köberle
  • 106,652
  • 57
  • 273
  • 297
7
votes
1 answer

How to use nvd3 examples on local machine

I wanted to use nvd3 examples that are live on their website: http://nvd3.org/livecode/#codemirrorNav What should I do? The example link has multiple tabs, should I copy paste and save all those codes in one folder and open it an index.html ?
Bohn
  • 26,091
  • 61
  • 167
  • 254
7
votes
3 answers

line + scatter chart in nvd3

Is it possible combine a line + scatter chart in nvd3.js without building a new model like is done with linePlusBarChart in the examples and code? Or is this the only way that you can combine chart types?
outside2344
  • 2,075
  • 2
  • 29
  • 52
7
votes
2 answers

Grouped and stacked multiBarChart with NVD3

Possible duplicate question to Bar chart in Javascript: stacked bars + grouped bars I'm trying to create a stacked bar chart that lets you compare 2 values (dark and mid blue) to last week's data points (the secondary light blues…
Gon Zifroni
  • 213
  • 5
  • 12
1 2 3
…
99 100