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

nvd3 line chart - set the color of the line by Y value

I am using nvd3 line chart and I would like that points under certain y value (let's say y=4) will be red, and above that they will be their nvd3 color (orange, etc..) How can I achieve this kind of effect?
Yosi
  • 2,676
  • 5
  • 35
  • 60
0
votes
1 answer

nvD3 : want to Create a DualAxisBarChart using NVD3

I want to create a DualAxisBarchart but kind of stuck. Tried many way but actually am able to create Two yAxis but instead to create two separate bar its creating two bar at the same place please suggest me some approach am creating this using…
Vikas Kumar
  • 11
  • 5
0
votes
1 answer

JSON data from query() MEAN

I have JSON that looks like the below: values: [[1,0],[2,0],[3,0],[4,0],[5,0],[6,0],[7,0],[8,0]] I query for this in my MEANJS app from the controller $scope.find = function() { $scope.transByusers = TransByusers.query(); Yet, when I…
user3775929
  • 1
0
votes
1 answer

Howto set custom ticks and labels on Y axis in nvd3

I'd like to set custom tick number and labels for my discrete chart done in nvd3. The problem is that labels and values needs to be shown in ratios like 10:1, 8:1 etc. but actual bar height shown as numbers 10, 8 etc. Is there any way to create…
ramses
  • 213
  • 2
  • 9
0
votes
0 answers

nvd3 multiple charts sharing the same data

I am trying to build 2 vertical charts sharing the same data. So I created a refreshPrimary(top) and refreshStackedArea(bottom) that can be called to refresh the graphs depending on options the user selects. The problem I am having it that when…
frankr6591
  • 985
  • 6
  • 12
0
votes
1 answer

is it possible to color groups differently

I am planning to have different colors for each element in the .I was just exploring if this is possible. My code: var svg = d3.select("#graphid").append("svg") .style("margin-left","30px") //.style("background-color","lavender") …
krishna_v
  • 1,451
  • 5
  • 25
  • 59
0
votes
1 answer

formatting nvd3.js colors and interactiveGuideLine

I've gotten lost amongst the d3.js weeds. I'm putting together a chart using nvd3.js (http://i.stack.imgur.com/ghueS.png). But, while the colors appear correct in the legend, they do not in the chart. Additionally, there is significant white space…
Darius
  • 13
  • 6
0
votes
1 answer

error in display of color of line and style

I am trying to create a chart based on context-focus brushing with x-axis in minutes displayed. So when i brush on the context the corresponding chart gets displayed on the focus area for the selection. However i find some issues in the…
krishna_v
  • 1,451
  • 5
  • 25
  • 59
0
votes
1 answer

Multiple nvd3 graphs and select issue

I have multiple nvd3 pie charts in the same page. Now when I try to position them,individually using this code below d3.select(".nv-pieWrap") .attr("transform", "translate(0,-35)"); Only the first graph in the page gets repositioned. It is…
Arun Mohan
  • 704
  • 1
  • 14
  • 34
0
votes
1 answer

D3.js not parsing the JSON string

I am not able to parse the JSON string in D3.js if I keep it. If I mention any JSON file name I am able to display the graph. CODE d3.json("mperday.json",function(json){ //graph displayed now }); var myjson = "[ [ { "time":…
Karthik
  • 470
  • 7
  • 20
0
votes
0 answers

Reload nvd3 chart after get ajax data

I use nvd3 to draw bar chart with data get from ajax request. When I click on button it will do the ajax request and send new data for the chart. The request works fine and i get the data correctly from ajax, the only problem is that the chart…
usertfwr
  • 309
  • 1
  • 5
  • 27
0
votes
0 answers

How to use primefaces and nvd3 together

I'd like to use the nvd3.js charts in my jsf+primefaces application. I find this link that uses the primefaces renderer. Any other possible solutions to integrate a javascript api with primefaces?
Chouch
  • 53
  • 1
  • 1
  • 7
0
votes
1 answer

How do I gray out D3 elements based on form input?

I am working on a dynamic scatter plot using D3. (Current draft) I would like to include a form at the bottom of the page that hides or grays out some of the circles depending on the form. The form will have checkboxes and sliders. This question…
mac389
  • 2,578
  • 4
  • 30
  • 53
0
votes
1 answer

Shiny and rCharts: I don't get it to work

I somehow don't get it to work. Nothing is displayed, but no error is shown. This is from my UI, so all libraries are loaded: tags$head( tags$link(rel = "stylesheet", type = "text/css", href = "style_mozilla_win.css"), …
MichiZH
  • 4,985
  • 11
  • 37
  • 78
0
votes
0 answers

Wrapping Long Labels in Horizontal Multi-Bar Chart in nvd3

I want to implement wrapping long labels like http://bl.ocks.org/mbostock/7555321 in NVD3 Horizontal Multi-Bar Chart http://nvd3.org/examples/multiBarHorizontal.html I tried to do it by adding some line break by
or \n in label text like…
Vivek
  • 653
  • 2
  • 12
  • 39
1 2 3
…
99
100