From d3690306d7a191ddb1212e6d7be2f34535ba3c69 Mon Sep 17 00:00:00 2001
From: Joao Silveira <jsilll@amazon.com>
Date: Tue, 28 Apr 2026 16:49:18 +0100
Subject: [PATCH 1/2] fix: hide chart during footer measurement when using
 bottom legend

---
 src/core/chart-container.tsx | 43 ++++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/core/chart-container.tsx b/src/core/chart-container.tsx
index 08e6a5cc..e33adfad 100644
--- a/src/core/chart-container.tsx
+++ b/src/core/chart-container.tsx
@@ -68,7 +68,7 @@ export function ChartContainer({
   const withMinHeight = (height: number) => Math.max(chartMinHeight ?? DEFAULT_CHART_MIN_HEIGHT, height) - heightOffset;
   const measuredChartHeight = withMinHeight(measures.chart - measures.header - measures.footer);
   const effectiveChartHeight = fitHeight ? measuredChartHeight : withMinHeight(chartHeight ?? DEFAULT_CHART_HEIGHT);
-  const hasLegend = primaryLegend || secondaryLegend;
+  const hasLegend = !!(primaryLegend || secondaryLegend);
   return (
     <div
       ref={refs.chart}
@@ -99,8 +99,15 @@ export function ChartContainer({
         </div>
       ) : (
         <div
-          style={chartMinWidth !== undefined ? { minInlineSize: chartMinWidth } : {}}
           className={clsx(styles["chart-plot-wrapper"], testClasses["chart-plot-wrapper"])}
+          style={getChartPlotWrapperStyles({
+            measures,
+            fitHeight,
+            hasLegend,
+            legendPosition,
+            chartMinWidth,
+            effectiveChartHeight,
+          })}
         >
           {verticalAxisTitle}
           {chart(effectiveChartHeight)}
@@ -125,10 +132,38 @@ export function ChartContainer({
   );
 }
 
+/**
+ * Computes the styles for the chart plot wrapper in the bottom/no-legend layout case.
+ * Includes visibility hiding when waiting for footer measurements with bottom legend.
+ * When fitHeight is enabled with a bottom legend, we must wait for the footer measurements to complete before
+ * we can compute the correct chart height. During this time, the chart is rendered but hidden with CSS.
+ */
+function getChartPlotWrapperStyles({
+  measures,
+  fitHeight,
+  hasLegend,
+  chartMinWidth,
+  legendPosition,
+}: {
+  hasLegend: boolean;
+  fitHeight?: boolean;
+  chartMinWidth?: number;
+  effectiveChartHeight: number;
+  legendPosition: "bottom" | "side";
+  measures: { header: number; footer: number; chart: number };
+}): React.CSSProperties {
+  const needsFooterMeasure =
+    fitHeight && hasLegend && legendPosition !== "side" && measures.footer === 0 && measures.chart > 0;
+  return {
+    ...(needsFooterMeasure && { visibility: "hidden" }),
+    ...(chartMinWidth !== undefined && { minInlineSize: chartMinWidth }),
+  };
+}
+
 // This hook combines 3 resize observer and does a small optimization to batch their updates in a single set-state.
 function useContainerQueries() {
-  const [measuresState, setMeasuresState] = useState({ ready: false, chart: 0, header: 0, footer: 0 });
-  const measuresRef = useRef({ ready: false, chart: 0, header: 0, footer: 0 });
+  const [measuresState, setMeasuresState] = useState({ chart: 0, header: 0, footer: 0 });
+  const measuresRef = useRef({ chart: 0, header: 0, footer: 0 });
   const measureDebounce = useRef(new DebouncedCall()).current;
   const setMeasure = (type: "chart" | "header" | "footer", value: number) => {
     measuresRef.current[type] = value;

From 07ef104222d3a243f2fc1cae2a33f1d82d9f220d Mon Sep 17 00:00:00 2001
From: Joao Silveira <jsilll@amazon.com>
Date: Tue, 28 Apr 2026 17:02:39 +0100
Subject: [PATCH 2/2] refactor: remove unused effectiveChartHeight parameter

---
 src/core/chart-container.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/core/chart-container.tsx b/src/core/chart-container.tsx
index e33adfad..4ae559cb 100644
--- a/src/core/chart-container.tsx
+++ b/src/core/chart-container.tsx
@@ -104,9 +104,8 @@ export function ChartContainer({
             measures,
             fitHeight,
             hasLegend,
-            legendPosition,
             chartMinWidth,
-            effectiveChartHeight,
+            legendPosition,
           })}
         >
           {verticalAxisTitle}
@@ -148,7 +147,6 @@ function getChartPlotWrapperStyles({
   hasLegend: boolean;
   fitHeight?: boolean;
   chartMinWidth?: number;
-  effectiveChartHeight: number;
   legendPosition: "bottom" | "side";
   measures: { header: number; footer: number; chart: number };
 }): React.CSSProperties {