title: Graph streaming real-time data with react and chartjs
body: <p>I want to stream data in real-time with this <a href="https://nagix.github.io/chartjs-plugin-streaming/" rel="nofollow noreferrer">plugin</a>. But currently, my chart displays the same dataset and remains static. Even though I am following the react example of this <a href="https://nagix.github.io/chartjs-plugin-streaming/" rel="nofollow noreferrer">website</a> Below is the code I used: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import {Line} from 'react-chartjs-2';
  import 'chartjs-plugin-streaming';
  var createReactClass = require('create-react-class');
  
  const data = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Price',
          fill: false,
          lineTension: 0.1,
          backgroundColor: 'rgba(75,192,192,0.4)',
          borderColor: 'rgba(75,192,192,1)',
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: 'rgba(75,192,192,1)',
          pointBackgroundColor: '#fff',
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: 'rgba(75,192,192,1)',
          pointHoverBorderColor: 'rgba(220,220,220,1)',
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: [65, 59, 80, 81, 56, 55, 40]
        }
      ]
    };
    
    export default createReactClass({
      displayName: 'LineExample',
      render() {
        return (
          &lt;div&gt;
            &lt;Line 
            data={data}
            options={{
                scales: {
                    xAxes: [{
                      realtime: {
  
                          onRefresh: function(chart) {
                              data.dataset.data.push({
                                x: Date.now(),
                                y: Math.random()
                              });
                          },
                          delay: 2000
                        }
                      }]
                }
            }}
             /&gt;
          &lt;/div&gt;
        );
      }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>What could be the problem? 
  Thanks!</p>