# react-nvd3
> React nvd3 reusable graph components.
Latest version **0.5.7** (published 2016-04-14) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-nvd3
pnpm add react-nvd3
yarn add react-nvd3
bun add react-nvd3
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.5.7 |
| Published | 2016-04-14 |
| First published | 2015-08-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.8.0 |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 135 |
| Author | Mariano Carballal |
| Maintainers | topicus |
| Keywords | React, D3, NVD3, graph, reusable, chart |
## Links
- npm: https://www.npmjs.com/package/react-nvd3
- Repository: https://github.com/NuCivic/react-nvd3
- Issues: https://github.com/NuCivic/react-nvd3/issues
- npm.io page: https://npm.io/package/react-nvd3
## Dependencies (2)
- [d3](https://npm.io/package/d3.md) ^3.5.16
- [nvd3](https://npm.io/package/nvd3.md) ^1.8.2
## Alternatives
- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads
## Recent versions
- 0.5.7 (latest) — 2016-04-14
- 0.5.6 — 2016-04-14
- 0.5.5 — 2016-04-12
- 0.5.4 — 2016-04-07
- 0.5.3 — 2016-02-26
- 0.5.2 — 2016-02-24
- 0.5.1 — 2016-02-23
- 0.5.0 — 2016-02-19
- 0.4.2 — 2016-01-23
- 0.4.1 — 2015-12-23
- 0.4.0 — 2015-12-19
- 0.3.0 — 2015-12-10
- 0.2.0 — 2015-11-28
- 0.1.0 — 2015-09-09
- 0.0.1 — 2015-08-25
## README
React component for NVD3 re-usable charting library
## Requirements
* NVD3
* D3
* ReactJS
## Quick start
```javascript
BarChart
```
## How do I add this to my project?
* Using bower and running `bower install react-nvd3`
* Using npm and running `npm install react-nvd3`
* Downloading it manually by clicking [here to download minified version](https://raw.githubusercontent.com/NuCivic/react-nvd3/master/dist/react-nvd3.min.js)
## How to use
```javascript
```
#### Type (string):
Chart type you want to use. Posible values are:
* lineChart
* scatterChart
* stackedAreaChart
* discreteBarChart
* multiBarChart
* multiBarHorizontalChart
* linePlusBarChart
* cumulativeLineChart
* lineWithFocusChart
* pieChart
* bulletChart
* indentedTree
#### Datum (array|function):
A collection of data or a function that returns it.
#### x (string|function)
The key in the collection that should be used as x value or a function that returns it:
```javascript
function getX(d){
return d.label;
}
React.render(
,
document.getElementById('barChart')
);
```
#### y (string|function)
The key in the collection that should be used as y value or a function that returns it.
#### margin (object)
To set chart margins you should provide an object with the wanted margins. For example
```javascript
React.render(
,
document.getElementById('barChart')
);
```
### Events
#### ready (function)
A function to be called right after the first transition ends. This event is triggered only once.
#### renderStart (function)
A function to be called each time the chart rendering starts.
#### renderEnd (function)
A function to be called each time the chart transition ends.
```javascript
React.render(
,
document.getElementById('barChart')
);
```
#### Available chart configurations
All the nvd3 configurations for each chart are available. For example if you are using the discreteBarChart then you could show values in this way:
```javascript
React.render(
,
document.getElementById('barChart')
);
```
For more information about the available options you could check the nvd3 documentation http://nvd3.org/
**NOTICE:** An extensive documentation with examples is embeded in the repository https://github.com/novus/nvd3/blob/master/examples/documentation.html . If you want to check it just clone it and open that file.
#### Configure nested nvd3 components
If you need to configure nested nvd3 components you need to pass a nested object with the configurations to the property that match with the nested component.
Suppose you need to disable tooltips in your charts:
```javascript
React.render(
,
document.getElementById('barChart')
);
```
In this case we are passing the nested object to configure the tooltip. This is also applicable to axis components.
### Do you want to load a chart from your database?
Since react allow you to use a plain javascript syntax to pass props then you could do this:
```javascript
var chart = {
id:'barChart',
type:'discreteBarChart',
datum: datum,
x: 'label',
y: 'value'
};
React.render(
React.createElement('NVD3Chart', chart),
document.getElementById('barChart')
);
```
Or this:
```javascript
// I've included jQuery here because I want to simplify the code, but it's not required.
$.getJSON('/mychartendpoint/1',function(chart){
React.render(
React.createElement('NVD3Chart', chart),
document.getElementById('barChart')
);
});
```
#### Ok, but what about axis formatters and other functions?
Formatters are functions and we don't want to stored them in a database. If you want to persist your chart state somewhere you need to have a plain json object.
Instead of persist your function implementations in your json you need to create a reference from the json object and pass those functions by context at the moment you instantiate the chart.
Suppose you have a function called getColor to assign the colors in your charts. In this case you'll need to create a context object with the getColor function implementation inside and pass the reference to the color property.
Function references have this format: ```{name:'functionNameInContext', type:'function'}```.
Let's see an example:
```javascript
var context = {
getColor: function(i){
var colors = d3.scale.category20().range().slice(10);
return colors[Math.floor(Math.random() * colors.length)];
}
};
ReactDOM.render(
,
document.getElementById('barChart')
);
```
## Developers
Source code is pretty straightforward. You can take a look at https://github.com/NuCivic/react-nvd3/blob/master/index.js.
#### Requirements
* nodejs
* webpack
* gulp
#### Quick start
* git clone https://github.com/NuCivic/react-nvd3.git
* cd react-nvd3
* npm install
* gulp serve
* open any example http://localhost:3000/examples/barChart/
---
_Source: https://npm.io/package/react-nvd3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._