title: react-chartjs-2 Line Chart not updating with State
body: <p>I know this issue is open in several forms but no one has provided any solution .
  So what i'm facing is that react-chartjs-2 Line Chart is not updating with component state Here is the code </p>
  
  <pre><code>import React, { Component } from 'react';
  import { Line, Chart } from "react-chartjs-2"
  import { ipcRenderer } from "electron"
  
  
  class Network extends Component {
      state = {
          data : {
              networkUpload : [0, 0, 0, 0, 0],
              networkDownlaod : [0, 0, 0, 0, 0]
          }
        }
  
    constructor(props){
      super(props);
      ipcRenderer.send("get-dynNet-data")
    }
  
  
    componentDidMount(){    
      let data = {...this.state.data};
      ipcRenderer.on('network-data', (e, newData)=&gt;{
          data.networkUpload.splice(0, 1);
          data.networkUpload.push(newData.networkUpload);
          data.networkDownlaod.splice(0, 1)
          data.networkDownlaod.push(newData.networkDownlaod);
          this.setState({data});
      });
    }
  
    componentWillUnmount(){
      ipcRenderer.removeAllListeners();
    }
  
    // Decide Weather to show transfer rate in KBPS (kilobytes per sec) or MBPS (megabytes per sec)
    transferRate (dataRate){
      let lastData = dataRate[dataRate.length - 1];
      if(lastData &gt; 1024){
        let mbps = lastData / 1024;
        return `${mbps} Mbps`;
      }else{
        return `${lastData} Kbps`;
      }
    }
  
  
  
  
    render() {
    //  Data for Line Chart "data" props  
    let options = {
        labels : ["5 sec", "4 sec", "3 sec", "2 sec", "1 sec"],
        datasets:[{
          label : "Download",
          backgroundColor : 'rgba(255, 99, 132, 1)',
          data : this.state.data.networkDownlaod,
          fill : false
        },
      {
          label : "Upload",
          backgroundColor : 'rgba(255, 205, 86, 1)',
          data : this.state.data.networkUpload,
          fill : false
      }],
  
  
      }
  
      // Static data for LineChart "option" props
      let axisOptions = {
        scales: {
          yAxes: [{
              display: true,
              ticks: {
                  // suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                  suggestedMax: 10,
                  // OR //
                  beginAtZero: true,   // minimum value will be 0.
  
              }
          }]
      },
      maintainAspectRatio: false
      }
  
    // Legend Visibility
    let legend = {
      display: true
    }
  
      return (
        &lt;div&gt;
          &lt;h3 className="text-grey text-center"&gt;NETWORK USAGE&lt;/h3&gt;
          &lt;Line width={5} height={150} data={options} legend={legend} className="network-chart" options={axisOptions} /&gt;
          &lt;h6 className="net-upload text-grey clearfix"&gt;Upload : {this.transferRate(this.state.data.networkUpload)}&lt;/h6&gt;
          &lt;h6 className="net-download text-grey"&gt;Download : {this.transferRate(this.state.data.networkDownlaod)}&lt;/h6&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Network;
  </code></pre>
  
  <p>All other types of charts are updating well with the state except The Line chart
  Using key={Math.random()} with chart component works but instead of updating the chart it re Render the whole Line chart which is not what i want. Can any body Figure out the issue Please  </p>