> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.
# Responsive containers
> Make your charts responsive and adaptive to different screen sizes
The `ResponsiveContainer` component automatically adjusts chart dimensions based on the parent element's size. This is essential for responsive designs.
## Basic usage
Wrap your chart in a `ResponsiveContainer`:
```jsx theme={null}
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis } from 'recharts';
function ResponsiveChart() {
return (
);
}
```
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:244-254`
## Size configuration
### Percentage dimensions
Use percentages to fill the parent container:
```jsx theme={null}
{/* Fill 100% of parent width, fixed height */}
{/* ... */}
{/* Fill both dimensions */}
{/* ... */}
```
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:36-44`
### Fixed dimensions
Use numbers for fixed pixel sizes:
```jsx theme={null}
{/* ... */}
```
### Aspect ratio
Maintain a specific width-to-height ratio:
```jsx theme={null}
{/* 16:9 aspect ratio */}
{/* ... */}
{/* 4:3 aspect ratio */}
{/* ... */}
```
When `aspect` is set, `height` is calculated automatically from `width / aspect`.
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:29-32`
## Size constraints
### Minimum dimensions
Prevent charts from getting too small:
```jsx theme={null}
{/* ... */}
```
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:46-53`
### Maximum height
Cap the maximum height:
```jsx theme={null}
{/* ... */}
```
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:62-63`
## Resize detection
ResponsiveContainer uses the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to detect size changes.
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:248-249`
### Debounced resize
Debounce resize events for better performance:
```jsx theme={null}
{/* ... */}
```
Default is `0` (no debounce).
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:70-73`
### Resize callback
Execute custom logic when size changes:
```jsx theme={null}
function ChartWithResize() {
const handleResize = (width, height) => {
console.log('Chart resized to:', width, height);
};
return (
{/* ... */}
);
}
```
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:84-86`
## Common patterns
### Full-width chart with fixed height
Most common pattern for dashboard widgets:
```jsx theme={null}
```
### Full-size chart in a container
Fill a flex or grid container:
```jsx theme={null}
```
### Responsive with aspect ratio
Maintain proportions across screen sizes:
```jsx theme={null}
{/* 16:9 widescreen */}
```
### Mobile-responsive chart
Adjust for different screen sizes:
```jsx theme={null}
function MobileChart() {
const isMobile = window.innerWidth < 768;
return (
);
}
```
## Nested ResponsiveContainers
Avoid nesting ResponsiveContainers—they don't add responsiveness:
```jsx theme={null}
{/* ❌ Don't do this */}
{/* ... */}
{/* ✅ Do this instead */}
{/* ... */}
```
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:256-263`
## Initial dimensions
Set initial dimensions before the first resize:
```jsx theme={null}
{/* ... */}
```
Default is `{ width: -1, height: -1 }`.
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:55-61`
## Styling
### Container styling
Apply custom styles to the wrapper:
```jsx theme={null}
{/* ... */}
```
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:79-82`
### ID attribute
Add an ID for targeting:
```jsx theme={null}
{/* ... */}
```
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:75-78`
## Browser compatibility
ResponsiveContainer requires the ResizeObserver API, which is supported in all modern browsers. For older browsers, include a polyfill:
```bash theme={null}
npm install resize-observer-polyfill
```
```jsx theme={null}
import ResizeObserver from 'resize-observer-polyfill';
if (typeof window !== 'undefined' && !window.ResizeObserver) {
window.ResizeObserver = ResizeObserver;
}
```
## Server-side rendering
For SSR, ResponsiveContainer won't have dimensions on first render. The chart will appear after the first resize event on the client.
Provide initial dimensions to render something during SSR:
```jsx theme={null}
{/* ... */}
```
## Performance tips
**Use debounce for complex charts**
If your chart is slow to render, add debounce to reduce redraws during resize:
```jsx theme={null}
```
**Parent must have defined dimensions**
ResponsiveContainer needs a parent with explicit width/height. If the parent has no size, the chart won't render:
```jsx theme={null}
{/* ❌ Parent has no size */}
{/* ✅ Parent has explicit size */}
```
**Min-width in flexbox**
In flexbox layouts, set `minWidth={0}` to prevent issues:
```jsx theme={null}
```
This is the default behavior.
**Source:** `https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:126-128`
## Best practices
1. **Always use ResponsiveContainer** for production charts
2. **Set explicit height** when using `width="100%"`
3. **Use aspect ratio** for proportional scaling
4. **Add min/max constraints** for better control
5. **Test resize behavior** on different screen sizes
6. **Consider debounce** for performance-heavy charts