ResponsiveContainer not loading charts

When i try using <ResponsiveContainer width="100%" height={400}> my charts are not appearing. Also when i try giving width in % for BarChart or PieChart or any other im getting any error width is NaN string is passed.

here is my code:

<ResponsiveContainer width="100%" height={200}>
            <BarChart width={300} height={200} data={data} margins = {{ top: 50, right: 0, bottom: 100, left: 0 }} >
                <XAxis dataKey="monthName" />
                <YAxis />
                <CartesianGrid />
                <Legend />
                <Tooltip />
                <Bar dataKey="transactions" fill="#7B1FA2" />
            </BarChart>
            </ResponsiveContainer>

can you please tell me where am i doing wrong or something to do with your side.

[matepaiva]

@vikkya this solves your problem: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Just wrap your ResponsiveContainer with this below (the paddingBottom will define the proportion of your container (a square, a rectangle etc.):

<div style={{
  paddingBottom: '56.25%', /* 16:9 */
  position: 'relative',
  height: 0
}} >
  <div style={{
    position: 'absolute',
    top: '0',
    left: '0',
    width: '100%',
    height: '100%'
  }}>
      <ResponsiveContainer>...</ResponsiveContainer>
  </div>
</div>

[xile611]

@vikkya Just guarantee the width of parent node.