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

Tooltip Issue with Nvd3 LinePlusBar Chart

Right now i am able to form the Json data and got the lables alligned perfectly on 3 axes(X,y1,y2). The problem i am facing in this chart is the tooltip. I am getting the x axis labelled correctly from the row grouping of my matrix report. So on…
sravan
  • 3
  • 4
0
votes
0 answers

Horizontal aligning of nvd3 legends

I have an nvd3 pie chart like the one given below: As you can see,the legends are automatically aligned vertically. If the numerical values doesnt reach higher numbers the legends would be placed horizontally. What I need is to place all the…
Arun Mohan
  • 898
  • 3
  • 18
  • 37
0
votes
1 answer

d3 selectall on click is not working

In the following code I am drawing a line chart and added filter to draw circles for only certain coordinates depending on the condition. What I want to do is if user clicks on those circles they should be able to see alert message with data…
user21
  • 64
  • 1
  • 12
0
votes
1 answer

How to draw donut chart with Django-nvd3

I am using django-nvd3 as a visualization library,they offer a limited number of supported charts. Is there any way to customize the PieChart offered in the doc,to be a donut chart. def statistics(request): context=RequestContext(request) xdata =…
TheGreenGoblen
  • 108
  • 1
  • 11
0
votes
1 answer

NVD3 multichart: Error with Lines if x is a date

I use nvd3 multichart. I have 2 lines and 1 bar chart. The problem is if I put x equal number everything works fine but in my case x needs to be a date. When I put the date the bar chart show well but not the lines. Here is my code: var testdata…
usertfwr
  • 309
  • 1
  • 6
  • 31
0
votes
1 answer

Reset Button for NVD3 Parallel Coordinate Plot

I'm trying to add a reset button for my NVD3 parallel coordinate plot, so that the plot reverts to how it first appears when the page loads. Unfortunately the solutions I've found so far in various similar examples are unsuccessful. Any…
Mike
  • 1,814
  • 4
  • 22
  • 36
0
votes
1 answer

How to highlight only certain coordinates in NVD3 line graph?

Can somebody tell me how to highlight only certain coordinates in a NVD3 line graph depending upon some condition like if x axis value is above 100,highlight that coordinate. please see the image at :https://i.stack.imgur.com/AHJaK.jpg This…
user21
  • 64
  • 1
  • 12
0
votes
1 answer

RealTime chart using nvd3 says NoData Available

I am getting the realtime data using socket.io and binding the data using angularjs. The data gets displayed sometimes, otherwise it displays an error saying No Data available. Here is the HTML:
…
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
0
votes
1 answer

How to add images to the tooltip NVD3 in r

I have a dataframe that I have managed to create a great chart from and I'm pretty pleased with the result. However, I would like to add a specific image that is relevant to a point when the user hovers over it. As this is all done on one computer I…
Sebastian Zeki
  • 6,690
  • 11
  • 60
  • 125
0
votes
1 answer

Nv-d3 Data format incompatibility

I am building up a web using Django in the server an Nvd3 as the chart drawer. For retrieving the data I have a special method in the "models" which get´s the data from the attribute searched and returns an int. This is the way I have been…
XcodeX
  • 79
  • 10
0
votes
1 answer

how to frame data in a Matrixreport for nvd3 line plus Barchart using salesforce analaytics api

I am new to NVD3. And i am trying to get the data from Matrix report in sales-force and display that data in Line plus bar chart. seems like i am getting the chart with no data . On hover tool tip at a particular place it is displaying NAN. So i…
sravan
  • 3
  • 4
0
votes
0 answers

How to customize color in multiBarAndStack chart of NVD3

I want to change the default color of multiBarAndStack. i try to use this code but there is no change please someone help me, this is the code that i used: d3.selectAll("nv-bar positive") .style("fill", function(d, i){ return d.y…
Kais Dkhili
  • 399
  • 1
  • 5
  • 18
0
votes
2 answers

how to make xAxis hourly ticks(like 0,1,2,...,23) in StackedAreChart use nvd3.js?

I want to display the web traffics with StackedAreChart use nvd3.js. I need to show a tick per hour on X axis:00:00 01:00 02:00 ... 24:00. How do I do that? reference the StackedAreaChart in this page nv.addGraph(function() { var chart…
tao4yu
  • 316
  • 1
  • 5
  • 16
0
votes
0 answers

Access x value on axis d3 stacked bar chart

1. I think this is a simple question but I'm not getting it. I have the following code for the x-axis of my Stacked bar chart, and I'm trying to access the x-value when the corresponding stacked bar is clicked. I've tried selecting xAxis, x,…
munees
  • 1
  • 1
0
votes
1 answer

d3.js + nvd3 parallel coordinate draggable axes

So I'm playing around with d3.js and nvd3. I am trying to use nvd3 and d3 to make a parallel coordinate plot where it is possible to drag/reorder the different axes. I can make draggable axes using only d3, but, if possible, I'd like to use nvd3 to…
Rhanox
  • 1
  • 3
1 2 3
…
99 100