React Highcharts example 1

HTML

<script src="https://fb.me/react-15.0.1.min.js"></script>
<script src="https://fb.me/react-dom-15.0.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://www.highcharts.com/samples/data/usdeur.js"></script>
<!-- In usage with Node.js the script tags above needs to be replaced with "require" -->
<!--
var React = require('react'),
    ReactDOM = require('react-dom'),
    Highcharts = require('highcharts'),
    addFunnel = require('highcharts/modules/funnel'),
    usdeur = require('path-to-data');
-->
<!-- Read more about loading highcharts in Node.js here: http://www.highcharts.com/docs/getting-started/install-from-npm -->

<div id="react-app"></div>
<div id="react-stock"></div>

JavaScript

var Chart = React.createClass({
    // When the DOM is ready, create the chart.
    componentDidMount: function() {
      // Extend Highcharts with modules
      if (this.props.modules) {
        this.props.modules.forEach(function(module) {
          module(Highcharts);
        });
      }
      // Set container which the chart should render to.
      this.chart = new Highcharts[this.props.type || "Chart"](
        this.props.container,
        this.props.options
      );
    },
    //Destroy chart before unmount.
    componentWillUnmount: function() {
      this.chart.destroy();
    },
    //Create the div which the chart will be rendered to.
    render: function() {
      return React.createElement('div', {
        id: this.props.container
      });
    }
  }),
  element,
  element2;


// Create and render element
element = React.createElement(Chart, {
  container: 'chart',
  options: {
    chart: {
      type: 'line',
      marginRight: 100
    },
    title: {
      text: 'React example',
      x: -50
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b> ({point.y:,.0f})',
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
          softConnector: true
        },
        neckWidth: '30%',
        neckHeight: '25%'

        //-- Other available options
        // height: pixels or percent
        // width: pixels or percent
      }
    },
    legend: {
      enabled: false
    },
    series: [{
      name: 'Unique users',
      data: [
        ['Website visits', 15654],
        ['Downloads', 4064],
        ['Requested price list', 1987],
        ['Invoice sent', 976],
        ['Finalized', 846]
      ]
    }]
  }
});
element2 = React.createElement(Chart, {
  container: 'stockChart',
  type: 'stockChart',
  options: {
    rangeSelector: {
      selected: 0
    },
    title: {
      text: 'USD to EUR exchange rate'
    },
    tooltip: {
      style: {
   ...