ResponsiveContainer

Makes charts responsive to container size changes

Makes charts responsive to container size changes. The ResponsiveContainer component adjusts its width and height based on the size of its parent element, creating charts that adapt to different screen sizes.

This component uses the ResizeObserver API to monitor changes to the size of its parent element. For older browsers, you may need to include a polyfill.

Usage

import { ResponsiveContainer, LineChart, Line } from 'recharts';

<ResponsiveContainer width="100%" height={400}>
  <LineChart data={data}>
    <Line dataKey="uv" />
  </LineChart>
</ResponsiveContainer>

Props

Dimensions

width · number | string · default: "100%"

The width of the container.

Can be a number (pixels) or a percent string like “100%”.

height · number | string · default: "100%"

The height of the container.

Can be a number (pixels) or a percent string like “100%”.

minWidth · number | string · default: "0"

The minimum width of the container.

Can be a number (pixels) or a CSS string value.

minHeight · number | string

The minimum height of the container.

Can be a number (pixels) or a CSS string value.

maxHeight · number

The maximum height of the container, in pixels.

Aspect ratio

aspect · number

Width / height ratio.

If specified, the height is calculated by width / aspect.

Initial state

initialDimension · object · default: "{width: -1, height: -1}"

The initial width and height of the container.

Used before the ResizeObserver detects the actual size.

Format: { width: number, height: number }

Performance

debounce · number · default: "0"

If specified as a positive number, a debounced function is used to handle resize events.

Value is in milliseconds.

onResize · function

Callback providing the updated chart width and height values.

Signature: (width: number, height: number) => void

Content

children · ReactNode · required

The content of the container.

Can contain multiple charts, and they will all share the same dimensions.

Styling

style · CSSProperties

CSS styles applied to the container element.

Note: width, height, minWidth, minHeight, and maxHeight are excluded as they are controlled by dedicated props.

className · string | number

The HTML element’s class name.

Other

id · string | number

Unique identifier of this component.

Used as an HTML attribute id.

Notes

• ResponsiveContainer uses ResizeObserver to monitor size changes. Ensure browser support or include a polyfill.
• If you nest ResponsiveContainer inside another ResponsiveContainer, the inner one will not add another layer of responsiveness.
• When static width and height are provided (not percentages), ResponsiveContainer may skip rendering the monitoring div and provide dimensions directly.