Re-Charts Not Rendering Data using ReactJS - 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();
}, [])

Answer 2

you can also do using create new function using async - await.if you getting the same above data response then it should be work.
import axios from "axios";
import { useEffect, useState } from "react";
import {
BarChart,
Bar,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
CartesianGrid,
Legend
} from "recharts";
import "./styles.css";
const Chart = () => {
const [data, setData] = useState(null);
const getData = async () => {
const { data } = await axios.get(`http://127.0.0.1:8000/fail-count`);
setData(data.message);
};
useEffect(() => {
getData();
}, []);
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;