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

Data on x-axis is one day off (data for May 24 is showing up as May 23, etc etc) (d3, nvd3)

Here's a pen: http://codepen.io/cheapsteak/pen/MaYaNR I'm loading the data via d3.select('#chart svg').datum(data) The data is fetched from NPM's download stats API, and after transformation, ends up being in the format of { key: String values:…
CheapSteaks
  • 4,821
  • 3
  • 31
  • 48
0
votes
1 answer

nv.d3 code time formatting issues

window.onload = function() { var par = null ; var recieved = null; var Time = [1,2,3]; //var Time = ['1:00', '2:00', '2:30']; var Sale = [200,150,300]; var data; var ThroughputLine1 = []; nv.addGraph(function() { …
Ali Aslam
  • 115
  • 1
  • 9
0
votes
1 answer

d3/nvd3: how can I set the size of ticks on x-axis

I would like to have x-axis ticks with only around 10px height. Per default every tick has 100% height of the chart-container. How can I achieve this - setting a css-parameter won't work because the ticks are getting calcuated and the height is set…
user3292546
  • 339
  • 5
  • 15
0
votes
2 answers

nvd3 Line Chart on Meteor JS: 'addGraph' Error

Using the official nvd3 package (https://atmospherejs.com/nvd3/nvd3) I have the following code under the Template.rendered block: var formattedEarnedData = formatEarnedData(userEarnedDataSet); nv.addGraph(function() { var earnedChart =…
mayvn
  • 191
  • 1
  • 9
0
votes
1 answer

nvd3 Chart Formatting on y-Axis

Does anyone know of any inherent reductions that nvd3 does to y-values? Data seems to be correct after a JSON.parse, and the dates on the x-values are correct, but the y-values are charted much lower than they were input. Examples: the first…
jle
  • 269
  • 8
  • 25
0
votes
1 answer

C3.js (Bar chart) axis label position not working when rotated: true

Axis label position for different options like position: 'outer-left'/outer-center/outer-left..... not working if axis rotated: true. Here is the jsfiddle link..
user3172663
  • 312
  • 3
  • 14
0
votes
2 answers

django-nvd3 does not show any graph

I'm still newbie to python 3.4 and django 1.7. I tried to draw a chart using django-nvd3. I tried to run something like: class Report(TemplateView): def report_page(request): extra_serie = {} xdata = [1, 2, 3, 4, 5, 6, 7, 8, 9,…
Happy Ahmad
  • 1,072
  • 2
  • 14
  • 33
0
votes
1 answer

Show first chart from 3

I want to have a multiple charts, but when I do it by $scope.data = [ { values: day, //values - represents the array of {x,y} data points key: 'Проходимость',//key - the name of the series. …
Romanoti
  • 1,107
  • 2
  • 8
  • 11
0
votes
1 answer

Angular NVD3 Y-Axis sets minimum data value as max range value

I'm pushing parsed xml data to the values and labels for the nvd3 chart. For some reason, one of my discrete bar charts, the one under "Top 5 SIC by Comments" in the drop down menu, isn't doing what it should. The y-axis range is set to the minimum…
Nick Borisenko
  • 494
  • 3
  • 18
0
votes
1 answer

How can aligned pie charts in nvd3? code: http://plnkr.co/edit/w0LewO7TmG6Lx3ALfwj8?p=preview

I am new to AngularJS and I want to make 2 pie charts equal in everything (i.e. size) and align them horizontally. When I make 2 pie charts they align vertically - the first pie chart is on one row, the second on the next. How can I align both pie…
Hassan
  • 329
  • 2
  • 10
  • 27
0
votes
1 answer

HTML + (NV)D3: Can't place a div on top of a div of the chart even with > z-index

so I have some HTML that looks like this:
With corresponding CSS like, svg { /*display: block;*/ …
SpicyClubSauce
  • 4,076
  • 13
  • 37
  • 62
0
votes
0 answers

NVD3 JavaScript change timestamp example to normal Date input

I'm having some trouble with inputting "normal" formated dates into a NVD3 example. My data is comming from a database and it comes out like the following: [ 2015-08-10 , 100] , [ 2015-08-11 , 33] , [ 2015-08-12 , 332] , [ 2015-08-13 , 2323] , […
Jimmyn
  • 531
  • 1
  • 5
  • 27
0
votes
1 answer

Angular-Nvd3 dates and numbers do not match data

I'm using Angular-Nvd3 to represent my sets of data, and I'm currently getting some weird results from my data. The dates and numbers in my data does not correspond to the dates and numbers that are shown on the graph. My $scope.data contains this…
martin
  • 1,894
  • 4
  • 37
  • 69
0
votes
1 answer

NVD3 Line Chart: Cannot assign to read only property 'series' of 1

New user trying to use NVD3. I made what I thought was a pretty basic example, but it seems like NVD3 cannot create an object it needs. Would appreciate if anyone could look at my Fiddle and let me know what's wrong. Fiddle:…
user1609682
  • 255
  • 2
  • 11
0
votes
1 answer

Translating mouse-over text in NVD3.js

I'm using some stacked bar diagrams with the excellent nvd3 library (These: http://nvd3.org/examples/multiBar.html) I have a problem though. I want the mouse-over tooltip just as it is, but I need to translate the word 'on' into another language. I…
Christoffer
  • 7,470
  • 9
  • 39
  • 55
1 2 3
…
99 100