{"record":{"id":"bcaba9c1495bb438","repo":"recharts/recharts","slug":"the-width-s-and-height-s-of-chart-should-be-gr","errorCode":null,"errorMessage":"The width(%s) and height(%s) of chart should be greater than 0,\n       please check the style of container, or the props width(%s) and height(%s),\n       or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the\n       height and width.","messagePattern":"The width\\((.+?)\\) and height\\((.+?)\\) of chart should be greater than 0,\n       please check the style of container, or the props width\\((.+?)\\) and height\\((.+?)\\),\n       or add a minWidth\\((.+?)\\) or minHeight\\((.+?)\\) or use aspect\\((.+?)\\) to control the\n       height and width\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/component/ResponsiveContainer.tsx","lineNumber":213,"sourceCode":"      observer.observe(containerRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [setContainerSize, debounce]);\n\n    const { containerWidth, containerHeight } = sizes;\n\n    warn(!aspect || aspect > 0, 'The aspect(%s) must be greater than zero.', aspect);\n\n    const { calculatedWidth, calculatedHeight } = calculateChartDimensions(containerWidth, containerHeight, {\n      width,\n      height,\n      aspect,\n      maxHeight,\n    });\n\n    warn(\n      containerWidth < 0 ||\n        containerHeight < 0 ||\n        (calculatedWidth != null && calculatedWidth > 0) ||\n        (calculatedHeight != null && calculatedHeight > 0),\n      `The width(%s) and height(%s) of chart should be greater than 0,\n       please check the style of container, or the props width(%s) and height(%s),\n       or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the\n       height and width.`,\n      calculatedWidth,\n      calculatedHeight,\n      width,\n      height,\n      minWidth,\n      minHeight,\n      aspect,\n    );\n\n    return (","sourceCodeStart":195,"sourceCodeEnd":231,"githubUrl":"https://github.com/recharts/recharts/blob/c161c10b0a3326578d8b71b59025b83596ca9757/src/component/ResponsiveContainer.tsx#L195-L231","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["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.","Add minWidth/minHeight props (or aspect) to ResponsiveContainer so a collapsed dimension falls back to a positive value.","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.","Pass concrete numeric width/height props (e.g. width=\"99%\" height={400}) instead of 0/undefined/percentages of an unsized parent.","If the warning appears only on first paint, ignore it or gate rendering with a resize callback (onResize) until real dimensions arrive."],"exampleFix":"// before\n<div className=\"chart-area\">\n  <ResponsiveContainer aspect={1.5}>\n    <LineChart data={data}>...</LineChart>\n  </ResponsiveContainer>\n</div>\n/* .chart-area { display:flex } -> collapses to 0 height */\n\n// after\n<div className=\"chart-area\" style={{ width: '100%', height: 400 }}>\n  <ResponsiveContainer minWidth={200} minHeight={200}>\n    <LineChart data={data}>...</LineChart>\n  </ResponsiveContainer>\n</div>","handlingStrategy":"validation","validationCode":"// Before rendering, ensure the wrapper element has a resolvable size\nfunction hasSize(el: HTMLElement | null): boolean {\n  if (!el) return false;\n  const { width, height } = el.getBoundingClientRect();\n  return width > 0 && height > 0;\n}\n// usage\nconst ref = useRef<HTMLDivElement>(null);\nif (!hasSize(ref.current)) {\n  // fix CSS or defer rendering\n}","typeGuard":"function isPositiveSize(d: { width: number; height: number } | null | undefined): d is { width: number; height: number } {\n  return !!d && d.width > 0 && d.height > 0;\n}","tryCatchPattern":null,"preventionTips":["Always wrap ResponsiveContainer in a parent with explicit pixel or percentage-of-sized-chain width/height.","Set minWidth/minHeight props as a floor for collapsible layouts.","Avoid display:none ancestors; prefer visibility/absolute-offscreen or conditional mounting.","Prefer numeric height props over height:'100%' unless the whole ancestor chain is sized.","Test charts inside tabs, modals, and flex/grid layouts where dimensions often collapse to 0."],"tags":["recharts","responsive-container","zero-dimensions","layout","warning"],"backgroundTag":"chart-container-zero-size","analyzedSha":"c161c10b0a3326578d8b71b59025b83596ca9757","analyzedAt":"2026-08-29T09:33:26.293Z","schemaVersion":2},"datasetVersion":"2026-08-29T12:17:43.993Z"}