/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

8 votes142 views2 answers
Install material icons for react
Javascript React
1 vote148 views1 answer
Strings compare react
Javascript React
0 vote196 views1 answer
React-leaflet/core/cjs/pane.js:7%20error15-Jun-2021%2000:45:06%20%20%20%20%20%20const%20pane%20=%20props.pane%20??%20context.pane;
Javascript React
0 vote162 views1 answer
React native webview postmessage example
Javascript React
0 vote136 views1 answer
How to change style class by using onclick function with multiple buttons in react js
Javascript React
11 votes144 views2 answers
'React' must be in scope when using JSX react/react-in-jsx-scope
Javascript React
21 votes97 views3 answers
Hide header bar react navigation
Javascript React
0 vote135 views7 answers
How to generate debug build in react native
Javascript React
1 vote159 views1 answer
React-native link to play store
Javascript React
2 votes149 views2 answers
Vscode extensions for better react js
Javascript React