Re-Charts Not Rendering Data using ReactJS

Question

I have created the following component in ReactJS.

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



const Chart = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    axios.get("http://127.0.0.1:8000/fail-count").then((resp) => {
      console.log(resp.data)
      setData(resp.data.message);
    });
  }, []);

  return (
<div> 
<ResponsiveContainer width={'100%'} aspect = {3} debounce={3}>
    <BarChart data={data} margin={{ top: 10, right: 30, left: 20, bottom: 5, }}>
        <CartesianGrid strokeDasharray="3 3"/>
        <XAxis dataKey="DEALER"/>
        <YAxis/>
        <Tooltip/>
        <Legend/>
        <Bar dataKey="Count" fill="#8884d8"/>
    </BarChart>
</ResponsiveContainer>

</div>


  )
}

export default Chart

As you can see I am getting data from my local host backend. The data retrieved from there is structured as below..

[
    {
        "DEALER": "Dealer A",
        "Count": 47
    },
    {
        "DEALER": "Dealer B",
        "Count": 46
    },
    {
        "DEALER": "Dealer C",
        "Count": 46
    },
    {
        "DEALER": "Dealer D",
        "Count": 32
    },
    {
        "DEALER": "Dealer E",
        "Count": 31
    }
]

Reading through re-charts docs it looks like my data is structured correctly as per their examples. Recharts-Bar-Chart

[
  {
    "name": "Page A",
    "uv": 4000,
    "pv": 2400
  },
  {
    "name": "Page B",
    "uv": 3000,
    "pv": 1398
  },
  {
    "name": "Page C",
    "uv": 2000,
    "pv": 9800
  },
  {
    "name": "Page D",
    "uv": 2780,
    "pv": 3908
  },
  {
    "name": "Page E",
    "uv": 1890,
    "pv": 4800
  },
  {
    "name": "Page F",
    "uv": 2390,
    "pv": 3800
  },
  {
    "name": "Page G",
    "uv": 3490,
    "pv": 4300
  }
]

Im quite new to react so Im unsure if Im passing data variable correctly from useState hook? Furthermore, if I comment out this section of code..

const [data, setData] = useState(null);
  useEffect(() => {
    axios.get("http://127.0.0.1:8000/fail-count").then((resp) => {
      console.log(resp.data)
      setData(resp.data.message);
    });
  }, []);

And inplace of that use

const data = [
    {
        "DEALER": "Dealer A",
        "Count": 47
    },
    {
        "DEALER": "Dealer B",
        "Count": 46
    },
    {
        "DEALER": "Dealer C",
        "Count": 46
    },
    {
        "DEALER": "Dealer D",
        "Count": 32
    },
    {
        "DEALER": "Dealer E",
        "Count": 31
    }
]

const Chart = () => {return (
<div> 
<ResponsiveContainer width={'100%'} aspect = {3} debounce={3}>
    <BarChart data={data} margin={{ top: 10, right: 30, left: 20, bottom: 5, }}>
        <CartesianGrid strokeDasharray="3 3"/>
        <XAxis dataKey="DEALER"/>
        <YAxis/>
        <Tooltip/>
        <Legend/>
        <Bar dataKey="Count" fill="#8884d8"/>
    </BarChart>
</ResponsiveContainer>

</div>


  )
}

export default Chart

Then the chart data renders correctly..

Answer 1

You should use async - await for your http requests. Data is not getting set properly.

useEffect(() => {
  fetchData = async () => {
    await axios.get("http://127.0.0.1:8000/fail-count")
      .then((resp) => {
      setData(resp.data.message);
      }
  }
  fetchData();
}, [])