A composed chart

by Shubhi Saxena

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 {PropTypes} = React;
const {ComposedChart, Line, Area, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [{name: 'Citigroup Inc. Group', prevUsage: 277172437, currUsage:  328527763.39, prevGMV:  1629960076.08, currGMV:  1825881363.73 },
              {name: 'UBS AG Group', prevUsage:  47864568.80 , currUsage:  81059918.60 , prevGMV:  336798738.01 , currGMV:  468285437.22 },
              {name: 'JPMorgan Chase & Co. Group', prevUsage:  34129645.14 , currUsage:  64684504.42 , prevGMV:  391464141.63 , currGMV:  443476798.49 },
              {name: 'Morgan Stanley Group.', prevUsage:  194769059.35 , currUsage:  205712196.13 , prevGMV:  666954668.21 , currGMV:  715100358.24 },
              {name: 'Deutsche Bank AG Group', prevUsage:  165543151.71 , currUsage:  171765721.59 , prevGMV:  1302828138.76 , currGMV:  1510251974.14 },
              {name: 'Barclays plc Group', prevUsage:  176788075.09 , currUsage:  176745747.15 , prevGMV:  75828044.89 , currGMV:  74962221.33 },
			  {name: 'Nomura Holdings, Inc. Group', prevUsage:  46166895.43 , currUsage:  46192302.25 , prevGMV:  148231163.94 , currGMV:  148777360.38 }
              ];

const LineBarAreaComposedChart = React.createClass({
	render () {
  	return (
    	<ComposedChart width={1200} height={600} data={data}
            margin={{top: 20, right: 20, bottom: 20, left: 20}}>
          <CartesianGrid stroke='#f5f5f5'/>
          <XAxis dataKey="name"/>
          <YAxis type="number" yAxisId="left" orientation="left"/>
          <YAxis type="number" yAxisId="right" orientation="right"/>
          <Tooltip />
          <Legend />
          
          <Bar dataKey='prevUsage' barSize={20} fill='#413ea0'  yAxisId="left"/>
          <Bar dataKey='currUsage' barSize={20} fill='#71807d'  yAxisId="left"/>
          <Line type='monotone' dataKey='prevGMV' strokeWidth={0} stroke='#ff7300' dot={{ stroke: '#ff7300', strokeWidth: 5.5 }} yAxisId="right" />
          <Line type='monotone'...