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

nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over

I'm new to this kind of forum and my English skills are not the best but I'll try to do my best :). There is an example of a Line Chart with View Finder at nvd3 website. This is the one (examples\lineWithFocusChart.html, nvd3 zip package) which I…
Mike Molus
  • 83
  • 1
  • 1
  • 7
6
votes
1 answer

How to navigate the component from NVD3 Callback in Angular 4?

I have implemented NVD3 Charts in Angular 4. written an on Click event inside a callback function, on click of the chart I am trying to navigate to another component but I am unable to navigate. Code : import { Router} from '@angular/router'; export…
Jackie
  • 298
  • 1
  • 7
6
votes
1 answer

D3.js and NVD3.js, which to use and when

What are the benefits/drawbacks of using D3.js vs NVD3.js? (some points that interest me most: Isn't it better to stick just with NVD3.js if it is better in any way? Why use D3.js? Is it that NVD3.js just provides a set of sample graphs and that's…
Nikita Vlasenko
  • 4,004
  • 7
  • 47
  • 87
6
votes
2 answers

How to force nvd3 to display the equal number of ticks as that of the values plotted on the graph-nvd3

How can force nvd3 graph to have certain number of ticks to be displayed, for example, please find below the image of the graph plotted: as seen below I have 7 values pushed to the array holding the 7 days of the week. However looks like they have…
user1234
  • 3,000
  • 4
  • 50
  • 102
6
votes
6 answers

NVD3.js multiChart x-axis labels is aligned to multiple lines, but not multiple bars

This question relates to NVD3.js multiChart x-axis labels is aligned to lines, but not bars I am using NVD3.js multiChart to show multiple lines and multiple bars in the chart. All is working fine, but the x-axis labels is aligned only to the line…
Orbitum
  • 1,585
  • 5
  • 27
  • 47
6
votes
1 answer

NVD3 - How to refresh the data function to product new data on click

I have a line chart and every time the page refresh it changes the data, which is great but I need to to refresh by a user click. This is because there will eventually be other input fields on the page and refreshing the page would destroy their…
dvoutt
  • 930
  • 2
  • 9
  • 23
6
votes
1 answer

NVD3.js multiChart x-axis labels is aligned to lines, but not bars

I am using NVD3.js multiChart to show multiple lines and bars in the chart. All is working fine, but the x-axis labels is aligned only to the line points, not bars. I want to correctly align labels directly below the bars as it should. But I get…
Orbitum
  • 1,585
  • 5
  • 27
  • 47
6
votes
1 answer

how to stack series in nvd3 multibar angularjs directive

i want to create a multiple bar chart with nvd3 angularjs directive by cmaurer (nvd3 directive link) but the problem is that i need to stack some series and there is a strange bug. here is my data: $scope.exampleData = [ { …
David Sttivend
  • 325
  • 1
  • 6
  • 16
6
votes
1 answer

nvd3 + lineAndFocus + BrushExtent(access focus part that is clicked)

I'm using the lineWithFocusChart.js model shown in the nvd3 examples shown here: http://nvd3.org/examples/lineWithFocus.html I want to be able to get access to the values that the user selects in the brushExtent (slightly related see here) and then…
HattrickNZ
  • 4,373
  • 15
  • 54
  • 98
6
votes
0 answers

how to set nvd3 tooltip boundary

I'm trying to make this tool tip's position relative to the parent div this is how I am implementing the web page:
with…
Tarek
  • 1,904
  • 2
  • 18
  • 36
6
votes
1 answer

How do you add error bars to line-graphs in nvd3.js graphs

I have recently come across the nv.d3 js graph tools that look fantastic. I've got everything working; however.....I am thinking about implementing them in combination with a html5 slide-show for presenting scientific data. For this reason it would…
user1378824
  • 207
  • 4
  • 13
6
votes
2 answers

Trigger legend click event in nvd3 using jquery?

I'm using nvd3 for a multi-bar chart, and I'd like to make the chart redraw when the user clicks the other html on my page. I tried using jQuery to select the "Stream0" legend circle on the nvd3 homepage (http://nvd3.org/) and click it using this…
twneale
  • 2,836
  • 4
  • 29
  • 34
6
votes
3 answers

nvd3 scatter plot with ordinal scale

Im relatively new to d3 and nvd3 and wanted to create a simple scatterplot, just like the example but with an ordinal y-axis. So y axis values are categorical strings. This is what I thought I needed to do: var xfun = function (d) { return d.Pos } …
dgorissen
  • 6,207
  • 3
  • 43
  • 52
6
votes
3 answers

Change range for one y axis nvd3/d3

I am currently using the multiChart model and I have two different y Axes. I would like to like to change both of the axes so that they start at 0 because currently they start at the smallest y data point. I have tried doing the…
Siva
  • 1,256
  • 3
  • 13
  • 29
6
votes
1 answer

0 fill null values with d3 series data

I'm working on a multi-line chart in D3 but am having some issues with the rendering. I'm trying to render two lines with data that looks like this: [ { key:"line 1", values: [ {x:1, y:1}, {x:2, y:2} ] }, { key:"line 2" , values: [ {x:1,…
Dan Ramos
  • 1,092
  • 2
  • 19
  • 35
1 2 3
…
99 100