Graph not displaying data

Question

I'm kinda new to React and I was trying to make a graph using Recharts, but I lost myself in a problem where the lines of the graph doesnt appear.

I use this code

const [ graphData, setgraphData ] = useState([])

const createMockData = () => {
let data = [];
let value = 50;
for (var i = 0; i <= 5 ; i++){
  let date = new Date();
  date.setHours(0,0,0,0);
  date.setDate(i);
  value += Math.round((Math.random() < 0.5 ? 1 : 0) * Math.random() * 10);
  data.push({x: date, y: value});
} 
//console.log(data);
setgraphData(data);


}
useEffect(() => {
   createMockData();
});

To create a mockup data and this to present it

<LineChart width={500} height={200} data={graphData}>
    <Line type="monotone" dataKey={graphData.x} stroke="var(--mainColor)" />
    <XAxis dataKey={graphData.y} />
    <Tooltip />
</LineChart>

And I dont know what I'm doing wrong. When I use a normal array it works fine, but I need the graph to be like 100 values.

Sandbox Link

Thank you

Answer 1

There are four issues here:

1. You are setting graphData.x and graphData.y as keys, however these values will be undefined. graphData is an array and doesn't have x or y properties - and it wouldn't even make sense, because you are supposed to specify the property names to be used for each object, i.e. "x" and "y". You can see in your working graph that you had data objects with { Time, Value }, so the keys specified are "Time" and "Value", and now you have { x, y }, so they should be "x" and "y".

2. You have x and y reversed - you are attempting to set x as key for the Line and y as key for the XAxis, but it needs to be the other way round.

3. You have Date objects in your data, which happen to "work" in the X axis because they are implicitly converted to a string, but the output will not be very readable, and it's not really a supported way of providing X axis values. It would be better to set x: date.toLocaleDateString() instead of just x: date in your data objects.

4. Your mock data will currently be recreated in a tight loop ad infinitum, eating one CPU core in the process, because you put createMockData into useEffect but without specifying an empty dependencies array, so any rerender - including the one you trigger yourself inside of createMockData will create new mock data, which will cause new mock data to be created, and so on. The solution is to add an empty dependency array to specify that there are no circumstances under which the hook should run a second time.

Working sandbox here.