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
9
votes
3 answers

NVD3 Line Chart Uncaught TypeError: Cannot read property 'x' of undefined

I'm using the NVD3 library to make simple line charts based on data generated in a Rails controller. The code I'm using to generate data in Rails is: task.task_values.each do |u| array.push({ :x => u.created_at.to_i * 1000, :y => u.value.to_i…
rushilg
  • 176
  • 1
  • 1
  • 8
9
votes
1 answer

An alternative to NVD3.js (reusable charts library)?

I've been looking recently at solution for creating charts for a web page. After a bad experience with (an outdated version) of Highcharts, I tried to give a chance for D3.js, which I find very handy. Since I'm on a tight schedule for this project,…
GeReV
  • 3,195
  • 7
  • 32
  • 44
9
votes
2 answers

How to set custom width of bar in NDV3 Discreate bar chart

Am trying to build vertical bar chart using nvd3 charts. Problem : If chart has single record, bar width reaches 3/4 of the chart width. Question : How to change width of the bars in Discrete bar chart? Have attached chart please guide me..
Mohan
  • 877
  • 10
  • 20
  • 32
8
votes
1 answer

nvd3 tooltip decimal format

I'm using nvd3 to display line graph. Having a little trouble in formatting the tooltip content This is the line I'm using to format the y-axis text chart1.yAxis.tickFormat(d3.format('.02f')); But, it is only taking effect on the y-axis. If there…
Sunil Kumar B M
  • 2,735
  • 1
  • 24
  • 31
8
votes
2 answers

Uncaught TypeError: Cannot read property 'createElementNS' of undefined

I am using nvd3 to draw a line chart and when i pass the div to nvd3 to draw a chart its give me this error Uncaught TypeError: Cannot read property 'createElementNS' of undefined Here is code: var chartDiv = 'line-chart'+ counter++; tmpl =…
user4069483
8
votes
2 answers

NVD3 Line Chart X Axis Ticks Are Missing

I am using NVD3 to display line chart here: http://jsbin.com/xodaxafiti/2/edit?js,output But it seems like NVD3 auto-hide some tickLabels on XAxis, but only those ticks near the edge, i.e. 2-3Oct and 27-28Oct (except the first and last tick). I know…
yonasstephen
  • 2,645
  • 4
  • 23
  • 48
8
votes
1 answer

nvd3 library, How to customize line chart

I'm using nvd3 to draw some stats in my app. I would like to increase the thickness of the line in my charts. How can it be possible ? Thanks
psv
  • 3,147
  • 5
  • 32
  • 67
8
votes
3 answers

How to obtain percentage in tooltips of an nvd3 pie chart?

I have an nvd3 pie chart. I am obtaining the percentage value as labels but I want it in the tooltip. Here is the HTML:
vipin
  • 670
  • 2
  • 9
  • 25
8
votes
1 answer

NVD3 line chart with vertical line

I'm trying to generate a linechart in NVD3 with a vertical line. Particularly this kind of line chart. The linechart has two panels a viewing panel and a zoom panel, I would want the line to be on both. Something like this: Is this…
Omar Wagih
  • 8,504
  • 7
  • 59
  • 75
8
votes
2 answers

New to nvD3 - how can I make my unix timestamps appear as dates on the x-axis?

Due disclosure - I am awful at javascript, but trying to learn! I have an array with a few entries like these in it: [1349013600] => 232 The key is a unix timestamp, the value is the $ in sales from that day. I am currently graphing these on a…
mcl
  • 223
  • 2
  • 7
8
votes
2 answers

nvd3.js chart ajax data redraw - missing hovereffect + former yAxis scale

I am using nvd3 to draw a simple line chart with data receiving via an ajax request. It is working perfectly with the first drawing request but not on redrawing. The chart redraws by calling the same drawing function but with different data +…
helmson
  • 81
  • 1
  • 2
8
votes
2 answers

Is it possible to have zooming option in NVD3 charts as like in Highcharts?

I recently started using NVD3 charts and like to have zooming option like Highcharts. Is it possible?
user1794400
  • 89
  • 1
  • 3
7
votes
1 answer

D3.js multiple y-Axis with same position of ticks?

I have chart with 3 y-axis and one x-axis and must zoom all 3 axis. ! DEMO Is it possible to set all 3 y-axis with center on 0? And if I zoom chart ticks must stay on same place? Or, maybe, say "show always only 10 ticks between…
user826822
7
votes
6 answers

NVD3.js: ReferenceError: nv is not defined

I am using NVD3.js library to generate graph. I tried adding line chart into it & getting the above error. How to resolve it? I am trying this here
Shaggie
  • 1,799
  • 7
  • 34
  • 63
7
votes
2 answers

NVD3 Change label text color

I've desperately been trying to change the label text color on the charts I'm drawing with nvd3.js - they're drawn in black, but I need them white due to the color of the page they are included on. I'm using nvd3.js version 1.1.15BETA with d3.js…
nover
  • 2,259
  • 1
  • 27
  • 27
1 2 3
…
99 100