Investor Signup Chart

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

by Sushil Mahajan

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: 1000px;
  background-color: #fff;
}

JavaScript 1.7

const {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
  {date: 969647400000, value: 14, },
  {date: 972239400000, value: 10, },
  {date: 974917800000, value: 30, },
  {date: 977509800000, value: 48, },
  {date: 980188200000, value: 50, },
  {date: 982188200000, value: 90, },
  {date: 988188200000, value: 10, },
  {date: 990188200000, value: 20, },
  {date: 991188200000, value: 30, },
  {date: 996188200000, value: 2, },
];

const convertToGrowData = (data) => {
	let sum = 0;
	const chartData = data.map((d) => {
  	sum += d.value;
  	return {
    	date: d.date,
      value: sum,
    }
  });
  return chartData;
};

const chartData = convertToGrowData(data);

console.log("chartData----", chartData);

const toReadableDate = (dateUTC) => {
	const d = new Date(dateUTC);
  return d.getMonth()+"/"+d.getDate()+"/"+d.getFullYear();
}

const renderCustomizedXTick = (props) => {
	const { x, y, payload } = props;
  const rot = `rotate(-45, ${x+10}, ${y+60})`;
  return (
  	<text x={x} y={y + 10} textAnchor="middle" transform={rot} dominantBaseline="hanging">	
      {toReadableDate(payload.value)}
    </text>
  );
};
const renderCustomizedYTick = (props) => {
	const { x, y, payload } = props;
  return (
  	<text x={x-20} y={y-5} textAnchor="middle" dominantBaseline="hanging">	
      {payload.value}
    </text>
  );
};
const CustomTooltip  = React.createClass({
  propTypes: {
    type: PropTypes.string,
    payload: PropTypes.array,
    label: PropTypes.string,
  },

  render() {
  	const { payload, label } = this.props;
    const date = toReadableDate(label);
    const value = (payload[0]) ? payload[0].value : '';
    console.log("value", value);
    return (
  		<div className="custom-tooltip">
  			<p className="date">{`Date: ${date}` }</p>
  			<p className="value">{`Value: ${value}`}</p>
  		</div>
  	);
  }
});

const SimpleLineChart = React.createClass({
	render () {
  	return (
    <div>
    	<p>Investor Sign Up</p>
   ...