'<ResponsiveContainer> in Recharts is not rendering

I'm trying to use a lineChart from Recharts in my react app. But while I'm using the </ResponsiveContainer> the line chart is not getting rendered. Here is my code:

 <div class className='line-container'>
    <ResponsiveContainer width="100%" height="100%">
       <LineChart
        width={1200}
        height={300}
        data={fruits}>
           <CartesianGrid strokeDasharray="1 3" />
           <XAxis dataKey="name" />
           <YAxis />
           <Tooltip />
           <Legend />
           <Line type="monotone" dataKey="quantity" stroke="#8884d8" />
       </LineChart>
   </ResponsiveContainer>
 </div>

Note: It works without the </ResponsiveContainer>. But What changes should be made to make it work with </ResponsiveContainer>

htmlcssreactjsrecharts


Solution 1:[1]

set the ResponsiveContainer heights like heights={300/500} and keep the width as 100% then it will work properly!

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 Labib Ahmed

Related Questions