React Base Fiddle (JSX)

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

by Luis Custodio

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@15.6.2/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.6.2/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: 500px;
  height: 400px;
  background-color: #fff;
}

JavaScript 1.7

const {ResponsiveContainer, PieChart, Pie} = Recharts;

const RADIAN = Math.PI / 180;

const chartData = [
      {name: 'Page A', value: 200,},
      {name: 'Page B', value: 400,},
      {name: 'Page C', value: 500,},
];

const renderLegend = (props) => {
    const { cx, cy, midAngle, outerRadius, percent, name, value } = props;
    const sin = Math.sin(-RADIAN * midAngle);
    const cos = Math.cos(-RADIAN * midAngle);
    const sx = cx + (outerRadius + 5) * cos;
    const sy = cy + (outerRadius + 5) * sin;
    const mx = cx + (outerRadius + 15) * cos;
    const my = cy + (outerRadius + 15) * sin;
    const ex = mx + (cos >= 0 ? 1 : -1) * 12;
    const ey = my;
    const textAnchor = cos >= 0 ? 'start' : 'end';

    return (
      <g>
        <path
          d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
          stroke="black"
          fill="none"
        />
        <circle cx={ex} cy={ey} r={2} fill="black" stroke="none" />
        <text
          x={ex + (cos >= 0 ? 1 : -1) * 9}
          y={ey}
          textAnchor={textAnchor}
          fill="#333"
        >{`${name}`}</text>
        <text
          x={ex + (cos >= 0 ? 1 : -1) * 10}
          y={ey}
          dy={18}
          textAnchor={textAnchor}
          fill="#444"
        >
          {`${value} ` +
            (percent > 0.05 ? '' : `(${(percent * 100).toFixed(0)}%)`)}
        </text>
      </g>
    );
};

const renderPercentage = ({
    cx,
    cy,
    midAngle,
    innerRadius,
    outerRadius,
    percent
  }) => {
  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
    const x = cx + radius * Math.cos(-midAngle * RADIAN);
    const y = cy + radius * Math.sin(-midAngle * RADIAN);

    return (
      <text
        x={x}
        y={y}
        fill="white"
        textAnchor={x > cx ? 'start' : 'end'}
        dominantBaseline="central"
      >
        {percent > 0.05 ? `${(percent * 100).toFixed(0)}%` : ''}
      </text>
    );
  };

const SimpleLineChart = React.createClass({
	render ()...