react-d3.js AreaChart

react-d3.js AreaChart example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://npmcdn.com/[email protected]/build/public/js/react-d3.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

React

var AreaChart = rd3.AreaChart
var areaData = [{
      "name": "bids", "values": [
    [0.0, 4330],
    [0.0011, 3330],
    [0.003, 30],
    [0.0031, 0.0],
    [0.0031337, 0.0],
    [0.0052, 0.0],
    [0.0055, 0.0]]},
    {
    "name": "asks", "values": [
    [0.0, 0.0],
    [0.0011, 0.0],
    [0.0031, 0.0],
    [0.0031337, 1558],
    [0.0052, 2529],
    [0.0055, 1500]]}
  ];




var Chart = React.createClass({
  render: function() {
    return  (
    	 <AreaChart
        data={areaData}
        width="100%"
        viewBoxObject={{
          x: 0,
          y: 0,
          height: 500,
          width: 600
        }}
        height={600}
        title="Area Chart"
        xAxisTickInterval={{unit: 'year', interval: 2}}
        xAxisLabel="Year"
        yAxisLabel="Share Price"
        axesColor='#888888'
        xAccessor={(d)=> {
            return new Date(d[0]);
          }
        }
        yAccessor={(d)=>d[1]}
        domain={{y: [,50]}}
      />
  )}
});

ReactDOM.render(
  <Chart />,
  document.getElementById('container')
);