React Base Fiddle (JSX)

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/react-dom/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/react-dom/dist/react-dom-server.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 {LineChart, XAxis, Line, CartesianGrid, Tooltip} = Recharts;
const data = [
      {name: '60sec', channels: 4500, cps: 100},
      {name: '55sec', channels: 4000, cps: 400},
      {name: '50sec', channels: 3000, cps: 398},
      {name: '45sec', channels: 2000, cps: 9800},
      {name: '40sec', channels: 2780, cps: 3908},
      {name: '35sec', channels: 1890, cps: 4800},
      {name: '30sec', channels: 2390, cps: 3800},
      {name: '25sec', channels: 3490, cps: 4300},
      {name: '20sec', channels: 2780, cps: 908},
      {name: '15sec', channels: 890, cps: 1800},
      {name: '10sec', channels: 590, cps: 3800},
      {name: '5sec', channels: 8490, cps: 300},

];
const CustomizedLabel = React.createClass({
  render () {
    const {x, y, stroke, payload} = this.props;
		return <text x={x} y={y} dy={-4} fill={stroke} fontSize={8} textAnchor="middle">{payload.value}</text>
  }
});


const TinyLineChart = React.createClass({
	render () {
  	return (
    	<LineChart width={300} height={80} data={data}
        margin={{top: 5, right: 10, left: 10, bottom: 0}}>
        <CartesianGrid strokeDasharray="2 2"/>

        <Line type='monotone' dataKey='channels' stroke='#8884d8' strokeWidth={2} label={<CustomizedLabel />}/>
        <Line type="monotone" dataKey="cps" stroke="#82ca9d"/>
        <Tooltip/>
        <XAxis dataKey="name" fontSize={10}/>
      </LineChart>
    );
  }
})

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