diff --git a/packages/polaris-viz/src/components/ChartContainer/ChartContainer.tsx b/packages/polaris-viz/src/components/ChartContainer/ChartContainer.tsx
index d4304d8f4..23ffa051e 100644
--- a/packages/polaris-viz/src/components/ChartContainer/ChartContainer.tsx
+++ b/packages/polaris-viz/src/components/ChartContainer/ChartContainer.tsx
@@ -19,7 +19,7 @@ import {useTheme, usePrefersReducedMotion} from '../../hooks';
 import type {SkeletonType} from '../ChartSkeleton';
 
 import styles from './ChartContainer.scss';
-import {ChartDimensions} from './components/';
+import {ContainerBounds} from './components/';
 
 interface Props {
   children: ReactElement;
@@ -87,7 +87,7 @@ export const ChartContainer = (props: Props) => {
         }}
         id={getChartId(value.id)}
       >
-        <ChartDimensions
+        <ContainerBounds
           data={props.data}
           onError={props.onError}
           onIsPrintingChange={setIsPrinting}
@@ -96,7 +96,7 @@ export const ChartContainer = (props: Props) => {
           scrollContainer={props.scrollContainer}
         >
           {props.children}
-        </ChartDimensions>
+        </ContainerBounds>
       </div>
     </ChartContext.Provider>
   );
