Chart size

Recharts chart needs width or height specified to render a chart.

Chart without any sizes does not render anything:

Static chart size

The easiest way is to set the sizes as a number in pixels:

You can also use percents instead of pixels:

You can also choose to use CSS to set the sizes. In this case, you need to set the style attribute. I find it useful to set the maxWidth and maxHeight to limit the chart size on large screens, and use width: 100% to make the chart responsive. Also, setting aspectRatio is useful to maintain the aspect ratio of the chart.

Automatic resizing

You will find that the chart is rendered once, and does not resize when the parent dimensions change. Try to resize your browser window, or rotate your phone/tablet to see the effect (or lack of it).

To fix that, pass the responsive prop to the chart component. This will make the chart resize when the parent dimensions change.

This prop was introduced in Recharts 3.3.

Usage with flexbox

You can control the chart's size and behavior using flex properties on the chart's parent or on the chart component itself (by setting its style).

See this example of a PieChart in a flexbox container for a demonstration.

Usage with CSS grid

The responsive prop also works great with CSS grid layouts. You can place charts in grid cells and they will adapt to the size of the cell.

See this example of a PieChart in a grid container for a demonstration.

Automatic resizing on older Recharts versions

The responsive prop is only available in Recharts 3.3 and later. If you are using an older version of Recharts, you can use the ResponsiveContainer component to achieve similar effect. It is not quite as flexible as the responsive prop, but it works.

See the API docs for more details and examples.

Note that the ResponsiveContainer component must have a parent with a defined size. In the example above, the parent is a div with a style that sets its size.