title: react-chartjs state update error
body: <p>I made a React.JS component, which draws charts using <code>react-chartjs</code> wrapper around the <code>chart.js</code> library. I am getting an error on update, as if my data was corrupted. I am thinking that maybe something is wrong with the context, maybe, as I don't see anything wrong with my code. When the chart is drawn first time, it shows up fine. <code>setState</code> causes: <code>Uncaught Type Error: Cannot read property 'points' of undefined(...)</code> happens at <code>core.js</code> anonymous function inside <code>set.data.forEach()</code>.
  Below is my code:</p>
  
  <pre><code>class Usage extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        active: true,
        new: false,
        chartData: []
      }
    }
  
    componentWillMount() {
      this.buildChartData();
    }
  
  buildChartData() {
      const daysInMonth = 30;
      const graphs = [
        {title: 'Active Users', key: 'active', color: 'rgba(255, 99, 132, 1)'}, 
        {title: 'New Users', key: 'new', color: 'rgba(50, 25, 255, 1)'}
      ];
      let datasets = [];
      let labels = [];
      let labelsDone = false;
  
      graphs.forEach((graph) =&gt; {
  
        if (this.state[graph.key]) {
          let data = [];
          let backgroundColor = [];
          let borderColor = [];
  
          // XXX !!! for now
          if (!labelsDone) {
            for (let i = daysInMonth; i &gt; 0; i--) {
              let d = new Date();
              // we stop yesterday
              d.setDate(d.getDate() - i);
              labels.push( (d.getUTCMonth() + 1) + '/' + d.getUTCDate() );
            }
          }
          labelsDone = true;
  
          for (let i = daysInMonth; i &gt; 0; i--) {
            let d = new Date();
            // we stop yesterday
            d.setDate(d.getDate() - i);
            data.push( Math.round(Math.random() * 200));
            borderColor.push(graph.color);
            backgroundColor.push('rgba(0,0,0,0)');
          }
          let dataset = {
            data: data, 
            borderWidth: 1, 
            label: graph.title,
            fillColor: 'rgba(0,0,0,0.0)',
            strokeColor: borderColor
          };
          datasets.push(dataset);
        }
      })
      this.setState({
        chartData: {datasets: datasets, labels: labels}
      });
    }
  
    toggleCheckbox = label =&gt; {
      switch(label) {
        case 'Active Users':
          this.setState({
            active: !this.state.active
          });
          break;
        case 'New Users':
          this.setState({
            new: !this.state.new
          });
          break;
        default:
          console.log('Error: unhandled action');
          break;
      }
      this.buildChartData();
    }
  
    render() {
      return (
          &lt;div style={{display: 'flex', flexDirection: 'row'}}&gt;
            &lt;div style={{flexDirection: 'column', marginLeft: '50px', marginRight: '50px', flexGrow: 1}}&gt;
              &lt;div style={{height: '20vh'}}&gt;
                &lt;div style={{flexDirection: 'row'}}&gt;
                  &lt;Checkbox
                    label={'Active Users'}
                    handleCheckboxChange={this.toggleCheckbox}
                    isChecked={true}
                  /&gt;
                  &lt;Checkbox
                    label={'New Users'}
                    handleCheckboxChange={this.toggleCheckbox}
                    isChecked={false}
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style={{height: '75vh'}}&gt;
                &lt;Line data={this.state.chartData} options={chartOptions} /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
    }
  }
  
  export default Usage;
  </code></pre>
  
  <p>I printed out smaller dataset, where the same thing happens. Don't see any difference except for randomly generated values. Still, the initial rendering is fine, yet <code>setState</code>, which I understand calls <code>update</code> results in the above error.</p>