Breaking News: Grepper is joining You.com. Read the official announcement!

api call in react chart

Vagesh Vora answered on April 9, 2022 Popularity 6/10 Helpfulness 2/10

answer api call in react chart

api call in react chart

Comment

import axios from "axios";
import React,{useEffect, useState} from "react";
import {Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis} from 'recharts'

function Analytics() {

  const [data,setData] = useState();

  useEffect(() => {

  axios.get('https://iammaawesomee.herokuapp.com/data/get-data').then(function(response){
/*Change the api bcuz this is fake api and setup the response data by consoling output */
  
    console.log(response.data)
    /* Response.data in this case is an array of objects.. so keep in mind*/
  
    setData(response.data)
}).catch(function(error){
  console.log(error);
})


}, []);



  return (
      <>
      <div style={{marginTop:'50px',marginLeft:'125px',marginBottom:'60px'}}>
        <h1 style={{marginLeft:'-130px',marginBottom:'30px',color:'red'}}>Data Analytics</h1>
<BarChart width={1000} height={300} data={data}>
  <CartesianGrid strokeDasharray="1 1" />
  <XAxis dataKey="device_id" />
  <YAxis />
  <Tooltip />
  <Bar dataKey="distanceCm" fill="#8884d8" />
  <Bar dataKey="duration" fill="#82ca9d" />
  <Bar dataKey="Perc" fill="#82ea5d" />
  <Legend />

</BarChart></div>
      </>
    );
  }

export default Analytics;


/*(((then u need to import this file in app.js file )))*/

Popularity 6/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: api call javascript

Link to this answer
Share Copy Link

Contributed on Apr 09 2022

Vagesh Vora

0 Answers Avg Quality 2/10

api call in react chart

Contents

More Related Answers

api call in react chart

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.