@automattic/charts 1.10.0 → 1.10.2

package/src/charts/private/with-responsive/test/with-responsive.test.tsx

@@ -5,7 +5,7 @@ import type { BaseChartProps } from '../../../../types';
 // Mock the useParentSize hook
 jest.mock( '@visx/responsive', () => ( {
 	useParentSize: jest.fn( () => ( {
-		parentRef: { current: null },
+		parentRef: () => {},
 		width: 600, // Default width for tests
 		height: 300, // Default height for tests
 	} ) ),
@@ -20,6 +20,32 @@ describe( 'withResponsive', () => {
 
 	const ResponsiveComponent = withResponsive( MockComponent );
 
+	const { useParentSize } = jest.requireMock( '@visx/responsive' );
+	const DEFAULT_SIZE = { parentRef: () => {}, width: 600, height: 300 };
+
+	// jsdom has no layout engine, so the wrapper's clientHeight (which the contain
+	// logic reads from real layout) is always 0. Mock it to simulate the height the
+	// parent makes available: 0 means unconstrained (the chart derives its height from
+	// width), a positive value simulates a parent that limits the height.
+	let mockClientHeight = 0;
+	beforeAll( () => {
+		Object.defineProperty( window.HTMLElement.prototype, 'clientHeight', {
+			configurable: true,
+			get() {
+				return mockClientHeight;
+			},
+		} );
+	} );
+
+	// Fully clear the mock (queued returns and implementation) after each test, then
+	// re-establish the default implementation, so a per-test override can't bleed
+	// into the next test.
+	afterEach( () => {
+		mockClientHeight = 0;
+		useParentSize.mockReset();
+		useParentSize.mockImplementation( () => DEFAULT_SIZE );
+	} );
+
 	describe( 'component dimensions', () => {
 		test( 'passes measured parent width to component', () => {
 			render( <ResponsiveComponent data={ [] } /> );
@@ -34,11 +60,35 @@ describe( 'withResponsive', () => {
 			expect( component ).toHaveStyle( { height: '300px' } );
 		} );
 
-		test( 'calculates height from aspectRatio when provided', () => {
+		test( 'derives height from width when the parent is taller than the derived height', () => {
+			// Parent allows 300px of height; aspectRatio 0.4 derives 600 * 0.4 = 240,
+			// which fits, so the chart keeps the full measured width.
+			mockClientHeight = 300;
+			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			const component = screen.getByTestId( 'mock-component' );
+			expect( component ).toHaveStyle( { width: '600px', height: '240px' } );
+		} );
+
+		test( 'contains within the parent height when the parent limits the available height', () => {
+			// Parent makes 300px of height available; aspectRatio 0.75 would derive
+			// 600 * 0.75 = 450, so both axes shrink to fit: 300 / 0.75 = 400.
+			mockClientHeight = 300;
 			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.75 } /> );
 			const component = screen.getByTestId( 'mock-component' );
-			// With aspectRatio, height = width * aspectRatio = 600 * 0.75 = 450
-			expect( component ).toHaveStyle( { height: '450px' } );
+			expect( component ).toHaveStyle( { width: '400px', height: '300px' } );
+		} );
+
+		test( 'derives height from width when the parent has no measured height', () => {
+			// parentHeight 0 (unconstrained or not-yet-measured parent): the contain
+			// clamp must not run, so the height stays width-derived (600 * 0.4 = 240).
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 0,
+			} ) );
+			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			const component = screen.getByTestId( 'mock-component' );
+			expect( component ).toHaveStyle( { width: '600px', height: '240px' } );
 		} );
 
 		test( 'respects maxWidth configuration', () => {
@@ -52,13 +102,28 @@ describe( 'withResponsive', () => {
 			const component = screen.getByTestId( 'mock-component' );
 			expect( component ).toHaveAttribute( 'data-size', '200' );
 		} );
+
+		test( 'assigns the wrapper to an object-shaped parentRef from useParentSize', () => {
+			// useParentSize hands back a callback ref in practice, but older versions
+			// return a RefObject; the wrapper must populate that shape too.
+			const objectRef: { current: HTMLElement | null } = { current: null };
+			useParentSize.mockImplementation( () => ( {
+				parentRef: objectRef,
+				width: 600,
+				height: 300,
+			} ) );
+			render( <ResponsiveComponent data={ [] } /> );
+			expect( objectRef.current ).toBe( screen.getByTestId( 'responsive-wrapper' ) );
+		} );
 	} );
 
 	describe( 'wrapper dimensions', () => {
-		test( 'wrapper defaults to 100% width and height when no props', () => {
+		test( 'wrapper has no inline dimensions by default (fills the parent via CSS)', () => {
 			render( <ResponsiveComponent data={ [] } /> );
 			const wrapper = screen.getByTestId( 'responsive-wrapper' );
-			expect( wrapper ).toHaveStyle( { width: '100%', height: '100%' } );
+			expect( wrapper ).toHaveClass( 'container' );
+			expect( wrapper ).not.toHaveClass( 'isContained' );
+			expect( wrapper ).not.toHaveAttribute( 'style' );
 		} );
 
 		test( 'wrapper uses explicit width/height for dimensions when provided', () => {
@@ -67,24 +132,170 @@ describe( 'withResponsive', () => {
 			expect( wrapper ).toHaveStyle( { width: '200px', height: '200px' } );
 		} );
 
-		test( 'wrapper uses auto height with aspectRatio', () => {
+		test( 'wrapper gets the contained class with aspectRatio (centering lives in CSS)', () => {
 			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.5 } /> );
 			const wrapper = screen.getByTestId( 'responsive-wrapper' );
-			expect( wrapper ).toHaveStyle( { width: '100%', height: 'auto' } );
+			expect( wrapper ).toHaveClass( 'isContained' );
 		} );
 
-		test( 'wrapper expresses aspectRatio in CSS and caps at maxWidth', () => {
-			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.5 } maxWidth={ 800 } /> );
-			const wrapper = screen.getByTestId( 'responsive-wrapper' );
-			// CSS aspect-ratio is width/height, so 1 / 0.5 = 2.
-			expect( wrapper ).toHaveStyle( { aspectRatio: '2', maxWidth: '800px' } );
+		test( 'no content box is rendered without an aspectRatio', () => {
+			render( <ResponsiveComponent data={ [] } /> );
+			expect( screen.queryByTestId( 'responsive-content' ) ).not.toBeInTheDocument();
 		} );
 
-		test( 'wrapper omits the maxWidth cap when an explicit width is set', () => {
-			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.5 } width={ 300 } /> );
-			const wrapper = screen.getByTestId( 'responsive-wrapper' );
-			expect( wrapper ).toHaveStyle( { aspectRatio: '2', width: '300px' } );
-			expect( wrapper ).not.toHaveStyle( { maxWidth: '1200px' } );
+		test( 'renders the contained chart in an inner content box sized to the aspect ratio', () => {
+			// aspectRatio 0.4: 600 * 0.4 = 240 fits the 300px parent.
+			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			const content = screen.getByTestId( 'responsive-content' );
+			expect( content ).toHaveStyle( { width: '600px', height: '240px' } );
+		} );
+
+		test( 'content box contains to the parent height when the parent limits the available height', () => {
+			// aspectRatio 0.75 derives 450 > the 300px the parent allows, so both axes
+			// shrink to fit: width 400 (300 / 0.75) × height 300.
+			mockClientHeight = 300;
+			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.75 } /> );
+			const content = screen.getByTestId( 'responsive-content' );
+			expect( content ).toHaveStyle( { width: '400px', height: '300px' } );
+		} );
+	} );
+
+	describe( 'resize behavior', () => {
+		test( 'grows on widen in a fluid (unconstrained-height) parent', () => {
+			// Unconstrained parent (mockClientHeight 0): the chart derives its height
+			// from width and must grow when the parent widens, not deadlock.
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 0,
+			} ) );
+			const { rerender } = render( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '600px',
+				height: '240px',
+			} );
+
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 900,
+				height: 0,
+			} ) );
+			rerender( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '900px',
+				height: '360px',
+			} );
+		} );
+
+		test( 'stays contained on widen when the parent limits the height', () => {
+			// Parent allows 150px of height. aspectRatio 0.4 derives 240 at width 600 and
+			// 360 at width 900 — both exceed 150 — so the chart stays contained at
+			// 375 × 150 (150 / 0.4 = 375) across the widen rather than overflowing.
+			mockClientHeight = 150;
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 150,
+			} ) );
+			const { rerender } = render( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '375px',
+				height: '150px',
+			} );
+
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 900,
+				height: 150,
+			} ) );
+			rerender( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '375px',
+				height: '150px',
+			} );
+		} );
+
+		test( 'releases containment when the parent grows tall enough', () => {
+			// Parent starts at 150px of height, so aspectRatio 0.4 (derives 240 at width
+			// 600) is contained to 375 × 150.
+			mockClientHeight = 150;
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 150,
+			} ) );
+			const { rerender } = render( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '375px',
+				height: '150px',
+			} );
+
+			// Parent grows to 300px — now taller than the 240px derived height — so
+			// containment releases and the chart returns to its full width-derived size.
+			mockClientHeight = 300;
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 300,
+			} ) );
+			rerender( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '600px',
+				height: '240px',
+			} );
+		} );
+
+		test( 'and re-contains to the new height when the parent shrinks further', () => {
+			// Parent allows 300px; aspectRatio 0.75 derives 450, so it contains to 400 × 300.
+			mockClientHeight = 300;
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 300,
+			} ) );
+			const { rerender } = render( <ResponsiveComponent data={ [] } aspectRatio={ 0.75 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '400px',
+				height: '300px',
+			} );
+
+			// Parent shrinks to 150px — still shorter than the 450px derived height — so the
+			// chart re-contains to the new available height: 150 / 0.75 = 200 × 150.
+			mockClientHeight = 150;
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 150,
+			} ) );
+			rerender( <ResponsiveComponent data={ [] } aspectRatio={ 0.75 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '200px',
+				height: '150px',
+			} );
+		} );
+
+		test( 'releases containment when aspectRatio is removed', () => {
+			// Contained first (derived 450 > the 300px parent → 400 × 300).
+			mockClientHeight = 300;
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 300,
+			} ) );
+			const { rerender } = render( <ResponsiveComponent data={ [] } aspectRatio={ 0.75 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '400px',
+				height: '300px',
+			} );
+
+			// Dropping aspectRatio clears the containment and fills the parent again; the
+			// inner content box is gone.
+			rerender( <ResponsiveComponent data={ [] } /> );
+			expect( screen.queryByTestId( 'responsive-content' ) ).not.toBeInTheDocument();
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '600px',
+				height: '300px',
+			} );
 		} );
 	} );
 

