ExpenseChart.js

import React, {Component} from 'react';
import ReactHighcharts from '../ReactHighcharts';
import Exporting from 'highcharts/modules/exporting.src';
import OfflineExporting from 'highcharts/modules/offline-exporting.src';
import './ExpenseChart.css';

const options = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec'
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: 'Tokyo',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

  }, {
    name: 'New York',
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

  }, {
    name: 'London',
    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

  }, {
    name: 'Berlin',
    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

  }]
};

class ExpenseChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: options
    }
  }

  chartOptions = (chartType) => {
    options.chart.type = chartType;
    return Object.assign({}, options);
  };

  handleSelectChange = (e) => {
    const newChartOptions = Object.assign({}, this.chartOptions(e.target.value));
    this.setState({
      options: newChartOptions
    });
  };

  render() {
    return (
      <div className="expense-chart">
        <div id="expense-chart" className="HolyGrail">
          <h1>Grafico 1</h1>
          <div className="HolyGrail-body">
            <div className="HolyGrail-content">
              <ReactHighcharts container="chart"
                               options={this.state.options}
                               modules={[Exporting, OfflineExporting]}/>
            </div>
            <aside className="HolyGrail-ads">
              <select name="chartType" id="chartType"
                      onChange={this.handleSelectChange}
                      value={this.state.options.chart.type}>
                <option value="column">Colunas</option>
                <option value="bar">Barras</option>
              </select>
            </aside>
          </div>
        </div>
      </div>
    );
  }
}

export default ExpenseChart;

ReactHighcharts.js

import React, {Component} from 'react';
import Highcharts from 'highcharts';

class ReactHighcharts extends Component {
  componentDidMount() {
    // Extend Highcharts with modules
    if (this.props.modules) {
      this.props.modules.forEach(function (module) {
        module(Highcharts);
      });
    }
    this.chart = new Highcharts[this.props.type || "Chart"](
      this.props.container,
      this.props.options
    );
  }

  componentWillUnmount() {
    this.chart.destroy();
  }

  render() {
    return (
      <div id={this.props.container}/>
    )
  }
}

export default ReactHighcharts;