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
13
votes
5 answers

How to do wordwrap for chart labels using d3.js

I am trying to implement the horizontal bar chart using d3.js.Some of the chart labels are too long. How to do word wrap for the chart labels on y aixs? Source code: var data = [{"Name": "Label 1", "Count": "428275" }, { "Name": "Label 2", "Count":…
user2238971
  • 151
  • 1
  • 1
  • 7
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
  • 7,705
  • 5
  • 41
  • 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,806
  • 12
  • 64
  • 111
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
  • 1
  • 3
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
  • 2,075
  • 2
  • 29
  • 52
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
  • 2,843
  • 12
  • 74
  • 156
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,894
  • 4
  • 37
  • 69
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
1 answer

draw only grouped multibar chars using nvd3

I draw a multibarChart using nvd3 library and it 's working very well but it gives me two radio buttons to choose wether i want stacked bars or grouped bars. Can i disable this and make it only show grouped bars? This is the javascript code :…
Amr Kamel
  • 432
  • 6
  • 16
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
11
votes
2 answers

How can I keep tick marks from repeating when I have a small number of dates on an nvd3 chart

The x axis likes to repeat dates when there are a limited number of dates. Please see this fiddle: http://jsfiddle.net/skilesare/bFfJ2/1/ nv.addGraph(function() { var data = fakeActivityByDate(); var chart =…
Austin Fatheree
  • 842
  • 1
  • 7
  • 18
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
  • 71,625
  • 17
  • 143
  • 203
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,538
  • 1
  • 16
  • 36
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,539
  • 6
  • 28
  • 36
1 2
3
…
99 100