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

nvd3 living chart Memory Leak

I try to create a living line chart. I always show a fixed number of points adding a new one means removing an old one. To do this I use an interval timer to redraw the chart. This works quite nice until I run the profiler and have a look at the…
Mario
  • 529
  • 7
  • 19
0
votes
1 answer

Map data for lineWithFocusChart time series

I am trying to create a timeseries using the nvd3 lineWithFocusChart model. My data is an array of objects like this: [ { "key": "red", "values": [ { "date": "2015-06-17T11:00:00.000Z", …
greenafrican
  • 2,516
  • 5
  • 27
  • 38
0
votes
1 answer

Remove the Legend from nvd3 pie chart

Im working on creating a pie chart using nvd3. I successfully got the pie chart but when the number of slices increase the legends tend to take up lot of space and the pie shrinks. I have decided to remove the legends completely. i tried somthing…
Mani kv
  • 153
  • 2
  • 19
0
votes
1 answer

Interactive Guidelines of NVD3 Charts (Line chart) getting cut when in a 12 column grid (Bootstrap) i plot two charts

I have plotted a line chart using NVD3 and i am using bootstrap for responsive design. In a 12 column grid i am trying to plot two line charts. Everything works fine except for the line chart on left the interactive guidelines are getting cut. Here…
realcoder
  • 19
  • 4
0
votes
3 answers

make zoom using nvd3

I need make zoom in graphic. I am using angular js and nvd3. this is a part of my Code, html and angular module: var app = angular.module('DL', ['nvd3']); app.controller('daCtrl', function($scope) { $scope.graphic = [{key: "a", values:…
maikelm
  • 403
  • 6
  • 30
0
votes
1 answer

(D3.js) How to invert the X-axis? From 0...10 to 10...0

I need to invert the X-axis to have it begin from the biggest value and to degrade to lowest. For example beginning from 2015 and ending 1985. Is it possible to just sort the original data json/array in php? Or will it be sorted back to lowest to…
user1271930
  • 331
  • 1
  • 7
  • 21
0
votes
0 answers

Add a value from a json file in the tooltip with NVD3

I'm quite new with the NVD3 library. I have a linechart with a simple tooltip. I activated the footer and I would like to load in the footer a different value for every couple (x,y). What is the best solution in NVD3? I was trying to insert in the…
Silvio S.
  • 547
  • 5
  • 20
0
votes
1 answer

How can I set odoo graph vlaues in the y-axis

This is my graph: What I need is to display just the 0 and 1 in the y-axis without 0.1 ,0.2, .., 0.9
Yacino
  • 645
  • 2
  • 10
  • 32
0
votes
0 answers

How to override a function in NVD3 library?

My goal is to override the function used by NVD3 for the content of a tooltip. I found the function that provides this behaviour: contentGenerator. Below here the code: var contentGenerator = function(d) { if (content != null) { …
Silvio S.
  • 547
  • 5
  • 20
0
votes
1 answer

NVD3 Round Border on Tooltips

I would like to have round border on my tooltips. I had a look at the example on the website and they display a nice round border as a default behaviour. I used the same style (default nv.d3.css) but unfortunately I have no the same result. Do you…
Silvio S.
  • 547
  • 5
  • 20
0
votes
1 answer

Why does the dependency d in tickFormat: function(d) {} have a value other than the data I have brought in

I am currently learning to code and have been given the task of making a basic line graph chart that I was told to base off of this example... "http://plnkr.co/edit/iIxJT3?p=preview" var app = angular.module('plunker',…
Liam Lansang
  • 1
  • 2
0
votes
2 answers

Unable to appropriately assign a size to NVD3 chart

I am experimenting with an NVD3 chart, and though it renders correctly in shiny dashboard, the div which contains the chart overflows shiny dashboards box() container (does not fit snugly into the box). Explicitly setting height and width for the…
Tumaini Kilimba
  • 195
  • 2
  • 15
0
votes
1 answer

Does NVD3.js include a built-in option to set the color of each Y-axis?

I have one of NVD3.js's line plus bar charts configured as below. Of course, each series of data has its own color for the bar/line display on the chart. I'm curious if there's a built-in way to set the Y-axis associated with a particular series to…
natlee75
  • 5,097
  • 3
  • 34
  • 39
0
votes
1 answer

Hiding and showing triangle marker in a bullet chart in angularjs-nvd3-directives library

I'm using nvd3-bullet-chart from angularjs-nvd3-directives library to display maximum, current and average data. I'm setting the minimum variable in the array to 0 because I don't need to display that. I have another data point and I'm using the…
bazzinga
  • 165
  • 1
  • 5
  • 16
0
votes
1 answer

Angular nvD3 Error: Invalid isolate scope definition for directive nvd3

I'm trying to use AngularJS, D3, NVD3, and Angular-NVD3 all together. I'm following the quick guide here: http://krispo.github.io/angular-nvd3/#/quickstart and the pie chart example here:…
Katie
  • 45,622
  • 19
  • 93
  • 125
1 2 3
…
99 100