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

Angular nvd3 line chart length

I have a line chart. It is ploting okay. I need to show the chart on mobile devices. How do I optimize length of the chart on different devices? When data set is large, the chart resizes and becomes very short lengthwise. I have had some limited…
zaini
  • 57
  • 9
0
votes
1 answer

nvd3 CSS override for more than 2 line charts

I am not clear that how to override nvd3 CSS and apply it to the different line charts. In Html, there are two div for line plots.
Karl
  • 329
  • 6
  • 20
0
votes
1 answer

nvd3 tickValues() not drawing ticks close to boundary values

I am drawing a line chart using nvd3 and specifying a set of xAxis values to draw ticks for using: chart.xAxis.tickValues(tickArr) where tickArr has the list of points to draw ticks for. For some reason, the ticks close to the beginning or the end…
arjun010
  • 129
  • 1
  • 2
  • 12
0
votes
1 answer

How to remove the border on the hover element in nvd3

I'm using nvd3 to display the d3 charting. im trying to remove the border that is around the info text on hover over the data points. below is the image: when i hover over the data point the info text shows up and the border, im trying to remove…
user1234
  • 3,000
  • 4
  • 50
  • 102
0
votes
1 answer

How to add class to each line in linechart

i have draw a line chart i want to give each line a dynamic class. nv.addGraph(function() { height = 450; width = $(div).width() - 50; chart = nv.models.lineWithFocusChart() .width(width) …
user4069483
0
votes
0 answers

Set image as background of svg circle element

I want to add an image inside every center bubble node. I am able to add an image but it is acting like hidden pattern for background and wherever bubble moves it exposes the visible part of the hidden pattern which is in the background. Actually my…
Bhaskar Shankarling
  • 23
  • 1
  • 7
0
votes
0 answers

d3.js chart not displaying

I have a chart controller class that queries data.The apex page is getting the data when I call the variables with {!series1} {!xAxis} and {!barChart}. Can't figure out why my chart will not display.
Frankie Meza
  • 1
0
votes
0 answers

Intentionally slow chart drawing using nvd3 for time-lapse video

I'm using nvd3 to produce regular line chart where data from a device is logged into a database every 10 seconds and then fetched to produce a chart. Now I'm making a movie and using a time-lapse shooting I've made a 24 hour video of the operation…
fAX
  • 1,451
  • 1
  • 10
  • 11
0
votes
1 answer

Create NVD3 Semicircle Donut using rCharts

I am trying to create a simple semicircle donut using rCharts and the NVD3 javascript library. A minimum reproducible example of a full donut is provided below. library(rCharts) data1 <- data.frame(label=c("A","B","C"),…
aashanand
  • 714
  • 1
  • 6
  • 15
0
votes
1 answer

Adding nodes to the existing clustered force layout in d3js

From two days I am trying to add new nodes to existing clustered force layout. I am able to add nodes to existing force and pack layout but gravity and charge force is not applying on newly added nodes and I think 'tick' event call back is also not…
Bhaskar Shankarling
  • 23
  • 1
  • 7
0
votes
1 answer

Programmatically updating brush for LineWithFocusChart in Angular nvd3

I am using the "LineWithFocusChart" in the Angular-nvd3 directives. The link to this directive is here Now I need to change the focus of this chart programmatically rather than using the focus chart below. The answer for this issue is in this…
srthu
  • 197
  • 2
  • 14
0
votes
1 answer

'nvd3_tags' is not a valid tag library

I was using django-charts nvd3 and i got this error while running python manage.py runserver Error : TemplateSyntaxError 'nvd3_tags' is not a valid tag library: Template library nvd3_tags not found, tried…
Sumit Singh
  • 23
  • 6
0
votes
1 answer

Bootsrap.css and NVD3's css seem to conflict, resulting in no tooltips. Can I use both on my webpage?

I'm using Bootstrap v3.3.1 CSS to style my page. Within my page I have a 'div' with and empty 'svg' element inside it. Within the 'svg' i'm using NVD3 to add charts. It seems The bootsrap css and nvd3 css conflict. When I keep only bootsrap, I…
Timi Bennatan
  • 71
  • 1
  • 10
0
votes
1 answer

How to display line chart with keys associated with more than one set of values? angularjs-nvd3-directives

I´m using angularjs-nvd3-directives for display a chart line, but I need to display datasets that have more than one set of values for the same key. For example: "key": "estimation" "values": actual: [[x1,a1],[x2,a2]...] deviation:…
lau B
  • 1
  • 1
0
votes
0 answers

On mouse down zoom start from 01/01/70

line chart with d3.js ... from here ::(http://bl.ocks.org/stepheneb/1182434) but when start dragging all point go to left and x-axis which is ime scale is start from 01/01/70 than need too much panning to get in real values 2010... once we pan…
Amit Rana
  • 1,117
  • 1
  • 10
  • 32
1 2 3
…
99 100