react-nvd3

by NuCivic

NuCivic / react-nvd3

React component for NVD3 re-usable charting library

128 Stars 43 Forks Last release: Not found MIT License 111 Commits 13 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-nvd3 Build Status

React component for NVD3 re-usable charting library

Requirements

  • NVD3
  • D3
  • ReactJS

Quick start

  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

How to use


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(
    ,
    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(
    ,
    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.

  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:

  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:

  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:

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

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:

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/

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.