'How to make React-Recharts responsive for all kind of device particularly?

I'm using React Recharts to show some chart data. I am using ComposedResponsiveContainer for my app component and the heights of it is set to "100%" by default. But in my app, I can't see this.

I'm using Tailwind CSS and thought className="h-full w-full" would help, but it's not. I also changed its height and width to something like the image and its showing this error:

what can I do to overcome this?

reactjs recharts

Solution 1:^[1]

Remove height and width properties and set your container inside a grid-cols

Solution 2:^[2]

Remove height & width
Use ResponsiveContainer example:

<ResponsiveContainer>
  <AreaChart
    data={data}
    margin={{
    top: 10,
    right: 30,
    left: 0,
    bottom: 0,
    }}
  >
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
  </AreaChart>
</ResponsiveContainer>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Taha LAGHZALI
Solution 2	Tim

'How to make React-Recharts responsive for all kind of device particularly?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]