Need help with react-nvd3?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

NuCivic
135 Stars 46 Forks MIT License 111 Commits 31 Opened issues

Description

React component for NVD3 re-usable charting library

Services available

!
?

Need anything else?

Contributors list

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.