how do add data to a line chart without redraw

[mikedevita]

i guess im confused on how to implement this with a dynamic loading of data..

This is basically my code to test this out..

import { Line } from 'react-chartjs';

class SensorDetail extends Component {
  constructor(props){
    super(props);
    this.state = {
      chartData: {
        labels: ['1','2','3','4','5','6','7'],
        datasets: [{
          data: [33,37,22,44,64,44,51]
        }]
      }
    };

  }

  componentDidMount(){
    var self = this;

    setTimeout(function(){
      let newState = Object.assign({}, self.state);

      newState.chartData.labels.push('8');
      newState.chartData.datasets[0].data.push(100);

      console.log(newState, 'pushed into chartdata');
      self.setState(newState);
    }, 5000);
  }

  render(){
    const { chartData } = this.state;

    let renderChartComponent = function(data){
      return (<Line data={data} />);
    }

    return(<div className='container'>
      <h2>Sensor Detail</h2>
      {renderChartComponent(chartData)}
    </div>);
  }
}

This all works great for loading the initial data, The chart displays fine, however after the timer hits 5 seconds later. i get an error and the chart doesn't update.

If I add a redraw to the component then it renders fine after 5 seconds.. problem is this is ugly from a UI perspective and i know chart.js supports using.addData()and.update()` my problem is understanding how your library expects this to be handled..

[bramschulting]

@mikedevita have you figured out a way to do this? I'd like to append data to a dataset and I'm running into similar problems.

[mikedevita]

i don't think its possible with chart.js i ended up moving to highcharts