/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

1 vote189 views3 answers
Sticky footer react
Javascript React
2 votes187 views2 answers
React native image swiper
Javascript React
13 votes149 views1 answer
Round button corner right react native
Javascript React
29 votes175 views3 answers
Creating react app using npx
Javascript React
7 votes211 views2 answers
Align text into center of container react native
Javascript React
0 vote211 views2 answers
Datepicker range npm reactjs
Javascript React
0 vote192 views1 answer
React form hook trigger is not a function
Javascript React
1 vote205 views1 answer
React lottie player on hover
Javascript React
1 vote239 views1 answer
React create list of components
Javascript React
3 votes209 views2 answers
Error duplicate resources react native
Javascript React