diff --git a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/index.ts b/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/index.ts
deleted file mode 100644
index 0eb6b777b..000000000
--- a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {ChartDimensions} from './ChartDimensions';
diff --git a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.scss b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/ContainerBounds.scss
similarity index 90%
rename from packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.scss
rename to packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/ContainerBounds.scss
index 3a60b9cff..f8e57cab9 100644
--- a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.scss
+++ b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/ContainerBounds.scss
@@ -1,4 +1,4 @@
-.ChartDimensions {
+.ContainerBounds {
   height: 100%;
   width: 100%;
 }
diff --git a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.tsx b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/ContainerBounds.tsx
similarity index 80%
rename from packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.tsx
rename to packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/ContainerBounds.tsx
index 07adda5de..b4678eac2 100644
--- a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.tsx
+++ b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/ContainerBounds.tsx
@@ -3,7 +3,6 @@ import {cloneElement, useCallback, useLayoutEffect, useState} from 'react';
 import type {
   DataGroup,
   DataSeries,
-  Dimensions,
   ErrorBoundaryResponse,
   BoundingRect,
 } from '@shopify/polaris-viz-core';
@@ -18,9 +17,9 @@ import type {SkeletonType} from 'components/ChartSkeleton';
 import {ChartErrorBoundary} from '../../../ChartErrorBoundary';
 import {usePrintResizing, useResizeObserver} from '../../../../hooks';
 
-import styles from './ChartDimensions.scss';
+import styles from './ContainerBounds.scss';
 
-interface ChartDimensionsProps {
+interface ContainerBoundsProps {
   children: ReactElement;
   data: DataSeries[] | DataGroup[];
   onIsPrintingChange: Dispatch<SetStateAction<boolean>>;
@@ -30,7 +29,7 @@ interface ChartDimensionsProps {
   onError?: ErrorBoundaryResponse;
 }
 
-export function ChartDimensions({
+export function ContainerBounds({
   children,
   data,
   onIsPrintingChange,
@@ -38,11 +37,11 @@ export function ChartDimensions({
   sparkChart = false,
   skeletonType = 'Default',
   onError,
-}: ChartDimensionsProps) {
+}: ContainerBoundsProps) {
   const {chartContainer} = useTheme();
   const {onError: onErrorProvider} = usePolarisVizContext();
 
-  const [chartDimensions, setChartDimensions] =
+  const [containerBounds, setContainerBounds] =
     useState<BoundingRect | null>(null);
 
   const {ref, setRef, entry} = useResizeObserver();
@@ -51,7 +50,7 @@ export function ChartDimensions({
 
   usePrintResizing({
     ref,
-    setChartDimensions,
+    setContainerBounds,
     onIsPrintingChange,
   });
 
@@ -70,7 +69,7 @@ export function ChartDimensions({
     const scrollY =
       scrollContainer == null ? window.scrollY : scrollContainer.scrollTop;
 
-    setChartDimensions({width, height, x, y: y + scrollY});
+    setContainerBounds({width, height, x, y: y + scrollY});
   }, [entry, previousEntry?.contentRect, scrollContainer]);
 
   const debouncedUpdateDimensions = useDebouncedCallback(() => {
@@ -80,8 +79,8 @@ export function ChartDimensions({
   useLayoutEffect(() => {
     updateDimensions();
 
-    if (chartDimensions === null) {
-      setChartDimensions({
+    if (containerBounds === null) {
+      setContainerBounds({
         width: 0,
         height: sparkChart
           ? chartContainer.sparkChartMinHeight
@@ -106,7 +105,7 @@ export function ChartDimensions({
     entry,
     updateDimensions,
     debouncedUpdateDimensions,
-    chartDimensions,
+    containerBounds,
     chartContainer.minHeight,
     sparkChart,
     chartContainer.sparkChartMinHeight,
@@ -122,7 +121,7 @@ export function ChartDimensions({
 
     const bounds = ref.getBoundingClientRect();
 
-    setChartDimensions((prev) => {
+    setContainerBounds((prev) => {
       if (bounds.y === prev?.y && bounds.x === prev?.x) {
         return prev;
       }
@@ -138,7 +137,7 @@ export function ChartDimensions({
 
   return (
     <div
-      className={styles.ChartDimensions}
+      className={styles.ContainerBounds}
       ref={setRef}
       style={{
         minHeight: sparkChart
@@ -148,24 +147,24 @@ export function ChartDimensions({
       onMouseEnter={onMouseEnter}
       onFocus={onMouseEnter}
     >
-      {!hasValidDimensions(chartDimensions) ? null : (
+      {containerBounds == null || !hasValidBounds(containerBounds) ? null : (
         <ChartErrorBoundary
           type={skeletonType ?? 'Default'}
-          dimensions={chartDimensions!}
+          containerBounds={containerBounds}
           data={data}
           onError={onError ?? onErrorProvider}
         >
           <div
             className={styles.Chart}
             style={{
-              height: chartDimensions!.height,
-              width: chartDimensions!.width,
+              height: containerBounds.height,
+              width: containerBounds.width,
             }}
           >
             {cloneElement<{
-              dimensions: Dimensions;
+              containerBounds: BoundingRect;
             }>(children, {
-              dimensions: chartDimensions!,
+              containerBounds,
             })}
           </div>
         </ChartErrorBoundary>
@@ -174,10 +173,6 @@ export function ChartDimensions({
   );
 }
 
-function hasValidDimensions(chartDimensions: Dimensions | null) {
-  if (chartDimensions == null) {
-    return false;
-  }
-
-  return chartDimensions.width > 0 && chartDimensions.height > 0;
+function hasValidBounds(containerBounds: BoundingRect) {
+  return containerBounds.width > 0 && containerBounds.height > 0;
 }
diff --git a/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/index.ts b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/index.ts
new file mode 100644
index 000000000..9acf08087
--- /dev/null
+++ b/packages/polaris-viz/src/components/ChartContainer/components/ContainerBounds/index.ts
@@ -0,0 +1 @@
+export {ContainerBounds} from './ContainerBounds';
diff --git a/packages/polaris-viz/src/components/ChartContainer/components/index.ts b/packages/polaris-viz/src/components/ChartContainer/components/index.ts
index 9632f62c3..5ab6a5096 100644
--- a/packages/polaris-viz/src/components/ChartContainer/components/index.ts
+++ b/packages/polaris-viz/src/components/ChartContainer/components/index.ts
@@ -1 +1 @@
-export {ChartDimensions} from './ChartDimensions/';
+export {ContainerBounds} from './ContainerBounds/';
diff --git a/packages/polaris-viz/src/components/ChartErrorBoundary/ChartErrorBoundary.tsx b/packages/polaris-viz/src/components/ChartErrorBoundary/ChartErrorBoundary.tsx
index d46edba07..be9c7512b 100644
--- a/packages/polaris-viz/src/components/ChartErrorBoundary/ChartErrorBoundary.tsx
+++ b/packages/polaris-viz/src/components/ChartErrorBoundary/ChartErrorBoundary.tsx
@@ -1,7 +1,7 @@
 import type {
+  BoundingRect,
   DataGroup,
   DataSeries,
-  Dimensions,
   ErrorBoundaryResponse,
 } from '@shopify/polaris-viz-core';
 import {ChartState} from '@shopify/polaris-viz-core';
@@ -15,9 +15,9 @@ import {checkForMismatchedData} from './utilities/checkForMismatchedData';
 
 interface ErrorBoundaryProps {
   data: DataSeries[] | DataGroup[];
-  dimensions: Dimensions;
   type: SkeletonType;
   children?: ReactNode;
+  containerBounds?: BoundingRect;
   onError?: ErrorBoundaryResponse;
 }
 
@@ -60,7 +60,7 @@ export class ChartErrorBoundary extends Component<
         <ChartSkeleton
           type={this.props.type}
           state={ChartState.Error}
-          dimensions={this.props.dimensions}
+          containerBounds={this.props.containerBounds}
         />
       );
     }
diff --git a/packages/polaris-viz/src/components/ChartErrorBoundary/tests/ChartErrorBoundary.test.tsx b/packages/polaris-viz/src/components/ChartErrorBoundary/tests/ChartErrorBoundary.test.tsx
index 6e24c8e07..a3a34c808 100644
--- a/packages/polaris-viz/src/components/ChartErrorBoundary/tests/ChartErrorBoundary.test.tsx
+++ b/packages/polaris-viz/src/components/ChartErrorBoundary/tests/ChartErrorBoundary.test.tsx
@@ -8,7 +8,7 @@ import {BarChart} from '../../BarChart';
 
 const MOCK_PROPS = {
   data: [],
-  dimensions: {
+  containerDimensions: {
     width: 900,
     height: 400,
   },
diff --git a/packages/polaris-viz/src/components/ChartSkeleton/ChartSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/ChartSkeleton.tsx
index 10770e29b..a1248449f 100644
--- a/packages/polaris-viz/src/components/ChartSkeleton/ChartSkeleton.tsx
+++ b/packages/polaris-viz/src/components/ChartSkeleton/ChartSkeleton.tsx
@@ -1,4 +1,4 @@
-import type {Dimensions} from '@shopify/polaris-viz-core';
+import type {BoundingRect} from '@shopify/polaris-viz-core';
 import {ChartState, useTheme} from '@shopify/polaris-viz-core';
 
 import type {Size} from '../SimpleNormalizedChart';
@@ -23,7 +23,9 @@ export type SkeletonType =
   | 'SimpleNormalized';
 
 interface ChartSkeletonProps {
-  dimensions?: Dimensions;
+  // containerBounds is optional because it's passed down
+  // from ContainerBounds with cloneElement.
+  containerBounds?: BoundingRect;
   errorText?: string;
   state?: ChartState;
   theme?: string;
@@ -55,7 +57,7 @@ export interface SimpleNormalizedSkeletonProps extends ChartSkeletonProps {
   size?: Size;
 }
 
-type Props =
+export type Props =
   | DefaultSkeletonProps
   | DonutSkeletonProps
   | FunnelSkeletonProps
@@ -65,7 +67,7 @@ type Props =
 
 export function ChartSkeleton(props: Props) {
   const {
-    dimensions,
+    containerBounds,
     errorText = 'Could not load the chart',
     state = ChartState.Loading,
     theme,
@@ -76,17 +78,17 @@ export function ChartSkeleton(props: Props) {
     chartContainer: {backgroundColor},
   } = useTheme(theme);
 
-  const {width, height} = dimensions || {width: 0, height: 0};
+  const containerDimensions = {
+    height: containerBounds?.height ?? 0,
+    width: containerBounds?.width ?? 0,
+  };
 
   const SkeletonMarkup = () => {
     switch (type) {
       case 'Donut':
         return (
           <DonutSkeleton
-            dimensions={{
-              width,
-              height,
-            }}
+            containerDimensions={containerDimensions}
             state={state}
             errorText={errorText}
           />
@@ -94,10 +96,7 @@ export function ChartSkeleton(props: Props) {
       case 'Funnel':
         return (
           <FunnelSkeleton
-            dimensions={{
-              width,
-              height,
-            }}
+            containerDimensions={containerDimensions}
             state={state}
             errorText={errorText}
           />
@@ -105,10 +104,7 @@ export function ChartSkeleton(props: Props) {
       case 'SimpleBar':
         return (
           <SimpleBarSkeleton
-            dimensions={{
-              width,
-              height,
-            }}
+            containerDimensions={containerDimensions}
             state={state}
             errorText={errorText}
           />
@@ -117,10 +113,7 @@ export function ChartSkeleton(props: Props) {
         const {showLegend = true, size = 'small'} = props;
         return (
           <SimpleNormalizedSkeleton
-            dimensions={{
-              width,
-              height,
-            }}
+            containerDimensions={containerDimensions}
             state={state}
             errorText={errorText}
             showLegend={showLegend}
@@ -131,10 +124,7 @@ export function ChartSkeleton(props: Props) {
       case 'Spark':
         return (
           <SparkSkeleton
-            dimensions={{
-              width,
-              height,
-            }}
+            containerDimensions={containerDimensions}
             state={state}
             errorText={errorText}
           />
@@ -143,10 +133,7 @@ export function ChartSkeleton(props: Props) {
       default:
         return (
           <GridSkeleton
-            dimensions={{
-              width,
-              height,
-            }}
+            containerDimensions={containerDimensions}
             state={state}
             errorText={errorText}
           />
@@ -154,7 +141,7 @@ export function ChartSkeleton(props: Props) {
     }
   };
 
-  if (width === 0) return null;
+  if (containerDimensions.width === 0) return null;
 
   return (
     <div className={styles.Container}>
@@ -162,8 +149,8 @@ export function ChartSkeleton(props: Props) {
       {state === ChartState.Loading && (
         <Shimmer
           backgroundColor={backgroundColor}
-          width={width}
-          height={height}
+          width={containerDimensions.width}
+          height={containerDimensions.height}
         />
       )}
     </div>
diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/DonutSkeleton/DonutSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/DonutSkeleton/DonutSkeleton.tsx
index f1d14d497..10afce077 100644
--- a/packages/polaris-viz/src/components/ChartSkeleton/components/DonutSkeleton/DonutSkeleton.tsx
+++ b/packages/polaris-viz/src/components/ChartSkeleton/components/DonutSkeleton/DonutSkeleton.tsx
@@ -16,13 +16,13 @@ const RADIUS_PADDING = 20;
 const SECONDARY_DELAY = 200;
 
 interface Props {
-  dimensions: Dimensions;
+  containerDimensions: Dimensions;
   state: ChartState;
   errorText: string;
 }
 
 export function DonutSkeleton({
-  dimensions: {height, width},
+  containerDimensions: {height, width},
   state,
   errorText,
 }: Props) {
diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/FunnelSkeleton/FunnelSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/FunnelSkeleton/FunnelSkeleton.tsx
index f3f6520bc..9dd521030 100644
--- a/packages/polaris-viz/src/components/ChartSkeleton/components/FunnelSkeleton/FunnelSkeleton.tsx
+++ b/packages/polaris-viz/src/components/ChartSkeleton/components/FunnelSkeleton/FunnelSkeleton.tsx
@@ -11,13 +11,13 @@ import {Bar} from '../../../shared';
 import {ErrorText} from '../ErrorText';
 
 interface Props {
-  dimensions: Dimensions;
+  containerDimensions: Dimensions;
   state: ChartState;
   errorText: string;
 }
 
-export function FunnelSkeleton({dimensions, state, errorText}: Props) {
-  const {width, height} = dimensions;
+export function FunnelSkeleton({containerDimensions, state, errorText}: Props) {
+  const {width, height} = containerDimensions;
 
   const {
     grid: {color: gridColor},
diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/GridSkeleton/GridSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/GridSkeleton/GridSkeleton.tsx
index 49580c41c..d08db5b7d 100644
--- a/packages/polaris-viz/src/components/ChartSkeleton/components/GridSkeleton/GridSkeleton.tsx
+++ b/packages/polaris-viz/src/components/ChartSkeleton/components/GridSkeleton/GridSkeleton.tsx
@@ -16,13 +16,13 @@ const INITIAL_DELAY = 200;
 const NUMBER_OF_BRICKS = 5;
 
 interface Props {
-  dimensions: Dimensions;
+  containerDimensions: Dimensions;
   state: ChartState;
   errorText: string;
 }
 
-export function GridSkeleton({dimensions, state, errorText}: Props) {
-  const {width, height} = dimensions;
+export function GridSkeleton({containerDimensions, state, errorText}: Props) {
+  const {width, height} = containerDimensions;
 
   const {
     chartContainer: {padding},
diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.tsx
index 7fd0f8439..092ab2e7b 100644
--- a/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.tsx
+++ b/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.tsx
@@ -7,13 +7,17 @@ import {ErrorText} from '../ErrorText';
 import styles from './SimpleBarSkeleton.scss';
 
 interface Props {
-  dimensions: Dimensions;
+  containerDimensions: Dimensions;
   state: ChartState;
   errorText: string;
 }
 
-export function SimpleBarSkeleton({dimensions, state, errorText}: Props) {
-  const {width, height} = dimensions;
+export function SimpleBarSkeleton({
+  containerDimensions,
+  state,
+  errorText,
+}: Props) {
+  const {width, height} = containerDimensions;
 
   const {
     grid: {color: gridColor},
diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.tsx
index 8ad6f4df4..4549d6dfa 100644
--- a/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.tsx
+++ b/packages/polaris-viz/src/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.tsx
@@ -14,7 +14,7 @@ const SIZE_TO_PX = {
 };
 
 interface Props {
-  dimensions: Dimensions;
+  containerDimensions: Dimensions;
   errorText: string;
   showLegend: boolean;
   size: Size;
@@ -22,13 +22,13 @@ interface Props {
 }
 
 export function SimpleNormalizedSkeleton({
-  dimensions,
+  containerDimensions,
   errorText,
   showLegend,
   size,
   state,
 }: Props) {
-  const {width, height} = dimensions;
+  const {width, height} = containerDimensions;
 
   const {
     grid: {color: gridColor},
diff --git a/packages/polaris-viz/src/components/ChartSkeleton/components/SparkSkeleton/SparkSkeleton.tsx b/packages/polaris-viz/src/components/ChartSkeleton/components/SparkSkeleton/SparkSkeleton.tsx
index 6d0389659..ff6a4759f 100644
--- a/packages/polaris-viz/src/components/ChartSkeleton/components/SparkSkeleton/SparkSkeleton.tsx
+++ b/packages/polaris-viz/src/components/ChartSkeleton/components/SparkSkeleton/SparkSkeleton.tsx
@@ -8,13 +8,13 @@ import {
 import {ErrorText} from '../ErrorText';
 
 interface Props {
-  dimensions: Dimensions;
+  containerDimensions: Dimensions;
   state: ChartState;
   errorText: string;
 }
 
-export function SparkSkeleton({dimensions, state, errorText}: Props) {
-  const {width, height} = dimensions;
+export function SparkSkeleton({containerDimensions, state, errorText}: Props) {
+  const {width, height} = containerDimensions;
 
   const {
     grid: {color: gridColor},
diff --git a/packages/polaris-viz/src/components/ChartSkeleton/tests/ChartSkeleton.test.tsx b/packages/polaris-viz/src/components/ChartSkeleton/tests/ChartSkeleton.test.tsx
index 809102059..9c0dea278 100644
--- a/packages/polaris-viz/src/components/ChartSkeleton/tests/ChartSkeleton.test.tsx
+++ b/packages/polaris-viz/src/components/ChartSkeleton/tests/ChartSkeleton.test.tsx
@@ -1,5 +1,6 @@
 import {ChartState} from '@shopify/polaris-viz-core';
 
+import type {Props} from '../ChartSkeleton';
 import {ChartSkeleton} from '../ChartSkeleton';
 import {
   mountWithProvider,
@@ -7,10 +8,12 @@ import {
 } from '../../../test-utilities/mountWithProvider';
 import {Shimmer} from '../components';
 
-const MOCK_PROPS = {
-  dimensions: {
+const MOCK_PROPS: Props = {
+  containerBounds: {
     width: 900,
     height: 400,
+    x: 0,
+    y: 0,
   },
 };
 
diff --git a/packages/polaris-viz/src/components/ComboChart/Chart.tsx b/packages/polaris-viz/src/components/ComboChart/Chart.tsx
index 47694ff28..7627c8462 100644
--- a/packages/polaris-viz/src/components/ComboChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/ComboChart/Chart.tsx
@@ -9,7 +9,6 @@ import {
   LINE_HEIGHT,
 } from '@shopify/polaris-viz-core';
 import type {
-  Dimensions,
   DataGroup,
   BoundingRect,
   XAxisOptions,
@@ -61,14 +60,14 @@ export interface ChartProps {
   showLegend: boolean;
   theme: string;
   xAxisOptions: Required<XAxisOptions>;
-  dimensions?: Dimensions;
+  containerBounds?: BoundingRect;
   renderLegendContent?: RenderLegendContent;
 }
 
 export function Chart({
   annotationsLookupTable,
   data,
-  dimensions,
+  containerBounds,
   renderTooltipContent,
   showLegend,
   theme,
@@ -87,10 +86,15 @@ export function Chart({
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
   const [annotationsHeight, setAnnotationsHeight] = useState(0);
 
+  const containerDimensions = {
+    height: containerBounds?.height ?? 0,
+    width: containerBounds?.width ?? 0,
+  };
+
   const {legend, setLegendDimensions, height, width} = useLegend({
     colors,
     data,
-    dimensions,
+    containerDimensions,
     showLegend,
     seriesNameFormatter,
   });
@@ -335,6 +339,7 @@ export function Chart({
       {showLegend && (
         <LegendContainer
           colorVisionType={COLOR_VISION_SINGLE_ITEM}
+          containerDimensions={containerDimensions}
           data={legend}
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
diff --git a/packages/polaris-viz/src/components/ComboChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/ComboChart/tests/Chart.test.tsx
index e183b6209..a63050fb9 100644
--- a/packages/polaris-viz/src/components/ComboChart/tests/Chart.test.tsx
+++ b/packages/polaris-viz/src/components/ComboChart/tests/Chart.test.tsx
@@ -67,7 +67,7 @@ const DATA: DataGroup[] = [
 const PROPS: ChartProps = {
   annotationsLookupTable: {},
   data: DATA,
-  dimensions: {height: 400, width: 800},
+  containerBounds: {height: 400, width: 800, x: 0, y: 0},
   renderTooltipContent: () => null,
   showLegend: false,
   theme: 'Light',
diff --git a/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx b/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx
index 110088ea6..45074aaa7 100644
--- a/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx
+++ b/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx
@@ -242,7 +242,7 @@ export const SampleLegendContainer = ({theme} = {theme: 'Light'}) => {
       },
     ],
     showLegend: true,
-    dimensions: {height: 0, width: 0},
+    containerDimensions: {height: 0, width: 0},
     colors,
     seriesNameFormatter: (value) => `${value}`,
   });
@@ -254,6 +254,7 @@ export const SampleLegendContainer = ({theme} = {theme: 'Light'}) => {
           colorVisionType=""
           data={legend}
           onDimensionChange={() => {}}
+          containerDimensions={{height: 0, width: 0}}
         />
       </div>
     </SimpleContainer>
diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
index da01f72de..e626d6784 100644
--- a/packages/polaris-viz/src/components/DonutChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
@@ -13,9 +13,9 @@ import {
 import type {
   DataPoint,
   DataSeries,
-  Dimensions,
   LabelFormatter,
   Direction,
+  BoundingRect,
 } from '@shopify/polaris-viz-core';
 
 import {getAnimationDelayForItems} from '../../utilities/getAnimationDelayForItems';
@@ -55,7 +55,7 @@ export interface ChartProps {
   theme: string;
   accessibilityLabel?: string;
   comparisonMetric?: ComparisonMetricProps;
-  dimensions?: Dimensions;
+  containerBounds?: BoundingRect;
   errorText?: string;
   legendFullWidth?: boolean;
   renderInnerValueContent?: RenderInnerValueContent;
@@ -74,7 +74,7 @@ export function Chart({
   theme,
   accessibilityLabel = '',
   comparisonMetric,
-  dimensions = {height: 0, width: 0},
+  containerBounds,
   errorText,
   legendFullWidth = false,
   renderInnerValueContent,
@@ -100,13 +100,18 @@ export function Chart({
       ? 'vertical'
       : 'horizontal';
 
+  const containerDimensions = {
+    height: containerBounds?.height ?? 0,
+    width: containerBounds?.width ?? 0,
+  };
+
   const maxLegendWidth =
-    legendDirection === 'vertical' ? dimensions.width / 2 : 0;
+    legendDirection === 'vertical' ? containerDimensions.width / 2 : 0;
 
   const {height, width, legend, setLegendDimensions, isLegendMounted} =
     useLegend({
       data: [{series: data, shape: 'Bar'}],
-      dimensions,
+      containerDimensions,
       showLegend,
       direction: legendDirection,
       colors: seriesColor,
@@ -120,7 +125,7 @@ export function Chart({
 
   useColorVisionEvents({
     enabled: shouldUseColorVisionEvents,
-    dimensions: {...dimensions, x: 0, y: 0},
+    containerDimensions,
   });
 
   useWatchColorVisionEvents({
@@ -188,7 +193,7 @@ export function Chart({
       <LegendValues
         data={data}
         activeIndex={activeIndex}
-        dimensions={{...dimensions, x: 0, y: 0}}
+        containerDimensions={containerDimensions}
         legendFullWidth={legendFullWidth}
         labelFormatter={labelFormatter}
         getColorVisionStyles={getColorVisionStyles}
@@ -278,12 +283,12 @@ export function Chart({
               labelFormatter={labelFormatter}
               renderInnerValueContent={renderInnerValueContent}
               diameter={diameter}
-              dimensions={dimensions}
+              containerDimensions={containerDimensions}
             />
           </Fragment>
         ) : (
           <ChartSkeleton
-            dimensions={{width: diameter, height: diameter}}
+            containerBounds={{width: diameter, height: diameter, x: 0, y: 0}}
             state={state}
             type="Donut"
             errorText={errorText}
@@ -301,7 +306,7 @@ export function Chart({
           position={legendPosition}
           maxWidth={maxLegendWidth}
           enableHideOverflow={!isCornerPosition}
-          dimensions={{...dimensions, x: 0, y: 0}}
+          containerDimensions={containerDimensions}
           renderLegendContent={
             shouldRenderLegendContentWithValues
               ? renderLegendContentWithValues
diff --git a/packages/polaris-viz/src/components/DonutChart/components/InnerValue/InnerValue.tsx b/packages/polaris-viz/src/components/DonutChart/components/InnerValue/InnerValue.tsx
index 8c8528220..632c24db5 100644
--- a/packages/polaris-viz/src/components/DonutChart/components/InnerValue/InnerValue.tsx
+++ b/packages/polaris-viz/src/components/DonutChart/components/InnerValue/InnerValue.tsx
@@ -18,7 +18,7 @@ export interface InnerValueProps {
   totalValue: number;
   comparisonMetric?: ComparisonMetricProps;
   diameter: number;
-  dimensions: Dimensions;
+  containerDimensions: Dimensions;
   labelFormatter: LabelFormatter;
   renderInnerValueContent?: RenderInnerValueContent;
 }
@@ -32,7 +32,7 @@ export function InnerValue({
   renderInnerValueContent,
   totalValue,
   diameter,
-  dimensions,
+  containerDimensions,
 }: InnerValueProps) {
   const selectedTheme = useTheme();
 
@@ -67,7 +67,7 @@ export function InnerValue({
     activeIndex,
     animatedTotalValue,
     totalValue,
-    dimensions,
+    dimensions: containerDimensions,
   }) ?? (
     <Fragment>
       <animated.p
diff --git a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx
index f316991b4..872e950ec 100644
--- a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx
+++ b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @shopify/strict-component-boundaries */
 import type {ColorVisionInteractionMethods, DataSeries} from 'index';
-import type {BoundingRect, LabelFormatter} from '@shopify/polaris-viz-core';
+import type {Dimensions, LabelFormatter} from '@shopify/polaris-viz-core';
 import {
   COLOR_VISION_SINGLE_ITEM,
   clamp,
@@ -25,7 +25,7 @@ const TABLE_LEGEND_PADDING = 50;
 interface LegendContentProps {
   data: DataSeries[];
   activeIndex: number;
-  dimensions: BoundingRect;
+  containerDimensions: Dimensions;
   legendFullWidth: boolean;
   labelFormatter: LabelFormatter;
   renderHiddenLegendLabel?: RenderHiddenLegendLabel;
@@ -37,7 +37,7 @@ interface LegendContentProps {
 export function LegendValues({
   data: allData,
   activeIndex,
-  dimensions,
+  containerDimensions,
   legendFullWidth,
   labelFormatter,
   renderHiddenLegendLabel = (count) => `+${count} more`,
@@ -61,7 +61,7 @@ export function LegendValues({
     showLegend: true,
     data: [{series: allData, shape: 'Bar'}],
     colors: seriesColors,
-    dimensions,
+    containerDimensions,
     seriesNameFormatter,
   });
 
@@ -165,11 +165,11 @@ export function LegendValues({
           activeIndex={activeIndex}
           colorVisionType={COLOR_VISION_SINGLE_ITEM}
           data={hiddenData}
+          containerDimensions={containerDimensions}
           theme={theme}
           label={renderHiddenLegendLabel(allData.length - displayedData.length)}
           lastVisibleIndex={allData.length - hiddenData.length}
           setActivatorWidth={() => null}
-          dimensions={dimensions}
           seriesNameFormatter={seriesNameFormatter}
         />
       )}
diff --git a/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx b/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx
index e55358b4d..4426488fb 100644
--- a/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx
+++ b/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx
@@ -23,7 +23,7 @@ describe('<DonutChart />', () => {
       showLegend: true,
       theme: `Light`,
       labelFormatter: (value) => `${value}`,
-      dimensions: {width: 500, height: 500},
+      containerDimensions: {width: 500, height: 500},
       data: [
         {
           name: 'Shopify Payments',
diff --git a/packages/polaris-viz/src/components/FunnelChart/Chart.tsx b/packages/polaris-viz/src/components/FunnelChart/Chart.tsx
index 9243380b2..885c84d97 100644
--- a/packages/polaris-viz/src/components/FunnelChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/FunnelChart/Chart.tsx
@@ -1,8 +1,8 @@
 import {Fragment, useMemo, useState, useCallback} from 'react';
 import {scaleBand, scaleLinear} from 'd3-scale';
 import type {
+  BoundingRect,
   DataSeries,
-  Dimensions,
   XAxisOptions,
   YAxisOptions,
 } from '@shopify/polaris-viz-core';
@@ -36,13 +36,13 @@ export interface ChartProps {
   data: DataSeries[];
   xAxisOptions: Required<XAxisOptions>;
   yAxisOptions: Required<YAxisOptions>;
-  dimensions?: Dimensions;
+  containerBounds?: BoundingRect;
   labelHelpers?: LabelHelpers[];
 }
 
 export function Chart({
   data,
-  dimensions,
+  containerBounds,
   xAxisOptions,
   yAxisOptions,
   labelHelpers,
@@ -64,7 +64,7 @@ export function Chart({
     throw new Error('Data must be finite');
   }
 
-  const {width, height} = dimensions || {width: 0, height: 0};
+  const {width, height} = containerBounds ?? {width: 0, height: 0};
 
   const labels = useMemo(
     () => dataSeries.map(({key}) => xAxisOptions.labelFormatter(key)),
diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx
index 2a8f92e2f..b4f42a2ca 100644
--- a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx
@@ -65,15 +65,15 @@ export interface ChartProps {
   type: ChartType;
   xAxisOptions: Required<XAxisOptions>;
   yAxisOptions: Required<YAxisOptions>;
-  dimensions?: BoundingRect;
+  containerBounds?: BoundingRect;
   renderHiddenLegendLabel?: (count: number) => string;
   renderLegendContent?: RenderLegendContent;
 }
 
 export function Chart({
   annotationsLookupTable,
+  containerBounds,
   data,
-  dimensions,
   renderHiddenLegendLabel,
   renderLegendContent,
   renderTooltipContent,
@@ -96,6 +96,11 @@ export function Chart({
 
   const {longestSeriesCount, seriesColors} = useHorizontalSeriesColors(data);
 
+  const containerDimensions = {
+    height: containerBounds?.height ?? 0,
+    width: containerBounds?.width ?? 0,
+  };
+
   const {legend, setLegendDimensions, height, width} = useLegend({
     data: [
       {
@@ -103,7 +108,7 @@ export function Chart({
         series: data,
       },
     ],
-    dimensions,
+    containerDimensions,
     showLegend,
     colors: seriesColors,
     seriesNameFormatter,
@@ -310,8 +315,8 @@ export function Chart({
       {showLegend && (
         <LegendContainer
           colorVisionType={COLOR_VISION_SINGLE_ITEM}
+          containerDimensions={containerDimensions}
           data={legend}
-          dimensions={dimensions}
           enableHideOverflow
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/HorizontalBarChart.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/HorizontalBarChart.tsx
index 3d8dfef1f..ae4b33eae 100644
--- a/packages/polaris-viz/src/components/HorizontalBarChart/HorizontalBarChart.tsx
+++ b/packages/polaris-viz/src/components/HorizontalBarChart/HorizontalBarChart.tsx
@@ -24,7 +24,7 @@ export interface HorizontalBarChartProps {
   xAxisOptions: Required<XAxisOptions>;
   yAxisOptions: Required<YAxisOptions>;
   annotationsLookupTable?: AnnotationLookupTable;
-  dimensions?: BoundingRect;
+  containerBounds?: BoundingRect;
   renderHiddenLegendLabel?: (count: number) => string;
   renderLegendContent?: RenderLegendContent;
   type?: ChartType;
@@ -33,7 +33,7 @@ export interface HorizontalBarChartProps {
 export function HorizontalBarChart({
   annotationsLookupTable = {},
   data,
-  dimensions,
+  containerBounds,
   renderHiddenLegendLabel,
   renderLegendContent,
   renderTooltipContent,
@@ -45,7 +45,7 @@ export function HorizontalBarChart({
 }: HorizontalBarChartProps) {
   return (
     <Chart
-      dimensions={dimensions}
+      containerBounds={containerBounds}
       annotationsLookupTable={annotationsLookupTable}
       data={data}
       renderTooltipContent={renderTooltipContent}
diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/tests/Chart.test.tsx
index b3bd10436..6a83f5da8 100644
--- a/packages/polaris-viz/src/components/HorizontalBarChart/tests/Chart.test.tsx
+++ b/packages/polaris-viz/src/components/HorizontalBarChart/tests/Chart.test.tsx
@@ -55,7 +55,7 @@ const DATA: DataSeries[] = [
 
 const MOCK_PROPS: ChartProps = {
   annotationsLookupTable: {},
-  dimensions: {
+  containerBounds: {
     height: 300,
     width: 600,
     x: 0,
@@ -72,6 +72,7 @@ const MOCK_PROPS: ChartProps = {
     fixedWidth: false,
     labelFormatter: (value) => `${value}`,
     integersOnly: false,
+    maxYOverride: 100,
   },
   showLegend: false,
   type: 'default',
diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/tests/HorizontalBarChart.test.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/tests/HorizontalBarChart.test.tsx
index 5b9d2411b..38ad903ba 100644
--- a/packages/polaris-viz/src/components/HorizontalBarChart/tests/HorizontalBarChart.test.tsx
+++ b/packages/polaris-viz/src/components/HorizontalBarChart/tests/HorizontalBarChart.test.tsx
@@ -31,7 +31,7 @@ const mockProps: HorizontalBarChartProps = {
   },
   renderTooltipContent: (value) => `${value}`,
   showLegend: false,
-  dimensions: {
+  containerDimensions: {
     height: 400,
     width: 400,
   },
diff --git a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx
index 87d455a8b..166608b5c 100644
--- a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx
+++ b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx
@@ -9,11 +9,7 @@ import {
   useChartContext,
   useTheme,
 } from '@shopify/polaris-viz-core';
-import type {
-  Direction,
-  Dimensions,
-  BoundingRect,
-} from '@shopify/polaris-viz-core';
+import type {Direction, Dimensions} from '@shopify/polaris-viz-core';
 
 import {DEFAULT_LEGEND_HEIGHT, DEFAULT_LEGEND_WIDTH} from '../../constants';
 import {useResizeObserver, useWatchColorVisionEvents} from '../../hooks';
@@ -33,6 +29,7 @@ import {useOverflowLegend} from './hooks/useOverflowLegend';
 
 export interface LegendContainerProps {
   colorVisionType: string;
+  containerDimensions: Dimensions;
   data: LegendData[];
   onDimensionChange: Dispatch<SetStateAction<Dimensions>>;
   direction?: Direction;
@@ -43,7 +40,6 @@ export interface LegendContainerProps {
   /* If enabled, hides overflowing legend items with "+ n more" */
   enableHideOverflow?: boolean;
   renderHiddenLegendLabel?: RenderHiddenLegendLabel;
-  dimensions?: BoundingRect;
 }
 
 export function LegendContainer({
@@ -57,7 +53,7 @@ export function LegendContainer({
   renderLegendContent,
   enableHideOverflow = false,
   renderHiddenLegendLabel = (count) => `+${count} more`,
-  dimensions,
+  containerDimensions,
 }: LegendContainerProps) {
   const selectedTheme = useTheme();
   const {setRef, entry} = useResizeObserver();
@@ -82,7 +78,7 @@ export function LegendContainer({
           data: allData,
           enableHideOverflow,
           legendItemDimensions,
-          width: dimensions?.width || 0,
+          width: containerDimensions?.width || 0,
           activatorWidth,
           leftMargin,
           horizontalMargin,
@@ -90,7 +86,7 @@ export function LegendContainer({
       : ({
           direction: 'vertical' as const,
           data: allData,
-          height: dimensions?.height,
+          height: containerDimensions?.height,
           enableHideOverflow,
           legendItemDimensions,
         } as UseOverflowLegendProps);
@@ -184,6 +180,7 @@ export function LegendContainer({
             <HiddenLegendTooltip
               activeIndex={activeIndex}
               colorVisionType={colorVisionType}
+              containerDimensions={containerDimensions}
               data={hiddenData}
               theme={theme}
               label={renderHiddenLegendLabel(
@@ -191,7 +188,6 @@ export function LegendContainer({
               )}
               lastVisibleIndex={allData.length - hiddenData.length}
               setActivatorWidth={setActivatorWidth}
-              dimensions={dimensions}
             />
           )}
         </Fragment>
diff --git a/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx b/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx
index 537a9a1ac..6dc109f4c 100644
--- a/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx
+++ b/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx
@@ -13,7 +13,7 @@ import {
   useChartContext,
   useTheme,
 } from '@shopify/polaris-viz-core';
-import type {BoundingRect, LabelFormatter} from '@shopify/polaris-viz-core';
+import type {Dimensions, LabelFormatter} from '@shopify/polaris-viz-core';
 
 import {getFontSize} from '../../../utilities/getFontSize';
 import type {LegendData} from '../../../types';
@@ -29,12 +29,12 @@ import style from './HiddenLegendTooltip.scss';
 interface Props {
   activeIndex: number;
   colorVisionType: string;
+  containerDimensions: Dimensions;
   data: LegendData[];
   label: ReactNode;
   setActivatorWidth: (width: number) => void;
   theme?: string;
   lastVisibleIndex?: number;
-  dimensions?: BoundingRect;
   seriesNameFormatter?: LabelFormatter;
 }
 
@@ -44,12 +44,12 @@ export const LEGEND_TOOLIP_Z_INDEX = 520;
 export function HiddenLegendTooltip({
   activeIndex,
   colorVisionType,
+  containerDimensions,
   data,
   theme,
   label,
   lastVisibleIndex = 0,
   setActivatorWidth,
-  dimensions,
   seriesNameFormatter,
 }: Props) {
   const selectedTheme = useTheme();
@@ -59,7 +59,11 @@ export function HiddenLegendTooltip({
   const container = useRootContainer(tooltipId);
   const tooltipRef = useRef<HTMLDivElement>(null);
   const activatorRef = useRef<HTMLButtonElement>(null);
-  useColorVisionEvents({enabled: true, root: LEGEND_TOOLTIP_ID, dimensions});
+  useColorVisionEvents({
+    enabled: true,
+    root: LEGEND_TOOLTIP_ID,
+    containerDimensions,
+  });
 
   const defaultPosition = useMemo(
     () => ({
diff --git a/packages/polaris-viz/src/components/LegendContainer/hooks/tests/useLegend.test.tsx b/packages/polaris-viz/src/components/LegendContainer/hooks/tests/useLegend.test.tsx
index 3400e340d..2aab154a4 100644
--- a/packages/polaris-viz/src/components/LegendContainer/hooks/tests/useLegend.test.tsx
+++ b/packages/polaris-viz/src/components/LegendContainer/hooks/tests/useLegend.test.tsx
@@ -33,7 +33,7 @@ const DATAGROUP: DataGroup[] = [
 ];
 
 const MOCK_PROPS: Props = {
-  dimensions: {height: 100, width: 100},
+  containerDimensions: {height: 100, width: 100},
   showLegend: true,
   data: DATAGROUP,
   seriesNameFormatter: (value) => `${value}`,
diff --git a/packages/polaris-viz/src/components/LegendContainer/hooks/useLegend.ts b/packages/polaris-viz/src/components/LegendContainer/hooks/useLegend.ts
index 019f30d13..18df46762 100644
--- a/packages/polaris-viz/src/components/LegendContainer/hooks/useLegend.ts
+++ b/packages/polaris-viz/src/components/LegendContainer/hooks/useLegend.ts
@@ -12,12 +12,12 @@ import {DEFAULT_LEGEND_HEIGHT} from '../../../constants';
 import type {LegendData} from '../../../types';
 
 function getAlteredDimensions(
-  dimensions: Dimensions | undefined,
+  containerDimensions: Dimensions,
   legendsHeight: number,
   legendsWidth: number,
   direction: Direction,
 ) {
-  const {width, height} = dimensions ?? {width: 0, height: 0};
+  const {width, height} = containerDimensions;
   const isHorizontal = direction === 'horizontal';
 
   return {
@@ -29,17 +29,17 @@ function getAlteredDimensions(
 export interface Props {
   showLegend: boolean;
   data: DataGroup[];
+  containerDimensions: Dimensions;
   seriesNameFormatter: LabelFormatter;
   colors?: Color[];
-  dimensions?: Dimensions;
   direction?: Direction;
   maxWidth?: number;
 }
 
 export function useLegend({
   colors = [],
+  containerDimensions,
   data,
-  dimensions = {height: 0, width: 0},
   showLegend,
   direction = 'horizontal',
   maxWidth = 0,
@@ -84,18 +84,18 @@ export function useLegend({
 
   const {height, width} = useMemo(() => {
     if (showLegend === false) {
-      return dimensions;
+      return containerDimensions;
     }
 
     return getAlteredDimensions(
-      dimensions,
+      containerDimensions,
       legendDimensions.height,
       legendDimensions.width,
       direction,
     );
   }, [
     showLegend,
-    dimensions,
+    containerDimensions,
     legendDimensions.height,
     legendDimensions.width,
     direction,
diff --git a/packages/polaris-viz/src/components/LegendContainer/tests/LegendsContainer.test.tsx b/packages/polaris-viz/src/components/LegendContainer/tests/LegendsContainer.test.tsx
index d63bb00d4..6f6ebf113 100644
--- a/packages/polaris-viz/src/components/LegendContainer/tests/LegendsContainer.test.tsx
+++ b/packages/polaris-viz/src/components/LegendContainer/tests/LegendsContainer.test.tsx
@@ -16,7 +16,7 @@ const mockProps: LegendContainerProps = {
     {name: 'Legend Three', color: 'yellow'},
   ],
   onDimensionChange: jest.fn(),
-  dimensions: {
+  containerDimensions: {
     width: 0,
     height: 0,
   },
@@ -77,7 +77,10 @@ describe('<LegendContainer />', () => {
       const component = mount(
         <LegendContainer
           {...mockProps}
-          dimensions={{...mockProps.dimensions, width: WIDTH_WITH_OVERFLOW}}
+          containerDimensions={{
+            ...mockProps.containerDimensions,
+            width: WIDTH_WITH_OVERFLOW,
+          }}
           enableHideOverflow={false}
         />,
       );
@@ -89,7 +92,10 @@ describe('<LegendContainer />', () => {
       const component = mount(
         <LegendContainer
           {...mockProps}
-          dimensions={{...mockProps.dimensions, width: WIDTH_WITH_OVERFLOW}}
+          containerDimensions={{
+            ...mockProps.containerDimensions,
+            width: WIDTH_WITH_OVERFLOW,
+          }}
           enableHideOverflow
         />,
       );
@@ -117,7 +123,10 @@ describe('<LegendContainer />', () => {
       const component = mount(
         <LegendContainer
           {...mockProps}
-          dimensions={{...mockProps.dimensions, width: WIDTH_WITH_OVERFLOW}}
+          containerDimensions={{
+            ...mockProps.containerDimensions,
+            width: WIDTH_WITH_OVERFLOW,
+          }}
           enableHideOverflow
         />,
       );
@@ -129,7 +138,10 @@ describe('<LegendContainer />', () => {
       const component = mount(
         <LegendContainer
           {...mockProps}
-          dimensions={{...mockProps.dimensions, width: WIDTH_WITHOUT_OVERFLOW}}
+          containerDimensions={{
+            ...mockProps.containerDimensions,
+            width: WIDTH_WITHOUT_OVERFLOW,
+          }}
           enableHideOverflow
         />,
       );
@@ -143,7 +155,10 @@ describe('<LegendContainer />', () => {
       const component = mount(
         <LegendContainer
           {...mockProps}
-          dimensions={{...mockProps.dimensions, width: WIDTH_WITH_OVERFLOW}}
+          containerDimensions={{
+            ...mockProps.containerDimensions,
+            width: WIDTH_WITH_OVERFLOW,
+          }}
           enableHideOverflow
         />,
       );
@@ -157,7 +172,10 @@ describe('<LegendContainer />', () => {
       const component = mount(
         <LegendContainer
           {...mockProps}
-          dimensions={{...mockProps.dimensions, width: WIDTH_WITH_OVERFLOW}}
+          containerDimensions={{
+            ...mockProps.containerDimensions,
+            width: WIDTH_WITH_OVERFLOW,
+          }}
           enableHideOverflow
           renderHiddenLegendLabel={(x) => `Custom legend label ${x}`}
         />,
diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx
index 549829cce..9154a462c 100644
--- a/packages/polaris-viz/src/components/LineChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/LineChart/Chart.tsx
@@ -78,7 +78,7 @@ export interface ChartProps {
   hideLegendOverflow: boolean;
   xAxisOptions: Required<XAxisOptions>;
   yAxisOptions: Required<YAxisOptions>;
-  dimensions?: BoundingRect;
+  containerBounds?: BoundingRect;
   emptyStateText?: string;
   renderLegendContent?: RenderLegendContent;
   renderHiddenLegendLabel?: RenderHiddenLegendLabel;
@@ -92,7 +92,7 @@ export function Chart({
   annotationsLookupTable,
   emptyStateText,
   data,
-  dimensions,
+  containerBounds,
   renderLegendContent,
   renderTooltipContent,
   renderHiddenLegendLabel,
@@ -104,19 +104,24 @@ export function Chart({
   xAxisOptions,
   yAxisOptions,
 }: ChartProps) {
-  useColorVisionEvents({
-    enabled: data.length > 1,
-    dimensions,
-  });
-
   const selectedTheme = useTheme(theme);
   const {isPerformanceImpacted} = useChartContext();
 
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
   const [activeLineIndex, setActiveLineIndex] = useState(-1);
 
+  const containerDimensions = {
+    height: containerBounds?.height ?? 0,
+    width: containerBounds?.width ?? 0,
+  };
+
+  useColorVisionEvents({
+    enabled: data.length > 1,
+    containerDimensions,
+  });
+
   const isSmallChart = Boolean(
-    dimensions && dimensions?.height < SMALL_CHART_HEIGHT,
+    containerBounds != null && containerBounds.height < SMALL_CHART_HEIGHT,
   );
 
   const hideXAxis =
@@ -133,7 +138,7 @@ export function Chart({
         series: data,
       },
     ],
-    dimensions,
+    containerDimensions,
     showLegend: showLegend && !isSmallChart,
     seriesNameFormatter,
   });
@@ -254,8 +259,8 @@ export function Chart({
       const x = xScale?.(activeIndex) ?? 0;
 
       return {
-        x: x + (dimensions?.x ?? 0),
-        y: dimensions?.y ?? 0,
+        x: x + (containerBounds?.x ?? 0),
+        y: containerBounds?.y ?? 0,
         activeIndex,
       };
     }
@@ -285,8 +290,8 @@ export function Chart({
   const chartBounds: BoundingRect = {
     width,
     height,
-    x: dimensions?.x ?? chartXPosition,
-    y: dimensions?.y ?? chartYPosition,
+    x: containerBounds?.x ?? chartXPosition,
+    y: containerBounds?.y ?? chartYPosition,
   };
 
   const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations(
@@ -448,11 +453,11 @@ export function Chart({
       {showLegend && !isSmallChart && (
         <LegendContainer
           colorVisionType={COLOR_VISION_SINGLE_ITEM}
+          containerDimensions={containerDimensions}
           data={legend}
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
           renderHiddenLegendLabel={renderHiddenLegendLabel}
-          dimensions={dimensions}
           enableHideOverflow={hideLegendOverflow}
         />
       )}
diff --git a/packages/polaris-viz/src/components/LineChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/LineChart/tests/Chart.test.tsx
index e0c45f526..89c8ab534 100644
--- a/packages/polaris-viz/src/components/LineChart/tests/Chart.test.tsx
+++ b/packages/polaris-viz/src/components/LineChart/tests/Chart.test.tsx
@@ -41,6 +41,11 @@ const MOCK_DATA: Required<LineChartDataSeriesWithDefaults> = {
     {key: 'Jan 3', value: 800},
     {key: 'Jan 4', value: 1300},
   ],
+  metadata: {},
+  styleOverride: {},
+  fillValue: 0,
+  strokeDasharray: '',
+  width: 1,
 };
 
 const xAxisOptions: Required<XAxisOptions> = {
@@ -59,12 +64,13 @@ const yAxisOptions: Required<YAxisOptions> = {
 const MOCK_PROPS: ChartProps = {
   data: [MOCK_DATA],
   annotationsLookupTable: {},
-  dimensions: {width: 500, height: 250, x: 0, y: 0},
+  containerBounds: {width: 500, height: 250, x: 0, y: 0},
   xAxisOptions,
   yAxisOptions,
   renderTooltipContent: jest.fn(() => <p>Mock Tooltip</p>),
   showLegend: false,
   seriesNameFormatter: (value) => `${value}`,
+  hideLegendOverflow: false,
 };
 
 jest.mock('@shopify/polaris-viz-core/src/utilities/estimateStringWidth', () => {
@@ -551,7 +557,10 @@ describe('<Chart />', () => {
 
     it('does not render <LegendContainer /> when the chart has a height of less than 125', () => {
       const chart = mount(
-        <Chart {...MOCK_PROPS} dimensions={{width: 100, height: 100}} />,
+        <Chart
+          {...MOCK_PROPS}
+          containerDimensions={{width: 100, height: 100}}
+        />,
       );
       expect(chart).not.toContainReactComponent(LegendContainer);
     });
diff --git a/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx b/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx
index 2ae21de3a..4a9975e57 100644
--- a/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx
@@ -5,8 +5,8 @@ import {
   useAriaLabel,
 } from '@shopify/polaris-viz-core';
 import type {
+  BoundingRect,
   ChartType,
-  Dimensions,
   LabelFormatter,
   XAxisOptions,
   YAxisOptions,
@@ -40,14 +40,14 @@ export interface ChartProps {
   type: ChartType;
   xAxisOptions: Required<XAxisOptions>;
   yAxisOptions: Required<YAxisOptions>;
-  dimensions?: Dimensions;
+  containerBounds?: BoundingRect;
   renderLegendContent?: RenderLegendContent;
   legendPosition?: LegendPosition;
 }
 
 export function Chart({
   data,
-  dimensions,
+  containerBounds,
   renderLegendContent,
   legendPosition = 'bottom-right',
   seriesNameFormatter,
@@ -66,6 +66,11 @@ export function Chart({
 
   const {longestSeriesCount, seriesColors} = useHorizontalSeriesColors(data);
 
+  const containerDimensions = {
+    width: containerBounds?.width ?? 0,
+    height: containerBounds?.height ?? 0,
+  };
+
   const {legend, setLegendDimensions, height, width} = useLegend({
     data: [
       {
@@ -73,7 +78,7 @@ export function Chart({
         series: data,
       },
     ],
-    dimensions,
+    containerDimensions,
     colors: seriesColors,
     showLegend,
     seriesNameFormatter,
@@ -182,6 +187,7 @@ export function Chart({
       {showLegend && (
         <LegendContainer
           colorVisionType={COLOR_VISION_SINGLE_ITEM}
+          containerDimensions={containerDimensions}
           data={legend}
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
diff --git a/packages/polaris-viz/src/components/SimpleBarChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/SimpleBarChart/tests/Chart.test.tsx
index 9294d12bf..3d29bb7ee 100644
--- a/packages/polaris-viz/src/components/SimpleBarChart/tests/Chart.test.tsx
+++ b/packages/polaris-viz/src/components/SimpleBarChart/tests/Chart.test.tsx
@@ -40,9 +40,11 @@ const SERIES: DataSeries[] = [
 ];
 
 const MOCK_PROPS: ChartProps = {
-  dimensions: {
+  containerBounds: {
     height: 300,
     width: 600,
+    x: 0,
+    y: 0,
   },
   data: SERIES,
   xAxisOptions: {
@@ -54,6 +56,7 @@ const MOCK_PROPS: ChartProps = {
     fixedWidth: false,
     labelFormatter: (value) => `${value}`,
     integersOnly: false,
+    maxYOverride: 100,
   },
   type: 'default',
   showLegend: true,
diff --git a/packages/polaris-viz/src/components/SparkBarChart/Chart.tsx b/packages/polaris-viz/src/components/SparkBarChart/Chart.tsx
index 1628b05cc..63ea434b9 100644
--- a/packages/polaris-viz/src/components/SparkBarChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/SparkBarChart/Chart.tsx
@@ -1,6 +1,6 @@
 import {Fragment} from 'react';
 import {useTransition} from '@react-spring/web';
-import type {Dimensions} from '@shopify/polaris-viz-core';
+import type {BoundingRect} from '@shopify/polaris-viz-core';
 import {
   ANIMATION_MARGIN,
   SparkBarSeries,
@@ -13,17 +13,17 @@ import styles from './SparkBarChart.scss';
 import type {SparkBarChartProps} from './SparkBarChart';
 
 interface Props extends SparkBarChartProps {
-  dimensions?: Dimensions;
+  containerBounds?: BoundingRect;
 }
 
 export function Chart({
   data,
-  dimensions,
+  containerBounds,
   targetLine,
   accessibilityLabel,
 }: Props) {
   const {shouldAnimate} = useChartContext();
-  const {width, height} = dimensions ?? {width: 0, height: 0};
+  const {width, height} = containerBounds ?? {width: 0, height: 0};
 
   const viewboxHeight = height + ANIMATION_MARGIN * 2;
 
diff --git a/packages/polaris-viz/src/components/SparkBarChart/SparkBarChart.tsx b/packages/polaris-viz/src/components/SparkBarChart/SparkBarChart.tsx
index fe9f56be1..6a312f0bd 100644
--- a/packages/polaris-viz/src/components/SparkBarChart/SparkBarChart.tsx
+++ b/packages/polaris-viz/src/components/SparkBarChart/SparkBarChart.tsx
@@ -3,11 +3,7 @@ import {
   ChartState,
   usePolarisVizContext,
 } from '@shopify/polaris-viz-core';
-import type {
-  Dimensions,
-  ChartProps,
-  TargetLine,
-} from '@shopify/polaris-viz-core';
+import type {ChartProps, TargetLine} from '@shopify/polaris-viz-core';
 
 import {ChartContainer} from '../ChartContainer';
 import {ChartSkeleton} from '../';
@@ -17,7 +13,6 @@ import {Chart} from './Chart';
 export type SparkBarChartProps = {
   targetLine?: TargetLine;
   accessibilityLabel?: string;
-  dimensions?: Dimensions;
 } & ChartProps;
 
 export function SparkBarChart(props: SparkBarChartProps) {
diff --git a/packages/polaris-viz/src/components/SparkLineChart/Chart.tsx b/packages/polaris-viz/src/components/SparkLineChart/Chart.tsx
index 77a30c436..13823e43f 100644
--- a/packages/polaris-viz/src/components/SparkLineChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/SparkLineChart/Chart.tsx
@@ -7,7 +7,7 @@ import {
   useFilteredSparkLineData,
   useSparkLine,
 } from '@shopify/polaris-viz-core';
-import type {Dimensions} from '@shopify/polaris-viz-core';
+import type {BoundingRect} from '@shopify/polaris-viz-core';
 
 import {useThemeSeriesColors} from '../../hooks/useThemeSeriesColors';
 import {useTheme} from '../../hooks';
@@ -19,12 +19,12 @@ import type {SparkLineChartProps} from './SparkLineChart';
 const SVG_MARGIN = 2;
 
 interface Props extends SparkLineChartProps {
-  dimensions?: Dimensions;
+  containerBounds?: BoundingRect;
 }
 
 export function Chart({
   data,
-  dimensions,
+  containerBounds,
   accessibilityLabel,
   offsetLeft = 0,
   offsetRight = 0,
@@ -35,7 +35,7 @@ export function Chart({
   const filteredData = useFilteredSparkLineData(data);
   const seriesColors = useThemeSeriesColors(filteredData, selectedTheme);
 
-  const {width, height} = dimensions ?? {height: 0, width: 0};
+  const {width, height} = containerBounds ?? {height: 0, width: 0};
 
   const {minXDomain, maxXDomain, yScale} = useSparkLine({
     data: filteredData,
diff --git a/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx b/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx
index a05e5ef56..78d0865fe 100644
--- a/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx
@@ -81,7 +81,7 @@ export interface Props {
   theme: string;
   xAxisOptions: Required<XAxisOptions>;
   yAxisOptions: Required<YAxisOptions>;
-  dimensions?: BoundingRect;
+  containerBounds?: BoundingRect;
   renderLegendContent?: RenderLegendContent;
   renderHiddenLegendLabel?: (count: number) => string;
 }
@@ -90,7 +90,7 @@ export function Chart({
   annotationsLookupTable,
   xAxisOptions,
   data,
-  dimensions,
+  containerBounds,
   renderLegendContent,
   renderTooltipContent,
   showLegend,
@@ -99,16 +99,21 @@ export function Chart({
   renderHiddenLegendLabel,
   seriesNameFormatter,
 }: Props) {
-  useColorVisionEvents({enabled: data.length > 1});
-
   const selectedTheme = useTheme(theme);
   const seriesColors = useThemeSeriesColors(data, selectedTheme);
 
   const [activePointIndex, setActivePointIndex] = useState<number | null>(null);
   const [svgRef, setSvgRef] = useState<SVGSVGElement | null>(null);
 
+  const containerDimensions = {
+    height: containerBounds?.height ?? 0,
+    width: containerBounds?.width ?? 0,
+  };
+
+  useColorVisionEvents({enabled: data.length > 1});
+
   const isSmallChart = Boolean(
-    dimensions && dimensions?.height < SMALL_CHART_HEIGHT,
+    containerBounds != null && containerBounds.height < SMALL_CHART_HEIGHT,
   );
 
   const hideXAxis =
@@ -125,7 +130,7 @@ export function Chart({
         series: data,
       },
     ],
-    dimensions,
+    containerDimensions,
     showLegend: showLegend && !isSmallChart,
     seriesNameFormatter,
   });
@@ -262,11 +267,11 @@ export function Chart({
     return null;
   }
 
-  const chartBounds: BoundingRect = {
+  const chartBounds = {
     width,
     height,
-    x: dimensions?.x ?? chartXPosition,
-    y: dimensions?.y ?? chartYPosition,
+    x: containerBounds?.x ?? chartXPosition,
+    y: containerBounds?.y ?? chartYPosition,
   };
 
   const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations(
@@ -416,7 +421,7 @@ export function Chart({
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
           enableHideOverflow
-          dimensions={chartBounds}
+          containerDimensions={containerDimensions}
           renderHiddenLegendLabel={renderHiddenLegendLabel}
         />
       )}
@@ -456,8 +461,8 @@ export function Chart({
       const x = xScale?.(activeIndex) ?? 0;
 
       return {
-        x: x + (dimensions?.x ?? 0),
-        y: dimensions?.y ?? 0,
+        x: x + (containerBounds?.x ?? 0),
+        y: containerBounds?.y ?? 0,
         position: TOOLTIP_POSITION,
         activeIndex: index,
       };
diff --git a/packages/polaris-viz/src/components/StackedAreaChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/StackedAreaChart/tests/Chart.test.tsx
index 9a8f62e63..1d6ee0bf7 100644
--- a/packages/polaris-viz/src/components/StackedAreaChart/tests/Chart.test.tsx
+++ b/packages/polaris-viz/src/components/StackedAreaChart/tests/Chart.test.tsx
@@ -77,7 +77,7 @@ const MOCK_PROPS: Props = {
     integersOnly: false,
     maxYOverride: 10,
   },
-  dimensions: {width: 500, height: 250},
+  containerBounds: {width: 500, height: 250, x: 0, y: 0},
   renderTooltipContent: jest.fn(() => <p>Mock Tooltip Content</p>),
   showLegend: false,
   theme: DEFAULT_THEME_NAME,
@@ -372,7 +372,10 @@ describe('<Chart />', () => {
 
     it('does not render <LegendContainer /> when the chart has a height of less than 125', () => {
       const chart = mount(
-        <Chart {...MOCK_PROPS} dimensions={{width: 100, height: 100}} />,
+        <Chart
+          {...MOCK_PROPS}
+          containerDimensions={{width: 100, height: 100}}
+        />,
       );
       expect(chart).not.toContainReactComponent(LegendContainer);
     });
diff --git a/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx b/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx
index 250eb5ac8..0e2fdae01 100644
--- a/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx
+++ b/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx
@@ -28,7 +28,7 @@ interface BaseProps {
   getAlteredPosition?: AlteredPosition;
   id?: string;
   onIndexChange?: (index: number | null) => void;
-  chartDimensions?: BoundingRect;
+  containerBounds?: BoundingRect;
 }
 
 function TooltipWrapperRaw(props: BaseProps) {
@@ -42,7 +42,7 @@ function TooltipWrapperRaw(props: BaseProps) {
     id,
     onIndexChange,
     parentRef,
-    chartDimensions,
+    containerBounds,
   } = props;
   const {scrollContainer} = useChartContext();
   const [position, setPosition] = useState<TooltipPosition>({
@@ -192,7 +192,7 @@ function TooltipWrapperRaw(props: BaseProps) {
       getAlteredPosition={getAlteredPosition}
       margin={props.margin}
       position={position.position}
-      chartDimensions={chartDimensions}
+      containerBounds={containerBounds}
     >
       {props.getMarkup(position.activeIndex)}
     </TooltipAnimatedContainer>
diff --git a/packages/polaris-viz/src/components/TooltipWrapper/components/TooltipAnimatedContainer.tsx b/packages/polaris-viz/src/components/TooltipWrapper/components/TooltipAnimatedContainer.tsx
index c2d86d6c5..83898fb54 100644
--- a/packages/polaris-viz/src/components/TooltipWrapper/components/TooltipAnimatedContainer.tsx
+++ b/packages/polaris-viz/src/components/TooltipWrapper/components/TooltipAnimatedContainer.tsx
@@ -22,7 +22,7 @@ export interface TooltipAnimatedContainerProps {
   position?: TooltipPositionOffset;
   id?: string;
   bandwidth?: number;
-  chartDimensions?: BoundingRect;
+  containerBounds?: BoundingRect;
 }
 
 export function TooltipAnimatedContainer({
@@ -36,7 +36,7 @@ export function TooltipAnimatedContainer({
   getAlteredPosition = getAlteredVerticalBarPosition,
   margin,
   position = DEFAULT_TOOLTIP_POSITION,
-  chartDimensions,
+  containerBounds,
 }: TooltipAnimatedContainerProps) {
   const {isPerformanceImpacted, scrollContainer} = useChartContext();
 
@@ -59,7 +59,7 @@ export function TooltipAnimatedContainer({
       margin,
       bandwidth,
       isPerformanceImpacted,
-      chartDimensions,
+      containerBounds,
       scrollContainer,
     });
 
@@ -82,7 +82,7 @@ export function TooltipAnimatedContainer({
     position,
     isPerformanceImpacted,
     tooltipDimensions,
-    chartDimensions,
+    containerBounds,
     scrollContainer,
   ]);
 
diff --git a/packages/polaris-viz/src/components/TooltipWrapper/utilities.ts b/packages/polaris-viz/src/components/TooltipWrapper/utilities.ts
index eb2623a3d..2a62badee 100644
--- a/packages/polaris-viz/src/components/TooltipWrapper/utilities.ts
+++ b/packages/polaris-viz/src/components/TooltipWrapper/utilities.ts
@@ -19,7 +19,7 @@ export interface AlteredPositionProps {
   margin: Margin;
   position: TooltipPositionOffset;
   tooltipDimensions: Dimensions;
-  chartDimensions?: BoundingRect;
+  containerBounds?: BoundingRect;
   scrollContainer?: Element | null;
 }
 
@@ -82,7 +82,7 @@ export function getAlteredVerticalBarPosition(
   } else {
     y = clamp({
       amount:
-        (props.chartDimensions?.y ?? 0) -
+        (props.containerBounds?.y ?? 0) -
         props.tooltipDimensions.height -
         (scrollContainer?.scrollTop ?? 0),
       min: 0,
diff --git a/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx b/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx
index d32a145fd..848d36e44 100644
--- a/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx
@@ -69,7 +69,7 @@ export interface Props {
   xAxisOptions: Required<XAxisOptions>;
   yAxisOptions: Required<YAxisOptions>;
   annotationsLookupTable?: AnnotationLookupTable;
-  dimensions?: BoundingRect;
+  containerBounds?: BoundingRect;
   emptyStateText?: string;
   renderLegendContent?: RenderLegendContent;
   renderHiddenLegendLabel?: (count: number) => string;
@@ -77,8 +77,8 @@ export interface Props {
 
 export function Chart({
   annotationsLookupTable = {},
+  containerBounds,
   data,
-  dimensions,
   emptyStateText,
   renderLegendContent,
   renderTooltipContent,
@@ -89,16 +89,24 @@ export function Chart({
   renderHiddenLegendLabel,
   seriesNameFormatter,
 }: Props) {
-  useColorVisionEvents({enabled: data.length > 1, dimensions});
-
   const selectedTheme = useTheme();
   const {characterWidths} = useChartContext();
 
   const [svgRef, setSvgRef] = useState<SVGSVGElement | null>(null);
   const id = useMemo(() => uniqueId('VerticalBarChart'), []);
 
+  const containerDimensions = {
+    height: containerBounds?.height ?? 0,
+    width: containerBounds?.width ?? 0,
+  };
+
+  useColorVisionEvents({
+    enabled: data.length > 1,
+    containerDimensions,
+  });
+
   const isSmallChart = Boolean(
-    dimensions && dimensions?.height < SMALL_CHART_HEIGHT,
+    containerBounds != null && containerBounds?.height < SMALL_CHART_HEIGHT,
   );
 
   const {legend, setLegendDimensions, height, width} = useLegend({
@@ -108,7 +116,7 @@ export function Chart({
         series: data,
       },
     ],
-    dimensions,
+    containerDimensions,
     showLegend: showLegend && !isSmallChart,
     seriesNameFormatter,
   });
@@ -346,12 +354,12 @@ export function Chart({
         <TooltipWrapper
           bandwidth={xScale.bandwidth()}
           chartBounds={chartBounds}
+          containerBounds={containerBounds}
           focusElementDataType={DataType.BarGroup}
           getMarkup={getTooltipMarkup}
           getPosition={getTooltipPosition}
           margin={{...ChartMargin, Top: chartYPosition}}
           parentRef={svgRef}
-          chartDimensions={dimensions}
           usePortal
         />
       )}
@@ -359,11 +367,11 @@ export function Chart({
       {showLegend && !isSmallChart && (
         <LegendContainer
           colorVisionType={COLOR_VISION_SINGLE_ITEM}
+          containerDimensions={containerDimensions}
           data={legend}
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
           enableHideOverflow
-          dimensions={dimensions}
           renderHiddenLegendLabel={renderHiddenLegendLabel}
         />
       )}
@@ -389,8 +397,8 @@ export function Chart({
     const y = yScale(highestValuePos!) + chartYPosition;
 
     return {
-      x: x + (dimensions?.x ?? 0),
-      y: Math.abs(y) + (dimensions?.y ?? 0),
+      x: x + (containerBounds?.x ?? 0),
+      y: Math.abs(y) + (containerBounds?.y ?? 0),
       position: {
         horizontal: TooltipHorizontalOffset.Center,
         vertical: areAllNegative
diff --git a/packages/polaris-viz/src/components/VerticalBarChart/VerticalBarChart.tsx b/packages/polaris-viz/src/components/VerticalBarChart/VerticalBarChart.tsx
index 40773ba76..c99e074be 100644
--- a/packages/polaris-viz/src/components/VerticalBarChart/VerticalBarChart.tsx
+++ b/packages/polaris-viz/src/components/VerticalBarChart/VerticalBarChart.tsx
@@ -26,7 +26,7 @@ export interface VerticalBarChartProps {
   seriesNameFormatter: LabelFormatter;
   annotationsLookupTable?: AnnotationLookupTable;
   barOptions?: {isStacked: boolean};
-  dimensions?: BoundingRect;
+  containerBounds?: BoundingRect;
   emptyStateText?: string;
   renderLegendContent?: RenderLegendContent;
   type?: ChartType;
@@ -36,7 +36,7 @@ export interface VerticalBarChartProps {
 export function VerticalBarChart({
   annotationsLookupTable = {},
   data,
-  dimensions,
+  containerBounds,
   emptyStateText,
   renderLegendContent,
   renderTooltipContent,
@@ -57,7 +57,7 @@ export function VerticalBarChart({
 
   return (
     <Chart
-      dimensions={dimensions}
+      containerBounds={containerBounds}
       annotationsLookupTable={annotationsLookupTable}
       data={seriesWithDefaults}
       emptyStateText={emptyStateText}
diff --git a/packages/polaris-viz/src/components/VerticalBarChart/tests/Chart.test.tsx b/packages/polaris-viz/src/components/VerticalBarChart/tests/Chart.test.tsx
index a7332a99f..030340609 100644
--- a/packages/polaris-viz/src/components/VerticalBarChart/tests/Chart.test.tsx
+++ b/packages/polaris-viz/src/components/VerticalBarChart/tests/Chart.test.tsx
@@ -54,7 +54,7 @@ const MOCK_PROPS: Props = {
       name: 'LABEL2',
     },
   ],
-  dimensions: {width: 500, height: 250, x: 0, y: 0},
+  containerBounds: {width: 500, height: 250, x: 0, y: 0},
   renderTooltipContent,
   xAxisOptions: {
     allowLineWrap: false,
@@ -339,7 +339,10 @@ describe('Chart />', () => {
 
     it('does not render <LegendContainer /> when the chart has a height of less than 125', () => {
       const chart = mount(
-        <Chart {...MOCK_PROPS} dimensions={{width: 100, height: 100}} />,
+        <Chart
+          {...MOCK_PROPS}
+          containerDimensions={{width: 100, height: 100}}
+        />,
       );
       expect(chart).not.toContainReactComponent(LegendContainer);
     });
diff --git a/packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts b/packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts
index 3ddc434a4..4f5a62e2a 100644
--- a/packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts
+++ b/packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts
@@ -1,19 +1,19 @@
 import {useEffect} from 'react';
+import type {Dimensions} from '@shopify/polaris-viz-core';
 import {COLOR_VISION_EVENT, useChartContext} from '@shopify/polaris-viz-core';
-import type {BoundingRect} from '@shopify/polaris-viz-core';
 
 import {useExternalHideEvents} from '../ExternalEvents';
 
 import {getDataSetItem, getEventName} from './utilities';
 
 export interface Props {
+  containerDimensions?: Dimensions;
   enabled?: boolean;
-  dimensions?: BoundingRect;
   root?: string;
 }
 
 export function useColorVisionEvents(props?: Partial<Props>) {
-  const {enabled = true, dimensions, root = 'chart'} = props || {};
+  const {enabled = true, root = 'chart', containerDimensions} = props || {};
 
   const {id} = useChartContext();
   const {hiddenIndexes} = useExternalHideEvents();
@@ -79,5 +79,7 @@ export function useColorVisionEvents(props?: Partial<Props>) {
         item.removeEventListener('blur', onMouseLeave);
       });
     };
-  }, [id, enabled, hiddenIndexes, dimensions, root]);
+    // Re-attach the listeners when containerDimensions changes so that
+    // any new items get listeners as well.
+  }, [id, enabled, hiddenIndexes, root, containerDimensions]);
 }
diff --git a/packages/polaris-viz/src/hooks/usePrintResizing.ts b/packages/polaris-viz/src/hooks/usePrintResizing.ts
index f9007815d..fa11c1442 100644
--- a/packages/polaris-viz/src/hooks/usePrintResizing.ts
+++ b/packages/polaris-viz/src/hooks/usePrintResizing.ts
@@ -6,13 +6,13 @@ import {useBrowserCheck} from './useBrowserCheck';
 
 interface Props {
   ref: HTMLElement | null;
-  setChartDimensions: (value: React.SetStateAction<Dimensions | null>) => void;
+  setContainerBounds: (value: React.SetStateAction<Dimensions | null>) => void;
   onIsPrintingChange: Dispatch<React.SetStateAction<boolean>>;
 }
 
 export function usePrintResizing({
   ref,
-  setChartDimensions,
+  setContainerBounds,
   onIsPrintingChange,
 }: Props) {
   const [isPrinting, setIsPrinting] = useState(false);
@@ -33,7 +33,7 @@ export function usePrintResizing({
           ref.clientHeight -
           parseInt(paddingTop, 10) -
           parseInt(paddingBottom, 10);
-        setChartDimensions({width, height});
+        setContainerBounds({width, height});
 
         setIsPrinting((isPrinting) => {
           const newIsPrinting = !isPrinting;
@@ -100,7 +100,7 @@ export function usePrintResizing({
         }
       }
     };
-  }, [onIsPrintingChange, setChartDimensions, ref, isFirefox, isSafari]);
+  }, [onIsPrintingChange, setContainerBounds, ref, isFirefox, isSafari]);
 
   return {isPrinting};
 }