add: initial dimension to ResponsiveContainer

[akamfoad]

Description

ResponsiveContainer component is used to render charts that can adapt to their container. When a chart is rendered inside Responsive container, you can omit its own height and width, and instead specify the dimensions on the Container, one of the dimensions should be a percentage, using % symbol, for instance 50%, recharts then tries to to render the chart accordingly. This is possible because when the component renders in the browser, then it'll calculate the container's dimensions, and then it'll calculate the width (or the height) that was specified in percentage.

When this ResponsiveContainer renders initially, its internal sizes are sepcified as { width: -1, height: -1 }, this is because it needs to render in the browser before it can calculate the dimentions. Also, ResponsiveContainer doesn't render the chart initialy since the dimentions are negative, so it'll try to find a positive height and width and render the chart accordingly.

This is important, because it means that, ResponsiveContainer relies on JavaScript and Browser functionalities to calculate its children size, and initially, it doesn't render the children. This can be a limitation when the ResponsiveContainer functionality is needed but the charts are rendered in an environment which is not the browser or JavaScript is not available.

Related Issue

Fixes #3595

Motivation and Context

In this commit, I'm changed this behavior such that, initial height and initial width can be specified to calculate the initial dimensions of the ResponsiveContainer's child. These props, if not provided, they have the original sizes (-1, -1) respectively, so this changes can be applied without breaking semver.

Its important to note that, these two props should be either provided or omitted together, because if either width or height negative, then ResponsiveContainer will render null until it'll calculate the dimensions on the client (Browser) after hydration.

Which means, its possible to render the charts in specified dimensions while rendering on server, and initial render on browser (before hydration), and when hydrated, the sizes will be calculated as before.

How Has This Been Tested?

Its possible to test this in any framework that is capable to render on server, and on client, but its also possible to enable and disable JavaScript. I chose Remix to test this since disabling and enabling is easily done by rendering or not rendering a component.

Use this example and comment out the <Scripts /> on line 28 to see how the chart looks when its server rendered but not hydrated.

Currently, it should render nothing when <Scripts /> is not rendered.

When this changes applied, it should render with inital dimensions.

Screenshots (if appropriate)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• All new and existing tests passed.

[ckifer]

Thanks for doing this! Just one suggestion - what do you think?

[ckifer]

could we pass these as an object where the object is optional but both properties height and width are required if specified? This way we can never have the height/width problem. You could make this initialDimentions?

Not terribly important but it does allow the API to say "if you want to set one of these you must set the other"

[akamfoad]

I agree its a better expression of the intended behavior. I changed it.

[ckifer]

thanks for the changes 🚀

[ckifer]

@akamfoad can you add an issue or make the changes needed to add this to the docs as well? In storybook is fine