Re-Charts Not Rendering Data using ReactJS-CodePudding

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..

CodePudding user response：

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();
}, [])

CodePudding user response：

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;