React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by dauruk0512

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/prop-types/prop-types.min.js"></script>
<script src="https://npmcdn.com/recharts/umd/Recharts.min.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>

CSS

body {
  margin: 0;
}
#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  width: 800px;
  height: 800px;
  background-color: #fff;
}

JavaScript 1.7

const {BarChart, Bar, Brush, ReferenceLine, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
{name: '1',  pv: 456},
{name: '2', pv: 230},
{name: '3',  pv: 345},
{name: '4',  pv: 450},
{name: '5', pv: 321},
{name: '6',  pv: 235},
{name: '7',  pv: 267},
{name: '8',  pv: -378},
{name: '9',  pv: -210},
{name: '10',  pv: -23},
{name: '12',  pv: 45},
{name: '13',  pv: 90},
{name: '14',  pv: 130},
{name: '15',  pv: 11},
{name: '16',  pv: 107},
{name: '17',  pv: 926},
{name: '18',  pv: 653},
{name: '19',  pv: 366},
{name: '20',  pv: 486},
{name: '21',  pv: 512},
{name: '22', pv: 302},
{name: '23',  pv: 425},
{name: '24',  pv: 467},
{name: '25', uv: 291, pv: -190},
{name: '26',  pv: 194},
{name: '27',  pv: 371},
{name: '28',   pv: 376},
{name: '29',  pv: 295},
{name: '30',pv: 322},
{name: '31',pv: 246},
{name: '32',pv: 33},
{name: '33',pv: 354},
{name: '34',pv: 258},
{name: '35',pv: 359},
{name: '36',pv: 192},
{name: '37',pv: 464},
{name: '38',pv: -2},
{name: '39'pv: 154},
{name: '40',pv: 186}
    ];
const SimpleBarChart = React.createClass({
	render () {
  	return (
    	<BarChart width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <XAxis dataKey="name"/>
       <YAxis/>
       <CartesianGrid strokeDasharray="3 3"/>
       <Tooltip/>
       <Legend verticalAlign="top" wrapperStyle={{lineHeight: '40px'}}/>
       <ReferenceLine y={0} stroke='#000'/>
       <Brush dataKey='name' height={30} stroke="#8884d8"/>
       <Bar dataKey="pv" fill="#8884d8" />
      
      </BarChart>
    );
  }
})

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