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

NVD3, Clear svg before loading new chart

I have several different NVD3 charts that I call upon in the same svg. I use buttons to call functions, each containing a new chart that uses its own data. Is there a way to clear my single svg without deleting it? I wish to press a button to call…
JasTonAChair
  • 1,948
  • 1
  • 19
  • 31
58
votes
6 answers

d3.js & nvd3.js -- How to set y-axis range

I'm trying to set the y-axis range of the chart from 1-100. Consulted the API documentation and found a possible solution with axis.tickValues as seen here https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues However, using the option does…
Viet
  • 3,257
  • 3
  • 28
  • 36
52
votes
2 answers

How do I display dates on the x-axis for nvd3 / d3.js?

I'm using nvd3, but I think this is a general d3.js question about time scale and formatting. I've created a simple example that illustrates the problem (see code below): If I omit .tickFormat for the xAxis, it works fine without date formatting. …
Ultrasaurus
  • 3,031
  • 2
  • 33
  • 52
50
votes
1 answer

rCharts nvd3 lineWithFocusChart Customization

I am working with nvd3 on rCharts and was wondering if there was a way to customize the axes for the lower view finder graph on a lineWithFocusChart. I have provided a reproducible example below, where I customize the x and y axes to have commas…
johnny838
  • 922
  • 7
  • 15
49
votes
1 answer

NVD3 chart fails to calculate legend text length in Chrome, since Window.getComputedStyle does not return font-size correctly

Background Information I created an integration of NVD3 charts into Eclipse-RAP using its custom widget framework. The chart is generated into a div. The CSS is loaded dynamically by creating a link entry in javascript. I check if the CSS is already…
Gábor Lipták
  • 9,646
  • 2
  • 59
  • 113
40
votes
9 answers

nvd3 piechart.js - How to edit the tooltip?

I'm using nvd3's piechart.js component to generate a piechart on my site. The provided .js file includes several var's, as follows: var margin = {top: 30, right: 20, bottom: 20, left: 20} , width = null , height = null , showLegend =…
kage23
  • 401
  • 1
  • 4
  • 3
36
votes
1 answer

Real time line graph with nvd3.js

I am trying to create a real time graph using nvd3.js which would be updated periodically and with the impression that the data is processed in real time. For now I have been able to create a function which would update the graph periodically but I…
Christopher Chiche
  • 15,075
  • 9
  • 59
  • 98
35
votes
7 answers

How to customize color in pie chart of NVD3

I am trying to use NVD3 http://nvd3.org/livecode/#codemirrorNav a pie chart. But i want to change the default color. How do i change the color. i am not able to do it.
user2315392
  • 353
  • 1
  • 3
  • 4
34
votes
3 answers

D3js: When to use .datum() and .data()?

I often see .datum when an area chart is used. For example: svg = d3.select("#viz").append("svg").datum(data) Are there any rules of thumb for when .datum is needed? var area = d3.svg.area() .x(function(d) { return x(d.x); }) …
Bobby Gifford
  • 343
  • 1
  • 3
  • 5
26
votes
6 answers

How can I position rotated x-axis labels on column chart using nvd3?

I am building a bar chart using nvd3's multiBarChart and need to adjust the position of rotated x-axis labels: var chart = nv.models.multiBarChart(); ... chart.rotateLabels(-90); I would like the column labels to not overlap the chart and be…
David Tinker
  • 9,383
  • 9
  • 66
  • 98
23
votes
11 answers

How to add a click event on nvd3.js graph

I am using nvd3.js and trying to add a click event d3.selectAll(".nv-bar").on('click', function () {console.log("test");}); JSFiddle How can I do that ?
Petran
  • 7,677
  • 22
  • 65
  • 104
23
votes
2 answers

how to set height and width of nvd3 chart

I'm trying to set the width and height of a nvd3 multi bar chart programmatically using chart.width(600); chart.height(400); See the example here: http://jsfiddle.net/hPgyq/20/ As you can see this really messes up the chart. I know I can do this is…
lostdorje
  • 6,150
  • 9
  • 44
  • 86
21
votes
1 answer

How to disable legend in nvd3 or limit it's size

I'm using nvd3 and have a few charts where the legend is much to large. E.g. a scatter/bubble with 15 groups and the group names are long. The legend is so large that it leaves almost no room for the chart itself. Is there a way to remove the legend…
Dave Wilkin
  • 231
  • 1
  • 3
  • 13
20
votes
2 answers

MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?

Data: nvd3TestData = [ { values:[ {x:"M",y:1}, {x:"T",y:2}, {x:"W",y:3}, {x:"R",y:3}, {x:"F",y:4}, {x:"S",y:5}, {x:"U",y:6} ], key:"Apples" }, …
Z Jones
  • 2,015
  • 4
  • 23
  • 42
20
votes
5 answers

Is an NVD3 Line Plot with Markers Possible?

I'm making an NVD3 line plot that will have significantly improved clarity if I can get markers to show for each data point instead of just the line itself. Unfortunately, I haven't been able to find an easy way to do this with NVD3 yet. I also…
Buysacoke
  • 201
  • 1
  • 2
  • 5
1
2 3
…
99 100