react-chartjs state update error

Question

I made a React.JS component, which draws charts using react-chartjs wrapper around the chart.js 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. setState causes: Uncaught Type Error: Cannot read property 'points' of undefined(...) happens at core.js anonymous function inside set.data.forEach(). Below is my 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) => {

      if (this.state[graph.key]) {
        let data = [];
        let backgroundColor = [];
        let borderColor = [];

        // XXX !!! for now
        if (!labelsDone) {
          for (let i = daysInMonth; i > 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 > 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 => {
    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 (
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <div style={{flexDirection: 'column', marginLeft: '50px', marginRight: '50px', flexGrow: 1}}>
            <div style={{height: '20vh'}}>
              <div style={{flexDirection: 'row'}}>
                <Checkbox
                  label={'Active Users'}
                  handleCheckboxChange={this.toggleCheckbox}
                  isChecked={true}
                />
                <Checkbox
                  label={'New Users'}
                  handleCheckboxChange={this.toggleCheckbox}
                  isChecked={false}
                />
              </div>
            </div>
            <div style={{height: '75vh'}}>
              <Line data={this.state.chartData} options={chartOptions} />
            </div>
          </div>
        </div>
      );
  }
}

export default Usage;

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 setState, which I understand calls update results in the above error.

great question. please try the code. perhaps you could figure it out and tell me. — Moshe Shmukler, May 16 '17 at 12:58
@MosheShmukler Just incase If you're using, `babel-loader` try adding `exclude: /(node_modules)/,` as an exclusion. — David R, May 16 '17 at 13:07
pretty sure that my babel is configured correctly, and the problem is *completely* elsewhere. thank you, though. — Moshe Shmukler, May 16 '17 at 13:15
Can you post the code for `Checkbox` component. Also, just want to verify if `toggleCheckbox` function is being invoked? Can you put a `console.log` and verfiy? — Arjun S Kumar, May 16 '17 at 14:00
@ArjunSKumar why don't you compile the code to verify whatever? — Moshe Shmukler, May 16 '17 at 14:38
@MosheShmukler I don't have your `Checkbox` component in the first place and I've a feeling the `toggleCheckbox` will throw an error since `this` context is not the component context since you din't bind it. Just want to verify. https://codesandbox.io/s/rky71xkKE — Arjun S Kumar, May 16 '17 at 17:16

score 4 · Accepted Answer · answered May 16 '17 at 16:07

4

If data passed into the component changes, points will animate between values using chart.js' .update(). If you want the chart destroyed and redrawn on every change, pass in redraw as a prop. For example <LineChart data={this.state.chartData} redraw />

Adding redraw solves the problem.

answered May 16 '17 at 16:07

Moshe Shmukler

1,270
2
21
43

1

It might solve the problem, but when `toggleCheckbox` is triggered 2 `setState` happens, which will force rerender twice. It would be better if you write a function to return the dataset for required key based on toggled key and pass it to Chart JS component rather than forcing 2 renders which is a performance bottleneck, specially since Chart JS uses canvas to render the chart – Arjun S Kumar May 16 '17 at 17:19
You are awesome. – princebillyGK Jul 16 '20 at 17:11

react-chartjs state update error

1 Answers1

Linked