❤
npm
Sign UpSign In

bevspot-react-nvd3

0.4.4 • Public • Published

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">
    ;(function(global){
      var datum = [{
          key: "Cumulative Return",
          values: [
            {
              "label" : "A" ,
              "value" : -29.765957771107
            } ,
            {
              "label" : "B" ,
              "value" : 0
            } ,
            {
              "label" : "C" ,
              "value" : 32.807804682612
            } ,
            {
              "label" : "D" ,
              "value" : 196.45946739256
            } ,
            {
              "label" : "E" ,
              "value" : 0.19434030906893
            } ,
            {
              "label" : "F" ,
              "value" : -98.079782601442
            } ,
            {
              "label" : "G" ,
              "value" : -13.925743130903
            } ,
            {
              "label" : "H" ,
              "value" : -5.1387322875705
            }
          ]
        }
      ];
      React.render(
        <NVD3Chart id="barChart" type="discreteBarChart" datum={datum} x="label" y="value"/>,
        document.getElementById('barChart')
      );
    })(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:

  function getX(d){
    return d.label;
  }
  React.render(
    <NVD3Chart id="barChart" type="discreteBarChart" datum={datum} x={getX} y="value"/>,
    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

  React.render(
    <NVD3Chart id="barChart" type="discreteBarChart" datum={datum} margin={{left:200}}/>,
    document.getElementById('barChart')
  );  

renderEnd (function)

A function to be called after the chart render ends.

  React.render(
    <NVD3Chart type="discreteBarChart" datum={datum} renderEnd={mycallback}/>,
    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:

  React.render(
    <NVD3Chart id="barChart" type="discreteBarChart" showValues="true" datum={datum} x="x" y="value"/>,
    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.

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.render(
    React.createElement('NVD3Chart', chart),
    document.getElementById('barChart')
);

Or this:

// 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')
    );
});

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

Readme

Keywords

Package Sidebar

Install

npm i bevspot-react-nvd3

Repository

github.com/bevspot/react-nvd3

Homepage

github.com/bevspot/react-nvd3

Weekly Downloads

6

Version

0.4.4

License

MIT

Last publish

Collaborators

  • drewproud
Try on RunKit
Report malware