React Base Fiddle (JSX)

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

by suhail

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>
<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;
}

Babel + JSX

const {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} = Recharts;
const data = [{
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100
  },
];
const SimpleLineChart = React.createClass({
  getInitialState() {
    return {
      opacity: {
        uv: 1,
        pv: 1,
        amt: 1
      },
      dataKeys: {
        uv: 'uv',
        pv: 'pv',
        amt: 'amt'
      }
    };
  },
  handleMouseEnter(o) {
    const {
      dataKey
    } = o;
    const {
      opacity
    } = this.state;
    const {
      dataKeys
    } = this.state;
    console.log(dataKeys)
    console.log(dataKey)
    console.log(dataKeys[dataKey.trim()].trim())
    if (dataKeys[dataKey] === dataKey) {
      this.setState({
        dataKeys: { ...dataKeys,
          [dataKey]: dataKeys[dataKey] + ' '
        }
      });
    } else {
      this.setState({
        dataKeys: { ...dataKeys,
          [dataKey.trim()]: dataKeys[dataKey.trim()].trim()
        }
      });
    }
  },

  render() {
    const {
      opacity
    } = this.state;
    const {
      dataKeys
    } = this.state;
    return ( <
      div >
      <
      LineChart 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 onClick = {
       ...