React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<div id="container"></div>

Babel + JSX

class MyChart extends React.Component {
  constructor(props) {
  	super(props);
    this.usageChart = null;
  }
 
  componentDidMount() {
    let chartContext = document.getElementById("proc_usage");
    let initialDataIdle = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100];
    let initialDataOther = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

    console.log("Creating chart");
    this.usageChart = new Chart(chartContext, {
      type: "line",
      data: {
        datasets: [
          { label: "User", fill: true, data: initialDataOther, backgroundColor: "rgba(244, 143, 177, 0.8)" },
          { label: "System", fill: true, data: initialDataOther, backgroundColor: "rgba(255, 235, 59, 0.8)" },
          { label: "IRQ", fill: true, data: initialDataOther, backgroundColor: "rgba(100, 181, 246, 0.8)" },
          { label: "Idle", fill: true, data: initialDataIdle, backgroundColor: "rgba(150, 150, 150, 0.4)" }
        ]
      },
      options: {
        scales: {
          xAxes: [{ stacked: true }],
          yAxes: [{ stacked: true }]
        },
        plugins: {
          stacked100: { enable: true }
        }
      }
    });
    console.log("Chart created: " + this.usageChart.data);
    this.setState(this.state);
    this.forceUpdate();
  }  
  
  componentDidUpdate() {
    let usages = [];
  	usages['User'] = [80, 80, 80, 80, 80, 80, 80, 80, 80, 80];
    usages['System'] = [55, 55, 55, 55, 55, 55, 55, 55, 55, 55];
    usages['IRQ'] = [45, 45, 45, 45, 45, 45, 45, 45, 45, 45];
    usages['Idle'] = [15, 15, 15, 15, 15, 15, 15, 15, 15, 15];

    console.log("updating chart");
    this.usageChart.data.datasets.forEach((dataset) => {
      dataset.data.shift();
      dataset.data = usages[dataset.label];
    });
    this.usageChart.update();
    console.log(this.usageChart.data);
    console.log("chart updated");

  }
  
  render() {
    return <canvas id="proc_usage"></canvas>;
  }
}

ReactDOM.render(
  <MyChart/>,
  document.getElementById("container"));