Multiple plotly graphs not showing up on webpage with ReactJS

plotly.js
1

I also posted this on StackOverflow, but did not get any response: http://stackoverflow.com/questions/41227224/multiple-plotly-graphs-not-showing-up-on-webpage?noredirect=1#comment69655134_41227224. I was following the ReactJS tutorial here: http://academy.plot.ly/react/3-with-plotly/, and trying to create a webpage with multiple graphs on it. However, the rendered webpage looks really screwed up, with the first graph way off center, and the second and third graphs not showing up at all. I created a Plot class, similar to what they had in the tutorial:

import React from 'react';

export default class Plot extends React.Component {
  constructor(props){
      super(props);
      this.state = {
        dates: [1, 2, 3],
        temps: [1, 2, 3],
        type: "scatter",
        plot_id: "plot"
      };
  }

  drawPlot() {
    Plotly.newPlot(this.state.plot_id, [{
      x: this.props.xData,
      y: this.props.yData,
      type: this.props.type
    }], {
      margin: {
        t: 0, r: 0, l: 30
      },
      xaxis: {
        gridcolor: 'transparent'
      }
    }, {
      displayModeBar: false
    });
  }

  componentDidMount() {
    this.drawPlot();
  }

  componentDidUpdate() {
    this.drawPlot();
  }

  render() {
    return (
      <div id={this.state.plot_id}></div>
    );
  }

}

Below is the code for rendering the webpage:

import React from 'react';
import Plot from './Plot';

export default class Analytics extends React.Component {
  constructor(props){
      super(props);
      this.state = {
      };
  }

  render() {
    return (
      <div>
        <div>
          <h2>Graph 1</h2>
          <Plot
            x = {[1,2,4]}
            plot_id={"Plot1"}
          />
        </div>
        <div>
          <h2>Graph 2</h2>
          <Plot
            x={[0,1,2]}
            y={[2,3,6]}
            type={"bar"}
            plot_id={"Plot2"}
          />
        </div>
          <div>
            <h2>Graph 3</h2>
            <Plot
              x={[0,1,2,3,4]}
              y={[2,3,6,6,7]}
              type={"bar"}
              plot_id={"Plot3"}
            />
          </div>
      </div>
    );
  }

}

Any help would be appreciated.