recharts/recharts · warning

The width(%s) and height(%s) of chart should be greater than

Error message

The width(%s) and height(%s) of chart should be greater than 0,
       please check the style of container, or the props width(%s) and height(%s),
       or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the
       height and width.

What it means

ResponsiveContainer renders its chart only when the measured container size yields a positive width and height. When the calculated dimensions are zero/undefined (container collapsed, invalid width/height props, or bad aspect), Recharts emits this console warning telling you the chart cannot be sized. It is a warn() (console.error/warn), not a thrown exception, and the chart simply renders at 0 size until the container gets a real dimension.

Source

Thrown at src/component/ResponsiveContainer.tsx:213

      observer.observe(containerRef.current);

      return () => {
        observer.disconnect();
      };
    }, [setContainerSize, debounce]);

    const { containerWidth, containerHeight } = sizes;

    warn(!aspect || aspect > 0, 'The aspect(%s) must be greater than zero.', aspect);

    const { calculatedWidth, calculatedHeight } = calculateChartDimensions(containerWidth, containerHeight, {
      width,
      height,
      aspect,
      maxHeight,
    });

    warn(
      containerWidth < 0 ||
        containerHeight < 0 ||
        (calculatedWidth != null && calculatedWidth > 0) ||
        (calculatedHeight != null && calculatedHeight > 0),
      `The width(%s) and height(%s) of chart should be greater than 0,
       please check the style of container, or the props width(%s) and height(%s),
       or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the
       height and width.`,
      calculatedWidth,
      calculatedHeight,
      width,
      height,
      minWidth,
      minHeight,
      aspect,
    );

    return (

View on GitHub (pinned to c161c10b0a)

Solutions

1. Give the ResponsiveContainer's parent an explicit width and height (e.g. style={{width:'100%',height:400}}) or a percentage chain that resolves to real pixels.
2. Add minWidth/minHeight props (or aspect) to ResponsiveContainer so a collapsed dimension falls back to a positive value.
3. Ensure the container participates in layout: remove display:none ancestors, use hidden-until-mounted patterns, or render the chart only after the tab/modal is visible.
4. Pass concrete numeric width/height props (e.g. width="99%" height={400}) instead of 0/undefined/percentages of an unsized parent.
5. If the warning appears only on first paint, ignore it or gate rendering with a resize callback (onResize) until real dimensions arrive.

Example fix

// before
<div className="chart-area">
  <ResponsiveContainer aspect={1.5}>
    <LineChart data={data}>...</LineChart>
  </ResponsiveContainer>
</div>
/* .chart-area { display:flex } -> collapses to 0 height */

// after
<div className="chart-area" style={{ width: '100%', height: 400 }}>
  <ResponsiveContainer minWidth={200} minHeight={200}>
    <LineChart data={data}>...</LineChart>
  </ResponsiveContainer>
</div>

// Before rendering, ensure the wrapper element has a resolvable size
function hasSize(el: HTMLElement | null): boolean {
  if (!el) return false;
  const { width, height } = el.getBoundingClientRect();
  return width > 0 && height > 0;
}
// usage
const ref = useRef<HTMLDivElement>(null);
if (!hasSize(ref.current)) {
  // fix CSS or defer rendering
}

function isPositiveSize(d: { width: number; height: number } | null | undefined): d is { width: number; height: number } {
  return !!d && d.width > 0 && d.height > 0;
}

When it happens

Trigger: Rendering <ResponsiveContainer> inside a parent whose computed width or height is 0 (e.g. display:flex parent without flex on the container, a hidden/collapsed tab, position:absolute without dimensions); passing aspect with width or height <= 0; passing percentage-based width/height props whose parent has no explicit size; rendering before the ResizeObserver fires with zero initial dimensions; setting minWidth/minHeight to 0 while the parent gives no space.

Common situations: Chart inside a flex row where the container has flex-grow but no width; chart inside a display:none tab panel that is later shown; chart inside a CSS grid cell with minmax(0,0); parent with height:100% but grandparent without height; React 18 StrictMode double-render before layout; SSR where ResizeObserver never runs and initial dimension is 0.

Related errors

• The aspect(%s) must be greater than zero.
• horizontalCoordinatesGenerator should return Array but inste
• verticalCoordinatesGenerator should return Array but instead
• Customized's props `component` must be React.element or Func

AI-assisted analysis of recharts/recharts@c161c10b0a (2026-08-29). Data as JSON: /api/errors/bcaba9c1495bb438. Report an issue: GitHub.