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:

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

function ResponsiveChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Line dataKey="value" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

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:

{/* Fill 100% of parent width, fixed height */}
<ResponsiveContainer width="100%" height={400}>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

{/* Fill both dimensions */}
<ResponsiveContainer width="100%" height="100%">
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

Source: https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:36-44

Fixed dimensions

Use numbers for fixed pixel sizes:

<ResponsiveContainer width={600} height={400}>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

Aspect ratio

Maintain a specific width-to-height ratio:

{/* 16:9 aspect ratio */}
<ResponsiveContainer width="100%" aspect={16/9}>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

{/* 4:3 aspect ratio */}
<ResponsiveContainer width="100%" aspect={4/3}>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

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:

<ResponsiveContainer
  width="100%"
  height="100%"
  minWidth={300}
  minHeight={200}
>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

Source: https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:46-53

Maximum height

Cap the maximum height:

<ResponsiveContainer
  width="100%"
  height="100%"
  maxHeight={600}
>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

Source: https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:62-63

Resize detection

ResponsiveContainer uses the ResizeObserver API 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:

<ResponsiveContainer
  width="100%"
  height={400}
  debounce={200}  {/* Wait 200ms after resize stops */}
>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

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:

function ChartWithResize() {
  const handleResize = (width, height) => {
    console.log('Chart resized to:', width, height);
  };

  return (
    <ResponsiveContainer
      width="100%"
      height={400}
      onResize={handleResize}
    >
      <LineChart data={data}>
        {/* ... */}
      </LineChart>
    </ResponsiveContainer>
  );
}

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:

<ResponsiveContainer width="100%" height={400}>
  <LineChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <Line dataKey="value" stroke="#8884d8" />
  </LineChart>
</ResponsiveContainer>

Full-size chart in a container

Fill a flex or grid container:

<div style={{ width: '100%', height: '500px' }}>
  <ResponsiveContainer width="100%" height="100%">
    <LineChart data={data}>
      <XAxis dataKey="month" />
      <YAxis />
      <Line dataKey="value" stroke="#8884d8" />
    </LineChart>
  </ResponsiveContainer>
</div>

Responsive with aspect ratio

Maintain proportions across screen sizes:

{/* 16:9 widescreen */}
<ResponsiveContainer width="100%" aspect={16/9}>
  <BarChart data={data}>
    <XAxis dataKey="category" />
    <YAxis />
    <Bar dataKey="value" fill="#8884d8" />
  </BarChart>
</ResponsiveContainer>

Mobile-responsive chart

Adjust for different screen sizes:

function MobileChart() {
  const isMobile = window.innerWidth < 768;

  return (
    <ResponsiveContainer
      width="100%"
      height={isMobile ? 300 : 400}
      minHeight={250}
    >
      <LineChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Line dataKey="value" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

Nested ResponsiveContainers

Avoid nesting ResponsiveContainers—they don’t add responsiveness:

{/* ❌ Don't do this */}
<ResponsiveContainer width="100%" height={400}>
  <ResponsiveContainer width="100%" height="100%">
    <LineChart data={data}>
      {/* ... */}
    </LineChart>
  </ResponsiveContainer>
</ResponsiveContainer>

{/* ✅ Do this instead */}
<ResponsiveContainer width="100%" height={400}>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

Source: https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:256-263

Initial dimensions

Set initial dimensions before the first resize:

<ResponsiveContainer
  width="100%"
  height="100%"
  initialDimension={{ width: 600, height: 400 }}
>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

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:

<ResponsiveContainer
  width="100%"
  height={400}
  className="my-chart-container"
  style={{
    backgroundColor: '#f5f5f5',
    padding: '20px',
    borderRadius: '8px',
  }}
>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

Source: https://github.com/recharts/recharts/blob/main/src/component/ResponsiveContainer.tsx:79-82

ID attribute

Add an ID for targeting:

<ResponsiveContainer
  id="revenue-chart"
  width="100%"
  height={400}
>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

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:

npm install resize-observer-polyfill

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:

<ResponsiveContainer
  width="100%"
  height={400}
  initialDimension={{ width: 600, height: 400 }}
>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

Performance tips

Use debounce for complex charts

If your chart is slow to render, add debounce to reduce redraws during resize:

<ResponsiveContainer debounce={300}>

Parent must have defined dimensions

ResponsiveContainer needs a parent with explicit width/height. If the parent has no size, the chart won’t render:

{/* ❌ Parent has no size */}
<div>
  <ResponsiveContainer width="100%" height="100%">
    <LineChart data={data} />
  </ResponsiveContainer>
</div>

{/* ✅ Parent has explicit size */}
<div style={{ width: '100%', height: '400px' }}>
  <ResponsiveContainer width="100%" height="100%">
    <LineChart data={data} />
  </ResponsiveContainer>
</div>

Min-width in flexbox

In flexbox layouts, set minWidth={0} to prevent issues:

<ResponsiveContainer width="100%" height={400} minWidth={0}>

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