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

1831 questions
13
votes
3 answers

how to set the domain and scale on an axis on a nvd3.js multiBarChart

In d3.js you can set an x axis to use d3.time.scale() then set x.domain([start_date, end_date]) and it will 'fill in' any missing dates that aren't in the data with 0 values. I want to do the same with a nvd3.js mulitBarChart. This code (can be…
cerberos
  • 6,721
  • 3
  • 37
  • 43
12
votes
2 answers

transitionDuration function does not exist in nvd3.js

I'm learning nvd3.js to draw charts. From a sample from the site, I pick following simple code to test: chart = nv.models.lineChart() .margin({ left: 100, right: 100 }) //Adjust chart margins to give the x-axis some breathing…
mehrandvd
  • 8,250
  • 10
  • 54
  • 102
12
votes
1 answer

D3.js Specific Tick Styling

Is there a way to style a specific tick say if I was using x [0, 100] and y [0,100] and I wanted to just draw or style the tick for (0,50) and (50,0)?
Gthiet
  • 121
  • 1
  • 3
12
votes
5 answers

NVD3.js: Where is the documentation? Need help to configure some functionalities

I'm starting to work with NVD3.js and I'm a little lost about the configurations possible with this tool. I want to configure many items like: Display x axis label for every bar, currently I have only the even ones displaying: I want to configure…
Wellington Zanelli
  • 1,804
  • 2
  • 16
  • 41
12
votes
4 answers

Large black circles overlay scatterChart

I am having a very strange problem - I am using more or less the same code as the scatterplot sample on the nvd3 web site (but hooked into my ember.js app) and I'm seeing a beautiful plot come out only to be marred about 500ms later by a set of…
outside2344
  • 1,959
  • 1
  • 26
  • 50
11
votes
2 answers

NVD3 - line chart NaN on safari using latest versions

using NVD3 as a line chart all of my data is being inserted into one vertical line (as opposed to be across the horizontal) and when I hover the line I get 0NaN repeated. this only happens using safari here is the java: function drawChart(div,…
AlexW
  • 1,989
  • 7
  • 46
  • 110
11
votes
2 answers

Nvd3.js - Adding multiple y-axis to cumulative chart

I need to add multiple y-axis to my cumulative Nvd3 chart, does anyone know what part of the library's code I'll need to modify? Even better would be if you have done this yourself and could provide a Jsfiddle. Any suggestions would be appreciated.
martin
  • 1,682
  • 4
  • 30
  • 63
11
votes
1 answer

Understanding nvd3 x-axis date format

how is the date (x xAxis) formatted as "1025409600000"? I have been studying their documentation but can not figure how this works, it would make my life easier if someone would help me to understand how to change this to a 'normal' date format,…
Sina H
  • 123
  • 1
  • 1
  • 6
11
votes
3 answers

nvd3 discreteBarChart y axis label

I am using the following code to set the label in y-axis for discrete bar chart in nvd3 but it doesn't show the label for y-axis. BTW, x-axis label works fine. chart.yAxis.axisLabel('Students (in %)');
Ramesh
  • 193
  • 1
  • 3
  • 7
10
votes
2 answers

change margins and padding in nvd3 chart

I have the following nvd3 stacked Area Chart: I want to add margin between the numbers/dates and the graph as well as the legend at the top and the graph. (please see the picture, I've marked the positions with a red line: I've been investigating…
baao
  • 62,535
  • 14
  • 113
  • 168
10
votes
3 answers

Plot area in rcharts NVD3 lineChart

I want to plot the distribution of different populations with rCharts' NVD3 lineChart plot using the area=true option like in http://nvd3.org/examples/line.html. Here what I am working…
Jon Nagra
  • 1,361
  • 1
  • 12
  • 31
10
votes
2 answers

custom a tooltipContent of tooltips with datum in discreteBarChart nvd3.js

How I can custom a tooltipContent of tooltips using data loaded into "datum" in discreteBarChart nvd3.js?, for example, with the following data Jason, I want to see data3, data4, Data5 in tooltips JsonData = [ { key:…
Fernando Montoya
  • 251
  • 1
  • 3
  • 12
10
votes
2 answers

Nvd3: How prevent to display chart between -1 and 1 if have all y values 0?

Have a little modified version of linePlusBarChart model(), when pass data that has all y values setted to zero Y axis show me a range between 1 and -1. Is possible to set a range between 0 and 1? Have tried with chart.yAxis.scale().domain([0]);…
byterussian
  • 3,271
  • 5
  • 26
  • 35
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
  • 607
  • 2
  • 11
  • 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
  • 5,370
  • 7
  • 39
  • 80
1 2
3
…
99 100