ReactChartJS.js based on @MatthewHerbst @ https://github.com/reactjs/react-chartjs/issues/112

ReactChartJS.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ChartJS from 'chart.js';

/**
 * React Wrapper Component for ChartJS charts
 * Based on comment by @MatthewHerbst @https://github.com/reactjs/react-chartjs/issues/112
 * 
 * For chart documentation see @see http://www.chartjs.org/docs/latest
 */
class ReactChartJS extends Component {
  static propTypes = {
    height: PropTypes.number,
    width: PropTypes.number,
    options: PropTypes.shape({
      scales: PropTypes.any,
      animation: PropTypes.any,
    }),
    type: PropTypes.oneOf(['line', 'bar', 'radar', 'doughnut', 'pie', 'polarArea', 'bubble', 'scatter']).isRequired,
    data: PropTypes.shape({
      labels: PropTypes.array,
      datasets: PropTypes.arrayOf(PropTypes.shape({
        data: PropTypes.array,
      }))
    }).isRequired
  };

  static defaultProps = {
    options: {},
    width: 600,
    height: 400,
  };

  componentDidMount() {
    if (this.props.type) {
      this.chart = new ChartJS(this.canvasEl, {
        type: this.props.type,
        data: this.props.data,
        options: this.props.options
      });
    }
  }

  componentDidUpdate() {
    if (this.chart) {
      this.chart.data.datasets = this.props.data.datasets;
      this.chart.data.labels = this.props.data.labels;
      //this.chart.options = this.props.options; // hm this borks it
      this.chart.update();
    }
  }

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

  setRef = (el) => {
    this.canvasEl = el;
  };

  render() {
    return (
      <canvas ref={this.setRef} height={this.props.height} width={this.props.width} />
    );
  }
}

export default ReactChartJS;