loading...

Graph issue - React recharts

manuelalonge profile image Manuel Alonge ・1 min read

Hello,
I am currently trying to build a COVID19 stats tracker for Italy. I have created the stats fields and a I begun creating the graph, however, I am quite new to the Recharts library (http://recharts.org/).

The files are stored in this repo: https://github.com/manuelalonge/covid-19-stats - the issue is probably here: https://github.com/manuelalonge/covid-19-stats/blob/master/src/Graph.js

I specifically receive this warning from the console and I don't know how to fix this, can anyone help?

'Warning: Failed prop type: Invalid prop data of type object supplied to LineChart, expected an array.
in LineChart (at Graph.js:51)
in Graph (at Main.js:57)
in div (at Main.js:54)
in IndexPage (at src/index.js:8)
in StrictMode (at src/index.js:7)'

Discussion

markdown guide
 

I seems like stats is an object, but it must be an array of objects.

See official example:

const data = [
  {
    name: 'Page A', uv: 4000, pv: 2400, amt: 2400,
  },
  {
    name: 'Page B', uv: 3000, pv: 1398, amt: 2210,
  },
  {
    name: 'Page C', uv: 2000, pv: 9800, amt: 2290,
  },
  {
    name: 'Page D', uv: 2780, pv: 3908, amt: 2000,
  },
  {
    name: 'Page E', uv: 1890, pv: 4800, amt: 2181,
  },
  {
    name: 'Page F', uv: 2390, pv: 3800, amt: 2500,
  },
  {
    name: 'Page G', uv: 3490, pv: 4300, amt: 2100,
  },
];
 
 

Also going to drop a typescript recommendation here, you would get instant feedback of why the type of stats doesn't match the data prop type required, rather than getting syntax error in the browser you would get something much more useful, right in vscode or whatever.

 

Hi Sam. Thanks for this. Also thanks for the suggestion about the type. I was actually looking to draw a line instead of a bar, but yours was a very good support and helped me understand my mistakes. I merged your commit into my repo and for the future please do not hesitate to ask if you need any help.

 

Hi Sam, I'm having a look at your PR. First of all thanks a lot for that. I will let you know more later.

 

I've made a PR let me know if thats not what your after?

 

So you can just put the object in an array to overcome that error, but the data type doesn't seem fit for a line graph, are you meaning to do a bar chart? I can put a PR together if thats the case?