/Javascript/React/React chart js 2 api data

React chart js 2 api data

import React, { Component } from 'react';
import './App.css';
import axios from 'axios'
import Chart from './components/Chart';

class App extends Component {
  constructor(){
    super();
    this.state = {
      chartData:{}
    }
  }

  componentDidMount() {
    this.getChartData();
  }

  getChartData() {
    axios.get("http://www.json-generator.com/api/json/get/coXIyroYAy?indent=2").then(res => {
        const coin = res.data;
        let labels = [];
        let data = [];
        coin.forEach(element => {
        labels.push(element.labels);
        data.push(element.data);

          });

       console.log(coin)
        this.setState({
          chartData: {
            labels:labels,
            datasets: [
              {
                label: "Population",
                data: data,
                backgroundColor: [
                  "rgba(255, 99, 132, 0.6)",
                  "rgba(54, 162, 235, 0.6)",
                  "rgba(255, 99, 132, 0.6)"
                ],
              }
            ]
          }
        });
      });
    }

  render(){

        return (
          <div className="App">
          {Object.keys(this.state.chartData).length &&
            <Chart
              chartData={this.state.chartData}
              location="Massachusetts"
              legendPosition="bottom"
            />
          }
          </div>
        );

    }     
}

export default App;

Source: stackoverflow.com

Similar codes

0 vote367 views2 answers
Can i pass data with usenavigate react router
Javascript React
14 votes339 views2 answers
Border react native
Javascript React
0 vote345 views1 answer
How to bound a state variable to a field react final form
Javascript React
4 votes373 views1 answer
How to add oAuth google signin in react native app
Javascript React
0 vote382 views1 answer
Get lat and long from address in react js
Javascript React
0 vote340 views1 answer
Shadowcolor liners in react native
Javascript React
11 votes338 views3 answers
Shadow border react native
Javascript React
22 votes338 views3 answers
How to define array in react js
Javascript React
0 vote362 views1 answer
React tutorial componentDidMount() componentWillUnmount()
Javascript React
16 votes343 views3 answers
What does the useReducer do in react
Javascript React