Chartjs-【React chart.js】How to add multiple data to Radar chart using map function

by

1👍

I think you are using map directly in array so that’s why it’s showing you error plus it’s not good way to create data in like this.

So instead try to create new function which will return data and then use that functions return as dataSets in Radar chart

export class MotivationtypeChart extends Component {
  constructor(props){
    super(props);
  }

  const getRadarData = () => {
    return this.props.scores.map((s, index) => {
      return {
        label: s.createdDate,
        data: [s.driveScore, s.volunteerScore, s.createScore, s.analyzeScore],
        backgroundColor: this.props.backgroundColors[index],
        borderColor: this.props.borderColor[index],
        borderWidth: 2
      };
    });
  };

  render(){
    return(
      <Radar
        data={{
          labels: ['Drive', 'Volunteer', 'Create', 'Analyze'],
          datasets:[...getRadarData()]
        }}
        height={400}
        width={500}
        options={{
          maintainAspectRation: false,
          scale: {
            grid: {
              display: false
            },
            beginAtZero: true,
            min: 0,
            max: 20,
            stepSize: 1,
          }
        }}
      />
    )
  }
}

Leave a comment