title: Issues with react-chartjs-2
body: <p>I have issue with react-chartjs-2 and chartjs-plugin-streaming, my goal was to create a live graph with stream, but it ends up in error and I don't quite know why. Anyhow, my imports are like this:</p>
  
  <pre><code>import { Chart, Bubble } from 'react-chartjs-2';
  import ChartStream from 'chartjs-plugin-streaming';
  </code></pre>
  
  <p>Then right below that is this part:</p>
  
  <pre><code>Chart.pluginService.register(ChartStream);
  </code></pre>
  
  <p>and then theres's this part in component render</p>
  
  <pre><code>&lt;Bubble
      data={{
          labels: ['demo'],
          datasets: [{
              backgroundColor: 'rgba(75,192,192,1)',
              data: []
          }]
      }}
      options={{
      plugins: {
          streaming: {
              onRefresh: function(chart) {
                  chart.data.datasets[0].data.push({
                      x: Date.now(),
                      y: Math.random() * 100,
                      r: 5
                  });
              },
              delay: 500,
              refresh: 1000,
              frameRate: 30,
              duration: 3600000 // 3600000 = 1hour
          }
      },
      scales: {
          xAxes: [{
              type: 'realtime',
              id: 'x-axis-0'
          }]
      }
  }}
  /&gt;
  </code></pre>
  
  <p>first error that happens right on navigation is this:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot set property 'options' of undefined
        at core.controller.js:51
        at Array.forEach ()
        at n (core.controller.js:50)
        at e.update (core.controller.js:340)
        at e.construct (core.controller.js:121)
        at new e (core.js:7)
        at t.renderChart (index.js:228)
        at t.componentDidMount (index.js:53)
        at e.notifyAll (CallbackQueue.js:76)
        at r.close (ReactReconcileTransaction.js:80)
    because in core.controller.js of chartjs is this part:</p>
  </blockquote>
  
  <pre><code>function updateConfig(chart) {
          var newOptions = chart.options;
  
          // Update Scale(s) with options
          if (newOptions.scale) {
              chart.scale.options = newOptions.scale;
          } else if (newOptions.scales) {
              newOptions.scales.xAxes.concat(newOptions.scales.yAxes).forEach(function(scaleOptions) {
                  chart.scales[scaleOptions.id].options = scaleOptions;
              });
          }
  
          // Tooltip
          chart.tooltip._options = newOptions.tooltips;
      }
  </code></pre>
  
  <p>the part that fails is this:</p>
  
  <pre><code>chart.scales[scaleOptions.id].options = scaleOptions;
  </code></pre>
  
  <p>and it's caused by these options I set before, upon debugging there is no x-axis-0 in chart.scales, only y-axis-0</p>
  
  <pre><code>scales: {
      xAxes: [{
          type: 'realtime',
          id: 'x-axis-0'
      }]
  }
  </code></pre>
  
  <p>Anyone know how to work around this issue?</p>