ResponsiveContainer does not support fix height such as 200px

[lrrfantasy]

<ResponsiveContainer height={200}>
  <PieChart>
    {...}
  </PieChart>
</ResponsiveContainer>

This works nicely but React reports warning of
Invalid prop 'height' of type 'number' supplied to 'ResponsiveContainer', expected 'string'

If I change the height to <ResponsiveContainer height='200'> the container doesn't work.

I looked at the source code of ResponsiveContainer.js, the propType does require string. However the function it depends on in DataUtils.js, here is the core:

export const getPercentValue = (percent, totalValue, defaultValue = 0, validate = false) => {
  // ...
  const str = percent.toString();
  const index = str.indexOf('%');
  let value;

  if (index > 0) {
    value = totalValue * parseFloat(str.slice(0, index)) / 100;
  } else if (percent === +percent) {
    value = percent;
  }

Apparently my height '200' in string doesn't go into any of if branch so this function gives me a height of 0, but 200 in number works well.

Is there a way supporting 200px of height, and without propType warning?
Either a fix in getPercentValue or a change of propType would work for me.

[xile611]

Thanks. This problem was fixed in v0.8.8.

Initially I think that the width and height must be a percentage. But you may need to set the width to be a percentage, but the height to be a fixed value. So the width and height of ResponsiveContainer can be a percentage or a fixed number in v0.8.8.

[lrrfantasy]

Nice work. Thanks.