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
10
votes
7 answers

Calling angularjs scope function from href

I am using a library which appends a href element onto an tag. On this link I need to make a call to an angularjs function that is within scope. Something like... Note: I am attaching this href via javascript…
user1200387
  • 625
  • 2
  • 13
  • 22
10
votes
1 answer

crossfilter, d3.brush and nvd3 integration

I've looked at the crossfilter homepage And really like what's going on. But I don't want to hand write all my graphs if I don't need to. I've already looked in dc.js which is quite nice and gives you built in crossfilter integration and…
lostdorje
  • 6,150
  • 9
  • 44
  • 86
10
votes
2 answers

Set 'focus' area in nvd3.js lineWithFocusChart

I'm usuing the lineWithFocusChart.js model shown in the nvd3 examples shown here: http://nvd3.org/ghpages/examples.html I want to be able to choose a specific x range for the graph to be focused on at load. I thought there would be a variable in…
Chanka
  • 103
  • 1
  • 6
10
votes
1 answer

How can I get numeric values instead of Logarthmic values in D3 axis scale?

I tried the following code, d3.scale.log().domain([1,4]).range([h, 0]); In the axis I'm getting values as 1e+0, 2e+0, 3e+0, 4e+0 in the axis value. But I need the lograthmic values such as 10, 100, 1000, 10000 ..etc....
Gnik
  • 7,120
  • 20
  • 79
  • 129
10
votes
2 answers

javascript charting - nvd3 line chart with two Y-axis

Can anyone please suggest me a way to assign two Y-axis to a nvd3 line chart ?
AllTooSir
  • 48,828
  • 16
  • 130
  • 164
10
votes
3 answers

NVD3 line chart with realtime data

I have a really simple line chart written using NVD3.js. I've written a simple redraw based on timer, pulled from examples I've seen, but I get the error Uncaught TypeError: Cannot read property 'y' of undefined The JS is var data = [{ …
Jaimal Chohan
  • 8,530
  • 6
  • 43
  • 64
10
votes
1 answer

Add Unique Links to all d3.js Data Points in Graph

I'm using nvd3.js to create a line graph that displays ratings that I have calculated over time. I have more information for each individual data point (rating) and would like to have each data point on the graph link to a unique page with more…
Scott Bartell
  • 2,801
  • 3
  • 24
  • 36
9
votes
0 answers

angular-nvd3 how to show data values for line chart

I want to create a LINE chart using angular-nvd3, with each data point has label on top and displaying the data value. I was able to find the option "showValues" and it can work for the discreteBarChart, but that options doesn't seem to work for…
WABBIT0111
  • 2,233
  • 2
  • 18
  • 30
9
votes
1 answer

NVD3 Multiple Axis Barchart Overlapping Bars on Drawing

Drawing a Multiple Axis barchart using nvd3. My problem is the bars are overlapping. In the chart on y-axis is on left side and the other y-axis on right side.
Ranjith Siji
  • 1,125
  • 3
  • 12
  • 19
9
votes
1 answer

Rcharts nvd3 2-D zoom possible?

Is there a zooming function in nvd3 that I can directly type in my R source code (doesn't matter if it requires javascript as long as I don't have to change nvd3 source code)? I tried the lineWithFocusChart, but that only zooms along the x-axis,…
johnny838
  • 922
  • 7
  • 15
9
votes
3 answers

nvd3.js tooltip position with multiple charts

I'm usinging v1.7.1 of nvd3. I have a page in which I render rows of charts with the same configuration but different data. I'm using interactive tooltip option on the multi line chart. The tooltip is rendering correctly, but as you scroll down…
Rebecca Peltz
  • 177
  • 1
  • 7
9
votes
3 answers

d3.js Error : Invalid value for attribute transform="translate(NaN,5)"

I am using nvd3.js along with angularjs, here is the code.
vipin
  • 670
  • 2
  • 9
  • 25
9
votes
2 answers

NVD3 Charts Remove 0 Value Bars

For the NVD3 multiBarChart, how can you remove zero-value bars? I've tried setting the y-value to null, but they won't go away. I unfortunately don't have enough reputation to post an image, so here's ascii showing the issue. There are two stacked…
jperezov
  • 3,041
  • 1
  • 20
  • 36
9
votes
4 answers

nvd3 line chart, how to remove gridlines and yaxis

I have made a line chart with view finder. Here is my initial code var chart = nv.models.lineWithFocusChart(); // chart.transitionDuration(500); chart.xAxis .tickFormat(d3.format(',g')); chart.xAxis .axisLabel("Date"); …
user3171919
  • 99
  • 1
  • 1
  • 7
9
votes
1 answer

NVD3 Set Expanded as default

In NVD3 you can have charts such as the one at : http://nvd3.org/ghpages/stackedArea.html The default view when you open it up is 'Stacked'. Is it possible to have the default view set as 'Expanded'?
Tarang
  • 75,157
  • 39
  • 215
  • 276
1 2 3
…
99 100