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

Question

I'm trying to fetch data from a SQL-database and show that data on a chart.js, but I'm getting this error:

Warning: Failed prop type: Invalid prop data supplied to ChartComponent.

My code looks like this:

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

class MinData extends Component{
    constructor(){
        super();
        this.state = {
            data: {
                labels: [],
                datasets: []
            }
        };
    }


    componentDidMount(){
        fetch('http://localhost:4000/api/myData?limit=6')
        .then (results =>{
            return results.json();
        }).then(data => {

            let receivedData = data.map((datapost) => {
                return(
                     {
                        data: {
                            labels: datapost.timestamp,
                            datasets: datapost.temp_0
                        }
                    }

                )
            })
            this.setState({data: receivedData}, function(){
                console.log(this.state.data);
            });
        })
    }


    render(){
        return(

            <div className="enContainer">

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

            </div>
        )
    }
}
export default MinData;

The idea is to set state of data with the fetched data.

I'm running out of ideas, but I guess there's something wrong with the way I return data from my map function.

UPDATE: This is what I receive in Postman when doing the same request with limit set to receive two objects:

[
    {
        "timestamp": "2019-01-17T18:14:20.000Z",
        "battery": 5.094,
        "temp_0": 23.375,
        "temp_10": 19.125,
        "temp_20": 19,
        "temp_30": 18.812,
        "temp_40": 18.562,
        "temp_50": 18.625,
        "temp_60": 18.688,
        "temp_70": 18.688,
        "temp_80": 18.188,
        "temp_90": 19,
        "temp_100": 18.75,
        "temp_110": 18.625,
        "temp_120": 18.5
    },
    {
        "timestamp": "2019-01-17T18:17:25.000Z",
        "battery": 5.104,
        "temp_0": 23.375,
        "temp_10": 19.125,
        "temp_20": 19,
        "temp_30": 18.812,
        "temp_40": 18.562,
        "temp_50": 18.688,
        "temp_60": 18.75,
        "temp_70": 18.688,
        "temp_80": 18.188,
        "temp_90": 19,
        "temp_100": 18.75,
        "temp_110": 18.625,
        "temp_120": 18.5
    }
]

tarzen chugh · Answer 1 · 2019-05-15T09:15:52.767

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],
      },
    ]
}

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

1 Answers1