CODEWITHSUNDEEP
reactjsrecharts
ADc
ADc

Reputation: 13

The argument must be a React element, but you passed undefined

I am trying to use ResponsiveContainer from recharts in a react and getting this error.

React.cloneElement(...): The argument must be a React element, but you passed undefined.

My Sample code:

import React from 'react';
import { ResponsiveContainer } from 'recharts';

function App() {
  return (
       <ResponsiveContainer>
       </ResponsiveContainer>
  );
}

Upvotes: 1

Views: 1547

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 85132

You need to put a chart inside the container. ResponsiveContainer is not designed to work on its own, and will throw the error you're seeing if there is no child component.

Here's the example from the documentation:

<ResponsiveContainer width={700} height="80%">
  <AreaChart data={data}
    margin={{ top: 20, right: 30, left: 0, bottom: 0 }}>
    <XAxis dataKey="name" />
    <YAxis />
    <CartesianGrid strokeDasharray="3 3" />
    <Tooltip />
    <ReferenceLine x="Page C" stroke="green" label="Min PAGE" />
    <ReferenceLine y={4000} label="Max" stroke="red" strokeDasharray="3 3" />
    <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
  </AreaChart>
</ResponsiveContainer>

Upvotes: 1

Related Questions