package/src/charts/private/with-responsive/with-responsive.module.scss

@@ -1,5 +1,24 @@
 .container {
-	// Allow wrapper to shrink in flex layouts
+	// Fill the parent by default so the wrapper's live height reflects the
+	// real available space. JS sets width/height only when passed explicitly.
+	width: 100%;
+	height: 100%;
+	// Allow the wrapper to shrink in flex layouts
+	min-width: 0;
+	min-height: 0;
+}
+
+// With an aspectRatio, center the contained box horizontally and top-align it.
+.isContained {
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+}
+
+// The contain box. Its width/height come from JS; keep it from being stretched
+// or shrunk by the flex parent.
+.content {
+	flex: 0 0 auto;
 	min-width: 0;
 	min-height: 0;
 }

package/src/charts/private/with-responsive/with-responsive.tsx

@@ -1,4 +1,6 @@
 import { useParentSize } from '@visx/responsive';
+import clsx from 'clsx';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import styles from './with-responsive.module.scss';
 import type { BaseChartProps } from '../../../types';
 import type { ComponentType } from 'react';
@@ -16,7 +18,11 @@ export type ResponsiveConfig = {
 	maxWidth?: number;
 	/**
 	 * The aspect ratio of the chart (height = width * aspectRatio).
-	 * When provided, height is calculated from width.
+	 * When provided, the chart keeps this ratio and is contained within the
+	 * parent on both axes: it fills the available width and derives its height,
+	 * but if the parent is shorter than that derived height it shrinks both axes
+	 * to fit rather than overflowing. When it is narrower than the parent (the
+	 * height-constrained case) it is centered horizontally.
 	 * When omitted, the chart fills the parent container's height.
 	 */
 	aspectRatio?: number;
@@ -26,35 +32,9 @@ export type ResponsiveConfig = {
 	resizeDebounceTime?: number;
 };
 
-const useResponsiveDimensions = ( {
-	resizeDebounceTime = 300,
-	maxWidth = 1200,
-	aspectRatio,
-}: ResponsiveConfig ) => {
-	const {
-		parentRef,
-		width: parentWidth,
-		height: parentHeight,
-	} = useParentSize( {
-		debounceTime: resizeDebounceTime,
-		enableDebounceLeadingCall: true,
-	} );
-
-	const containerWidth = parentWidth > 0 ? Math.min( parentWidth, maxWidth ) : 0;
-	const containerHeight = aspectRatio !== undefined ? containerWidth * aspectRatio : parentHeight;
-
-	return {
-		parentRef,
-		width: containerWidth,
-		height: containerHeight,
-		/**
-		 * Whether an aspectRatio was provided. Used to determine container
-		 * height styling: 'auto' when true (height derived from width),
-		 * '100%' when false (fill parent container).
-		 */
-		hasAspectRatio: aspectRatio !== undefined,
-	};
-};
+// useLayoutEffect on the client (so containment is resolved before paint, no flash),
+// useEffect on the server to avoid React's SSR warning.
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 /**
  * A higher-order component that provides responsive dimensions
@@ -77,51 +57,120 @@ export function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'o
 	}: Omit< T, 'width' | 'height' | 'size' > & DimensionProps & ResponsiveConfig ) {
 		const {
 			parentRef,
-			width: measuredWidth,
-			height: measuredHeight,
-			hasAspectRatio,
-		} = useResponsiveDimensions( {
-			resizeDebounceTime,
-			maxWidth,
-			aspectRatio,
+			width: parentWidth,
+			height: parentHeight,
+		} = useParentSize( {
+			debounceTime: resizeDebounceTime,
+			enableDebounceLeadingCall: true,
 		} );
 
-		// Use measured dimensions, but fall back to explicit width/height props if measurement returns 0
-		// (e.g., during initial render or in test environments without DOM measurement).
-		// Do not use size here — size controls chart element dimensions (e.g. pie diameter), not container dimensions.
-		const effectiveWidth = measuredWidth || width || 0;
-		const effectiveHeight = measuredHeight || height || 0;
+		const hasAspectRatio = aspectRatio !== undefined && aspectRatio > 0;
+
+		// Keep our own handle on the wrapper so we can read its live height below, and
+		// still hand the node to useParentSize's ref (a callback ref in practice; guard
+		// the object-ref shape too).
+		const wrapperRef = useRef< HTMLDivElement | null >( null );
+		const setWrapperRef = useCallback(
+			( node: HTMLDivElement | null ) => {
+				wrapperRef.current = node;
+				if ( typeof parentRef === 'function' ) {
+					parentRef( node );
+				} else if ( parentRef ) {
+					( parentRef as { current: HTMLDivElement | null } ).current = node;
+				}
+			},
+			[ parentRef ]
+		);
 
-		const defaultHeight = hasAspectRatio ? 'auto' : '100%';
-		// Express the aspect ratio in CSS so the container height tracks its width
-		// fluidly, rather than snapping to a debounced measured height. Cap the width
-		// at maxWidth so the CSS-derived height matches the maxWidth-capped content
-		// (the wrapped chart is sized from the capped `measuredWidth`).
-		const aspectRatioStyle =
-			hasAspectRatio && aspectRatio
-				? {
-						aspectRatio: `${ 1 / aspectRatio }`,
-						maxWidth: width === undefined ? maxWidth : undefined,
-				  }
-				: null;
+		// The parent's available height when it actually constrains the chart, else
+		// null (the chart derives its height from width and grows freely).
+		const [ containedHeight, setContainedHeight ] = useState< number | null >( null );
+
+		// Cap the available width at maxWidth unless an explicit width pins it. Before
+		// measurement resolves, fall back to the explicit width.
+		const cap = width === undefined ? maxWidth : Infinity;
+		const availableWidth = parentWidth > 0 ? Math.min( parentWidth, cap ) : width ?? 0;
+
+		let boxWidth = availableWidth;
+		let boxHeight: number;
+		if ( hasAspectRatio ) {
+			const derivedHeight = availableWidth * aspectRatio;
+			if ( containedHeight !== null && derivedHeight > containedHeight ) {
+				boxHeight = containedHeight;
+				boxWidth = boxHeight / aspectRatio;
+			} else {
+				boxHeight = derivedHeight;
+			}
+		} else {
+			boxHeight = parentHeight > 0 ? parentHeight : height ?? 0;
+		}
+
+		// Decide containment from the wrapper's real height, measured after layout.
+		// useParentSize's height is no good here: with height:100% and no definite
+		// parent height it just echoes our own content back, so clamping against it
+		// would freeze the chart at its current width when the container widens.
+		// Compare the post-layout clientHeight to the height we drew: shorter means the
+		// parent really constrains us → contain to it; equal means it is only our own
+		// content → let it grow. Once contained, stay contained until the parent is tall
+		// enough for the full derived height, so a now-fitting chart doesn't oscillate.
+		// (parentHeight is in the deps only to re-run this; the value used is clientHeight.)
+		useIsomorphicLayoutEffect( () => {
+			if ( ! hasAspectRatio ) {
+				if ( containedHeight !== null ) {
+					setContainedHeight( null );
+				}
+				return;
+			}
+			const available = wrapperRef.current?.clientHeight ?? 0;
+			const derivedHeight = availableWidth * aspectRatio;
+			if ( containedHeight === null ) {
+				if ( available > 0 && derivedHeight > available + 1 ) {
+					setContainedHeight( available );
+				}
+			} else if ( available >= derivedHeight - 1 ) {
+				setContainedHeight( null );
+			} else if ( Math.abs( available - containedHeight ) > 1 ) {
+				setContainedHeight( available );
+			}
+		}, [ hasAspectRatio, availableWidth, aspectRatio, containedHeight, parentHeight ] );
+
+		const wrappedComponent = (
+			<WrappedComponent
+				width={ boxWidth }
+				height={ boxHeight }
+				size={ size }
+				{ ...( chartProps as T ) }
+			/>
+		);
 
+		// The outer element fills the parent (via CSS) so its live height reflects the
+		// real available space; JS sets width/height only when they are passed
+		// explicitly. Static layout (fill, flex centering) lives in the stylesheet. With
+		// an aspectRatio the chart is placed in an inner box sized to the contained
+		// dimensions (centered by CSS) so it keeps its proportions and fits within the
+		// parent on both axes. Charts that fill their container via CSS (e.g. the heatmap
+		// grid) then track that box. Without an aspectRatio the chart fills the parent.
 		return (
 			<div
-				ref={ parentRef }
+				ref={ setWrapperRef }
 				data-testid="responsive-wrapper"
-				className={ styles.container }
+				className={ clsx( styles.container, hasAspectRatio && styles.isContained ) }
 				style={ {
-					width: width ?? '100%',
-					height: height ?? defaultHeight,
-					...aspectRatioStyle,
+					...( width !== undefined ? { width } : null ),
+					...( height !== undefined ? { height } : null ),
 				} }
 			>
-				<WrappedComponent
-					width={ effectiveWidth }
-					height={ effectiveHeight }
-					size={ size }
-					{ ...( chartProps as T ) }
-				/>
+				{ hasAspectRatio ? (
+					<div
+						data-testid="responsive-content"
+						className={ styles.content }
+						style={ { width: boxWidth, height: boxHeight } }
+					>
+						{ wrappedComponent }
+					</div>
+				) : (
+					wrappedComponent
+				) }
 			</div>
 		);
 	};

package/src/hooks/test/use-chart-margin.test.tsx

@@ -13,8 +13,8 @@ describe( 'useChartMargin', () => {
 	const baseTheme = {
 		axisStyles: {
 			y: {
-				left: { axisLabel: { fontSize: 11 }, tickLength: 8 },
-				right: { axisLabel: { fontSize: 11 }, tickLength: 8 },
+				left: { axisLabel: { fontSize: 12 }, tickLabel: { fontSize: 11 }, tickLength: 8 },
+				right: { axisLabel: { fontSize: 12 }, tickLabel: { fontSize: 11 }, tickLength: 8 },
 			},
 		},
 	} as XYChartTheme;
@@ -64,7 +64,8 @@ describe( 'useChartMargin', () => {
 			options.axis.y.tickFormat,
 			theme.axisStyles.y.left.axisLabel
 		);
-		expect( result.current.left ).toBe( 48 ); // 40 + 8
+		// 40 label width + 8 tick length + ceil(11 * 0.25) label dx offset
+		expect( result.current.left ).toBe( 51 );
 	} );
 
 	it( 'calculates right margin for right y axis', () => {
@@ -86,7 +87,8 @@ describe( 'useChartMargin', () => {
 			options.axis.y.tickFormat,
 			theme.axisStyles.y.right.axisLabel
 		);
-		expect( result.current.right ).toBe( 48 ); // 40 + 8
+		// 40 label width + 8 tick length + ceil(11 * 0.25) label dx offset
+		expect( result.current.right ).toBe( 51 );
 	} );
 
 	it( 'uses explicit y tickValues when provided', () => {
@@ -133,7 +135,8 @@ describe( 'useChartMargin', () => {
 		const height = 300;
 		const theme = baseTheme;
 		const { result } = renderHook( () => useChartMargin( height, options, data, theme ) );
-		expect( result.current.left ).toBe( 48 );
+		// 40 label width + 8 tick length + ceil(11 * 0.25) label dx offset
+		expect( result.current.left ).toBe( 51 );
 		expect( result.current.top ).toBe( 10 );
 		// 12px font + 8 tick length = 20
 		expect( result.current.bottom ).toBe( 20 );

package/src/hooks/use-chart-margin.tsx

@@ -114,7 +114,17 @@ export const useChartMargin = (
 			options.axis?.y?.tickFormat,
 			yAxisStyles.axisLabel
 		);
-		const yMarginValue = ( yTickWidth ?? DEFAULT_Y_TICK_WIDTH ) + ( yAxisStyles?.tickLength ?? 0 );
+		// visx's default axis theme pushes y-axis tick labels a further 0.25em
+		// away from the axis (dx of -0.25em on the left, 0.25em on the right), so
+		// reserve that on top of the measured label width — without it the widest
+		// label clips at the SVG edge. The em resolves against the tick label's own
+		// font size (theme tickLabel), not the axis-title font size (axisLabel).
+		const yTickLabelFontSize =
+			resolveFontSize( yAxisStyles?.tickLabel?.fontSize ) || DEFAULT_FONT_SIZE;
+		const yMarginValue =
+			( yTickWidth ?? DEFAULT_Y_TICK_WIDTH ) +
+			( yAxisStyles?.tickLength ?? 0 ) +
+			Math.ceil( yTickLabelFontSize * 0.25 );
 
 		if ( yAxisOrientation === 'right' ) {
 			defaultMargin.right = yMarginValue;

package/src/providers/chart-context/global-charts-provider.tsx

@@ -186,6 +186,11 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { childre
 		[ colorCache, groupToColorMap ]
 	);
 
+	const resolveThemeColor = useCallback< GlobalChartsContextValue[ 'resolveThemeColor' ] >(
+		value => ( value ? normalizeColorToHex( value, wrapperRef.current, resolveCssVariable ) : '' ),
+		[]
+	);
+
 	const getElementStyles = useCallback< GlobalChartsContextValue[ 'getElementStyles' ] >(
 		( { data, index, overrideColor, legendShape } ) => {
 			const isSeriesData = data && typeof data === 'object' && 'data' in data && 'options' in data;
@@ -264,6 +269,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { childre
 			getChartData,
 			theme: providerTheme,
 			getElementStyles,
+			resolveThemeColor,
 			toggleSeriesVisibility,
 			isSeriesVisible,
 			getHiddenSeries,
@@ -276,6 +282,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { childre
 			getChartData,
 			providerTheme,
 			getElementStyles,
+			resolveThemeColor,
 			toggleSeriesVisibility,
 			isSeriesVisible,
 			getHiddenSeries,

package/src/providers/chart-context/test/chart-context.test.tsx

@@ -2536,6 +2536,46 @@ describe( 'ChartContext', () => {
 				expect( afterRerenderColor ).toBe( '#ff0000' );
 			} );
 		} );
+
+		describe( 'resolveThemeColor', () => {
+			let contextValue: GlobalChartsContextValue;
+
+			const TestComponent = () => {
+				contextValue = useGlobalChartsContext();
+				return <div>Test</div>;
+			};
+
+			const mountProvider = () =>
+				render(
+					<GlobalChartsProvider>
+						<TestComponent />
+					</GlobalChartsProvider>
+				);
+
+			it( 'resolves a CSS variable against the provider scope, not the document root', () => {
+				window.getComputedStyle = jest.fn( ( element: Element ) => ( {
+					getPropertyValue: ( prop: string ) =>
+						prop === '--surface' && element !== document.documentElement ? '#1e1e1e' : '#ffffff',
+				} ) ) as unknown as typeof window.getComputedStyle;
+
+				mountProvider();
+
+				expect( contextValue.resolveThemeColor( 'var(--surface, #fff)' ) ).toBe( '#1e1e1e' );
+			} );
+
+			it( 'passes a resolved color through to hex', () => {
+				mountProvider();
+
+				expect( contextValue.resolveThemeColor( '#abcdef' ) ).toBe( '#abcdef' );
+				expect( contextValue.resolveThemeColor( 'rgb(255, 0, 0)' ) ).toBe( '#ff0000' );
+			} );
+
+			it( 'returns an empty string for an empty value', () => {
+				mountProvider();
+
+				expect( contextValue.resolveThemeColor( '' ) ).toBe( '' );
+			} );
+		} );
 	} );
 
 	describe( 'defaultTheme', () => {