DEV Community

loading...

Graph issue - React recharts

Manuel Alonge
Founder of MindfulStack | The Mindful Web Developer
・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 (7)

Collapse
marcostreng profile image
Marco Streng

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,
  },
];
Collapse
manuelalonge profile image
Manuel Alonge Author • Edited

thank you

Collapse
sampennington profile image
sampennington

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.

Collapse
manuelalonge profile image
Manuel Alonge Author

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.

Collapse
manuelalonge profile image
Manuel Alonge Author

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.

Collapse
sampennington profile image
sampennington

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

Collapse
sampennington profile image
sampennington

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?