Error when using react-chartjs

1

I’m trying to render a doughnut chart, but I keep getting this error:

TypeError: nextProps.data.forEach is not a function
    at updatePoints (core.js:102)
    at Object.classData.componentWillReceiveProps (core.js:48)
    at ReactCompositeComponent.js:611
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:610)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:547)
    at Object.receiveComponent (ReactReconciler.js:125)
    at Object.updateChildren (ReactChildReconciler.js:109)
    at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:208)
    at ReactDOMComponent._updateChildren (ReactMultiChild.js:312)

This is my code:


import React, { Component } from 'react';
import { Doughnut } from 'react-chartjs';

export default class FinancialAssetsGraph extends Component {
  graphData() {
    let data = {
      datasets: [{
        data: this.props.assets.map((asset) => {
          return asset.value;
        })
      }],
      labels: this.props.assets.map((asset) => {
        return asset.name;
      })
    };

    return data;
  }

  render() {
    return (
      <div>
        <Doughnut data={this.graphData()} />
      </div>
    );
  }
}

It seems the package expects an array to be passed in the data prop, but the Chart.js Docs says otherwise.

How should I handle this? What prop structure and type should I use?

2

Silly mistake.

The react-chartjs package currently depends on chart-js@^1.1.1 to work, which is a bit outdated, so I should have used older docs.

You can find the docs here: https://github.com/chartjs/Chart.js/tree/v1.1.1/docs

3

You may wanna check out react-chartjs-2 which is more up to date and maintained.

4

Thanks! I did not know it existed.