LineChart.jsx

var React = require('react');
var {Chart, Line, Axis, Layout} = require('react-chart');

var LineChart = React.createClass({
  propTypes: {
    data: React.propTypes.arrayOf(React.propTypes.shape({
      x: React.propTypes.number.isRequired,
      y: React.propTypes.number.isRequired
    })).isRequired,
    color: React.propTypes.string.isRequired
  },

  render() {
    return (
      <Chart width={400} height={300}>
        <Layout.Flex direction="row">
          <Layout.Flex.FlexItem grow={1}>
            <Grid verticalLines={true}>
              <Line points={this.props.data} color={this.props.color} />
            </Grid>
          </Layout.Flex.FlexItem>
          <Layout.Flex.FlexItem grow={0} basis={30}>
            <Axis
              direction="vertical"
              min={Axis.getMinWithGap(this.props.data, 'x', 0.05)}
              max={Axis.getMaxWithGap(this.props.data, 'x', 0.05)}
              steps={10}
              />
          </Layout.Flex.FlexItem>
        </Layout.Flex>
      </Chart>
    )
  }
});

module.exports = LineChart;