title: dynamic charts on react
body: <p>My app.js code is</p>
  
  <pre><code>/* App.js */
  var React = require('react');
  var Component = React.Component;
  var CanvasJSReact = require('./canvasjs.react');
  var CanvasJS = CanvasJSReact.CanvasJS;
  var CanvasJSChart = CanvasJSReact.CanvasJSChart;
  var updateInterval = 500;
  class App extends Component {
      constructor() {
          super();
          this.updateChart = this.updateChart.bind(this);
      }
      componentDidMount(){
          setInterval(this.updateChart, updateInterval);
      }
      updateChart() {
          var dpsColor, dpsTotal = 0, deltaY, yVal;
          var dps = this.chart.options.data[0].dataPoints;
          var chart = this.chart;
          for (var i = 0; i &lt; dps.length; i++) {
              deltaY = Math.round(2 + Math.random() *(-2-2));
              yVal = deltaY + dps[i].y &gt; 0 ? (deltaY + dps[i].y &lt; 100 ? dps[i].y + deltaY : 100) : 0;
              dpsColor = yVal &gt;= 90 ? "#e40000" : yVal &gt;= 70 ? "#ec7426" : yVal &gt;= 50 ? "#81c2ea" : "#88df86 ";
              dps[i] = {label: "Core "+(i+1) , y: yVal, color: dpsColor};
              dpsTotal += yVal;
          }
          chart.options.data[0].dataPoints = dps;
          chart.options.title.text = "CPU Usage " + Math.round(dpsTotal / 6) + "%";
          chart.render();
      }
      render() {
          const options = {
              theme: "dark2",
              title: {
                  text: "CPU Usage"
              },
              subtitles: [{
                  text: "Intel Core i7 980X @ 3.33GHz"
              }],
              axisY: {
                  title: "CPU Usage (%)",
                  suffix: "%",
              maximum: 100
              },
              data: [{
                  type: "column",
                  yValueFormatString: "#,###'%'",
                  indexLabel: "{y}",
                  dataPoints: [
                      { label: "Core 1", y: 68 },
                      { label: "Core 2", y: 3 },
                      { label: "Core 3", y: 8 },
                      { label: "Core 4", y: 87 },
                      { label: "Core 5", y: 2 },
                      { label: "Core 6", y: 6 }
                  ]
              }]
          }
          return (
              &lt;div&gt;
                  &lt;CanvasJSChart options = {options}
                       onRef={ref =&gt; this.chart = ref}
                  /&gt;
                  {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
              &lt;/div&gt;
          );
      }
  }
  module.exports = App;                              
  </code></pre>
  
  <p>and the error is </p>
  
  <blockquote>
    <p>Error: Element type is invalid: expected a string (for built-in
    components) or a class/function (for composite components) but got:
    undefined. You likely forgot to export your component from the file
    it's defined in, or you might have mixed up default and named imports.</p>
  </blockquote>
  
  <p>Check the render method of <code>App</code>.
  ▶ 20 stack frames were collapsed.</p>