A composed chart that has labels of axes

by shakedk

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 {ComposedChart, Scatter, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
  { index: 10000, red: 1643, blue: 790 },
  { index: 1666, red: 182, blue: 42 },
  { index: 625, red: 56, blue: 11 },
  { index: 300, redSlope: 0 },
  { index: 600, redSlope: 1000 },
  { index: 5000, redSlope: 1522 },
  { index: 400, redSlope: 2000 },
  { index: 600, blueSlope: 0 },
  { index: 10000, blueSlope: 678 },
];

const ScatterWithLine = React.createClass({
	render () {
  	return (
      <ComposedChart
        width={500}
        height={400}
        data={data}
        margin={{
          top: 20, right: 80, bottom: 20, left: 20,
        }}
      >
        <CartesianGrid stroke="#f5f5f5" />
        <Tooltip />
        <Legend />

        <XAxis dataKey="index" type="number" label={{ value: 'Index', position: 'insideBottomRight', offset: 0 }} />
        <YAxis unit="ms" type="number" label={{ value: 'Time', angle: -90, position: 'insideLeft' }} />
        <Scatter name="red" dataKey="red" fill="red" />
        <Scatter name="blue" dataKey="blue" fill="blue" />
        <Line dataKey="blueSlope" stroke="blue" dot={false} activeDot={false} legendType="none" />
        <Line dataKey="redSlope" stroke="red" dot={false} activeDot={false} legendType="none" />
      </ComposedChart>
    );
  }
})

ReactDOM.render(
  <ScatterWithLine />,
  document.getElementById('container')
);