Simple LineChart

A demo of simple lineChart of Recharts.

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>
<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 {
    BarChart,
    ResponsiveContainer,
    Bar,
    Line,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Legend
} = Recharts;
const data = [{
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400
}, {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210
}, {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290
}, {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000
}, {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181
}, {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500
}, {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100
}, ];
const SimpleLineChart = React.createClass({
    render() {
        return ( <
            ResponsiveContainer width = "100%"
            height = {
                500
            } >
            <
            BarChart layout = "vertical"
            width = "100%"
            height = {
                500
            }
            data = {
                data
            }
            barCategoryGap = {
                1
            }
            barGap = {
                50
            }
            margin = {
                {
                    top: 20,
                    right: 20,
                    bottom: 20,
                    left: 20
                }
            } >
            <
            CartesianGrid stroke = '#f5f5f5' / >
            <
            XAxis interval = {
                0
            }
            type = "number" / >
            <
            YAxis width = {
                180
            }
            dx = {-10
            }
            interval = {
                0
            }
            dataKey = "name"
            type = "category" / >
            <
            Tooltip cursor = {
                {
                    fill: '#fff'
                }
            }
            /> <
            Legend / >

            <
            Bar dataKey = 'pv'
            fill = '#f19135'
            radius = {
  ...