Chartjs-How to set prop data for chart.js in React?

by

2👍

You need to check if data is present in this.state.data.labels before calling Line component. Render method would have run before componentDidMount gets a chance to return and call api therefore empty data is passed and passed to Line component.

  {
    this.state.data.labels.length && <Line
      data={this.state.data}
      options={{
        title: {
          display: true,
          text: 'Fladan mätpunkt',
          fontSize: 25
        }
      }}
    />
  }

State data should have following structure:

{
    labels: ['First', 'Second'],
    datasets: [
      {
        label: 'My First dataset',
        data: [65, 59, 80, 81, 56, 55, 40],
      },
      {
        label: 'My Second dataset',
        data: [28, 48, 40, 19, 86, 27, 90],
      },
    ]
}

Leave a comment