Cfrgtkky

I am tying to create a graph using ChartJS and ReactJS. The issue that I am experiencing is that I cannot load my data array onto the graph.

There are no logged errors and this is how my chart looks currently:

I think that the mistake might be chartData object that I am using to pass the data:

  chartData:{

    labels: this.timeDataArray,

    datasets: this.priceDataArray,

    backgroundColor:['rgba(255,99,132,0.6)']

  }

I am using react-chartjs-2 as module for my charts and fetch for the http request.

Here is my full code:

export class Chart extends Component{

  constructor(props){

    super(props);

    this.state = {

        isLoading: false,

        data: ,

      chartData:{

        labels: this.timeDataArray,

        datasets: this.priceDataArray,

        backgroundColor:['rgba(255,99,132,0.6)']

      }

    }

  }



  componentDidMount(){

    this.fetchData();

  }



  fetchData(){

    fetch("https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=600")

    .then(response => response.json())

    .then(data=>{

      var fetchedData = data.Data;

      var timeDataArray = ;

      var priceDataArray = ;

      console.log(timeDataArray)

      console.log(priceDataArray)

      for(var x = 0; x < fetchedData.length;x++){

        var exampleTimeData = fetchedData[x].time

        var examplePriceData = fetchedData[x].high

        timeDataArray.push(exampleTimeData)

        priceDataArray.push(examplePriceData)



      }



    })

    .catch(error => console.log("parsing failed", error))

  }



    render(){

        return(

          <div className="chart">

            <Line

              data={this.state.chartData}

              options={{

                maintainAspectRatio:false

              }}

            />

          </div>

        )

    }

}

Question: Why is my data not being plotted since I am passing the label property with the time stamps and the actual data as the dataset ?

I dont know if its my labtop right now or what, but after running it, I need to resize my window and the graph updates to show the data.

export default class Chart extends Component {

    constructor(props) {

        super(props)

        this.state = {

            isLoading: false,

            chartData: {

                labels: ['First', 'Second', 'Third', 'Fourth'],

                datasets: [

                    {

                        label: ['My Chart'],

                        data: [100, 200, 300, 400],

                        backgroundColor: ['#26331d'],

                        borderWidth: 1,

                        borderColor: '#777',

                        hoverBorderWidth: 3,

                        hoverBorderColor: '#000'

                    }

                ]

            }

        }

    }



    componentDidMount() {

        this.fetchData()

    }



    fetchData() {

        var timeDataArray = 

        var priceDataArray = 

        fetch(

            'https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=50'

        )

            .then(response => response.json())

            .then(data => {

                var fetchedData = data.Data



                console.log(timeDataArray)

                console.log(priceDataArray)



                for (var x = 0; x < fetchedData.length; x++) {

                    var exampleTimeData = fetchedData[x].time

                    var examplePriceData = fetchedData[x].high

                    timeDataArray.push(exampleTimeData)

                    priceDataArray.push(examplePriceData)

                }

            })

            .catch(error => console.log('parsing failed', error))

        this.setState({

            chartData: {

                labels: timeDataArray,

                datasets: [

                    {

                        label: ['Population'],

                        data: timeDataArray,

                        backgroundColor: ['#26331d', '#507935', '#63ef06', '#d0eabf'],

                        borderWidth: 1,

                        borderColor: '#777',

                        hoverBorderWidth: 3,

                        hoverBorderColor: '#000'

                    }

                ]

            }

        })

    }



    render() {

        return (

            <div className="chart">

                <Line

                    data={this.state.chartData}

                    width={200}

                    height={200}

                    options={{

                        maintainAspectRatio: false

                    }}

                />

            </div>

        )

    }

}