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

Chart to display data over a long time frame

I'm looking for a chart for displaying my values over a long time period. The problem is due to the timeline most charts are useless because there are to many points in it and I can't zoom in or out. So I'm looking for a chart where I load my…
Kᴀτᴢ
  • 2,146
  • 6
  • 29
  • 57
0
votes
0 answers

How to access toi NVD3 binding data

I'm new using nvd3 and I try to do something but I can't find the right way to do it, I'll try to be clear. I need to make a little change to a nv.models.lineChart. I need to add a button and when I click it, remove a last element from the data and…
YuryDG
  • 425
  • 3
  • 7
0
votes
1 answer

NVD3: Setting the x & y axis values to Line chart for intervals

3 library for graph generation & i am facing problems while setting the X & Y axis for the intervals based upon values. I want to know whether NVD3's java script has inbuilt capabilities to adjust the X axis intervals based upon the number on…
Shaggie
  • 1,799
  • 7
  • 34
  • 63
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,936
  • 7
  • 39
  • 64
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
  • 313
  • 2
  • 10
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
  • 1,211
  • 1
  • 8
  • 14
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,501
  • 5
  • 30
  • 60
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 (https://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,501
  • 5
  • 30
  • 60
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
  • 898
  • 3
  • 18
  • 37
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
  • 8
  • 25
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
  • 6
  • 31
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
  • 63
  • 1
  • 1
  • 7
1 2 3
…
99
100