Area chart with two areas side by side

by needlethread

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 {AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip} = Recharts;
const data = [
  {
    "x": 0,
    "y1": 0.5
  },
  {
    "x": 0.125,
    "y1": 0.5
  },
  {
    "x": 0.25,
    "y1": 0.5
  },
  {
    "x": 0.375,
    "y1": 0.5
  },
  {
    "x": 0.5,
    "y1": 0.4393912894677223
  },
  {
    "x": 0.625,
    "y1": 0.3691926374027012
  },
  {
    "x": 0.75,
    "y1": 0.3166058997555393
  },
  {
    "x": 0.875,
    "y1": 0.2753608562680834
  },
  {
    "x": 1,
    "y1": 0.24197072451914334
  },
  {
    "x": 1.125,
    "y1": 0.21431035639840246
  },
  {
    "x": 1.25,
    "y1": 0.19099456461342262
  },
  {
    "x": 1.375,
    "y1": 0.1710729168973537
  },
  {
    "x": 1.5,
    "y1": 0.15386632280545526
  },
  {
    "x": 1.625,
    "y1": 0.1388734154351271
  },
  {
    "x": 1.75,
    "y1": 0.1257139203127705
  },
  {
    "x": 1.875,
    "y1": 0.11409283008980382
  },
  {
    "x": 2,
    "y1": 0.10377687435514865
  },
  
  {
    "x": 2,
    "y2": 0.10377687435514865
  },
  {
    "x": 2.125,
    "y2": 0.09457856309230506
  },
  {
    "x": 2.25,
    "y2": 0.08634506377726114
  },
  {
    "x": 2.375,
    "y2": 0.07895025945637807
  },
  {
    "x": 2.5,
    "y2": 0.07228895706727251
  },
  {
    "x": 2.625,
    "y2": 0.06627258402738974
  },
  {
    "x": 2.75,
    "y2": 0.060825936789378754
  },
  {
    "x": 2.875,
    "y2": 0.055884687090435294
  },
  {
    "x": 3,
    "y2": 0.0513934432679231
  },
  {
    "x": 3.125,
    "y2": 0.04730422448945816
  },
  {
    "x": 3.25,
    "y2": 0.04357524646963629
  },
  {
    "x": 3.375,
    "y2": 0.04016994517778997
  },
  {
    "x": 3.5,
    "y2": 0.03705618452374812
  },
  {
    "x": 3.625,
    "y2": 0.034205607808109724
  },
  {
    "x": 3.75,
    "y2": 0.031593102636969295
  },
  {
    "x": 3.875,
    "y2": 0.02919635621630427
  },
  {
    "x": 4,
    "y2": 0.026995483256594024
  }
];

const SimpleAreaChart = React.createClass({
	render () {
  	return (
    	<AreaChart width={600} height={400} data={data}
           ...