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

Updating rCharts nvd3 chart in Shiny dashboard

I've built a Shiny dashboard app that shows a number of metrics data of scientific articles by university School. The app is at https://ttso.shinyapps.io/2amconf and the code https://gist.github.com/tts/900b4e27bf37e8969ebd with some sample data of…
tts
  • 98
  • 1
  • 9
0
votes
1 answer

how to update nvd3 pie chart and resize it

how can I update nvd3 pie chart with new values and also resize the pie chart based on its container size. I already have line and bar chart working with this command to update the chart and also update on resize. But for PIE chart it throws an…
user3658423
  • 1,904
  • 5
  • 29
  • 49
0
votes
2 answers

kwargs1 not defined error in nvd3

I am new to nvd3 and it's python implementation. I was trying the following line-chart given as an example but it's returning an error that **kwargs1 is not defined. I don't know what it is and how to overcome this error. from nvd3 import…
psr
  • 2,619
  • 4
  • 32
  • 57
0
votes
1 answer

NVD3: Have labels at certain tick values at the top of the graph

I am using NVD3 to draw a graph that uses an ordinal scale on the x axis for dates. I also have a "focus graph" under it to highlight a specific region to display. To automatically update the ticks that are displayed, I use the tickValues()…
spooky655
  • 99
  • 2
  • 10
0
votes
1 answer

chart.interactiveLayer.tooltip.chartContainer Not Functional?

I have a page that contains multiple graphs made ​​with NVD- chart.js . the graphs are placed in a dashboard , so each part of the dashboard contains a graph. This dashboard contains two line charts. The problem is that the tooltip of the second…
Kais Dkhili
  • 399
  • 1
  • 5
  • 18
0
votes
1 answer

load mysql to json for NVD3

user2637015
  • 723
  • 2
  • 12
  • 27
0
votes
1 answer

nvd3 interlock element click event with other chart

I want to show a data though various types of graph. so i make function to write graph like this drawLineChart('linechart2'); drawBarChat('barchart1'); function drawLineChart(div) { nv.addGraph(function() { var chart =…
user2637015
  • 723
  • 2
  • 12
  • 27
0
votes
1 answer

nvd3 and d3.js Y axis rendering issue

I am new to NVD3 libraries. I am trying to use the cumulative line chart but unable to render the y axis. I have two series, Input and Output.. with x showing the date while y showing the values from 50 - 400 range. However I am able to render the…
TrexTroy
  • 303
  • 7
  • 22
0
votes
1 answer

Angular-nvd3: same distance between data on x scale

By default scale of x axis is calculated from values. This gives uneven distance between two adjasted points. Like for example if I have an array of values like [1,2,5], there will be different distance on x axis for point, and also x axis labels…
kaytrance
  • 2,657
  • 4
  • 30
  • 49
0
votes
1 answer

How to configure nvd3 for Europe number formatting?

This is not a coding-related issue. I'm fine using R + rCharts to create interactive visualisations. My question is about I cannot find documentation or forums that explain how to change nvd3 settings. I have these…
pachadotdev
  • 3,345
  • 6
  • 33
  • 60
0
votes
1 answer

Adding custom non-uniform labels to a Y-axis of a stacked area chart in NVD3

I want a stacked area chart of several datasets. possibly unusually I want to use the y axis to clarify what each set represents and its starting value. i.e. The Y-axis doesn't need to be a regular tick over the range of the data. for the…
Paul D'Ambra
  • 7,629
  • 3
  • 51
  • 96
0
votes
0 answers

How to overlie bar charts in nvd3.js?

I want to display one bar chart on top of another one. Reason: I am showing a base consumption on a certain day, but also the overall value. I don't want a bar chart next to another but on top of one. So far, I draw a line with pure d3.js on…
ohboy21
  • 4,259
  • 8
  • 38
  • 66
0
votes
1 answer

How to choose a different property instead of `key` in nvd3

All nvd3 examples (which I've found) look like this: return [ { values: sin, //values - represents the array of {x,y} data points key: 'Sine Wave', //key - the name of the series. color: '#ff7f0e' //color - optional: choose your own…
peter
  • 14,348
  • 9
  • 62
  • 96
0
votes
1 answer

nvd3 Line Chart Not Drawing w/ Correct Data

I'm currently trying to render an nvd3 Line Chart in Meteor JS. I'm running Meteor 1.1.0.3 and running the nvd3 package on version 1.7.1. Using the examples on the nvd3: http://nvd3.org/examples/line.html, I got the following code. However, even…
mayvn
  • 191
  • 1
  • 9
0
votes
1 answer

Draw a vertical line on an existing NVD3 graph

I have a NVD3 graph displaying simple data set. I just want to draw a line over that graph with a different color(it's like a cut-off value , that will be x=5)
prime
  • 14,464
  • 14
  • 99
  • 131