React component for NVD3 re-usable charting library
Requirements
- NVD3
- D3
- ReactJS
Quick start
<!DOCTYPE html><html><head> <title>BarChart</title> <!-- SCRIPTS --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-with-addons.min.js"></script> <!-- You should remove this for production and provide a compiled version of react components --> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script type="text/jsx" src="/dist/react-nvd3.js"></script> <!-- STYLESHEETS --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"> <style type="text/css"> #barChart svg height: 400px; </style></head><body> <div id="barChart"></div> <script type="text/babel"> ;{ var datum = key: "Cumulative Return" values: "label" : "A" "value" : -29765957771107 "label" : "B" "value" : 0 "label" : "C" "value" : 32807804682612 "label" : "D" "value" : 19645946739256 "label" : "E" "value" : 019434030906893 "label" : "F" "value" : -98079782601442 "label" : "G" "value" : -13925743130903 "label" : "H" "value" : -51387322875705 ; React; }window; </script></body></html>
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
How to use
<NVD3Chart id="barChart" type="discreteBarChart" datum=datum x="label" y="value"/>
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:
{ return dlabel; } React;
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
React;
renderEnd (function)
A function to be called after the chart render ends.
React;
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:
React;
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.
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:
var chart = id:'barChart' type:'discreteBarChart' datum: datum x: 'label' y: 'value'; React;
Or this:
// I've included jQuery here because I want to simplify the code, but it's not required.$;
NOTICE: Currently axis formats can't be serialized because they are functions. In further versions a way to store those parameters will be provided.
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/