react-d3.js BarChart

react-d3.js BarChart example

by YangWei

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>

JavaScript 1.7

var BarChart = rd3.BarChart
var barData = [
  {
    "name": "Series A",
    "values": [
      { "x": 1, "y":  91},
      { "x": 2, "y": 290},
      { "x": 3, "y": -25},
    ]
  },
  {  
    "name": "Series B",
    "values": [
      { "x": 1, "y":  9},
      { "x": 2, "y": 49},
      { "x": 3, "y": -20},
    ]
  },
  {  
    "name": "Series C",
    "values": [
      { "x": 1, "y":  14},
      { "x": 2, "y": 77},
      { "x": 3, "y": -70},
    ]
  }
];

var Chart = React.createClass({
  render: function() {
    return  (
    	<BarChart
      data={barData}
      width={500}
      height={300}
      title="Bar Chart"
      xAxisLabel="Value"
      yAxisLabel="Label"
      />
  )}
});

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