chart not updating

I’m trying to get my chart to update dynamically as new data comes in (from socket.io) so I have a method onChange(data) that is used as the callback function of setState called when the new data comes in.

The Chart however does not update itself… unless I refresh/resize the browser. If I set redraw={true}, then the chart updates but it seems to refresh the whole page (?) and kills the performance for the rest of the page…

Any idea what I’m doing wrong here?

import React from 'react'
import ReactDOM from 'react-dom'

import {Line} from 'react-chartjs-2'

module.exports =  class MyChart extends React.Component {

  constructor(props)
  {
      super(props)
      this.buffersize

      this.data = {
        labels: [],
        datasets: [
          {/
            label: 'My Chart',
            data: []
          }
        ]
      }

  }

  onChange(newdata) {

    const size = this.data.datasets[0].data.length
    if (size >= this.buffersize)
    {
      this.data.datasets[0].data.shift()
      this.data.labels.shift()
    }

    this.data.labels.push(newdata.label)
    this.data.datasets[0].data.push(newdata.value)

  }

  render()
  {
    return (
      <Line data={this.data}/>
    )
  }

}

[nealoke]

@dmichel76 Don’t you need to use the redraw prop like so? (This did it for me)

<Line data={this.data} redraw />

[jim-alexander]

@gor181 Thanks!

just using key={Math.random()} in my chartjs component did the trick.