@automattic/charts 3.2.0 → 4.0.0

package/src/components/tooltip/test/xy-chart-tooltip.test.tsx

@@ -0,0 +1,279 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { BarSeries, LineSeries, TooltipContext, XYChart } from '@visx/xychart';
+import { useContext, useEffect } from 'react';
+import { XyChartTooltip } from '../xy-chart-tooltip';
+import type { XyChartTooltipProps } from '../../../visx/types';
+import type { EventHandlerParams } from '@visx/xychart';
+
+type Datum = { x: number; y: number };
+
+const SERIES_A: Datum[] = [
+	{ x: 0, y: 0 },
+	{ x: 5, y: 50 },
+	{ x: 10, y: 100 },
+];
+const SERIES_B: Datum[] = [
+	{ x: 0, y: 100 },
+	{ x: 5, y: 25 },
+	{ x: 10, y: 0 },
+];
+
+const xAccessor = ( d: Datum ) => d.x;
+const yAccessor = ( d: Datum ) => d.y;
+
+type BandDatum = { x: string; y: number };
+const BAND_DATA: BandDatum[] = [
+	{ x: 'a', y: 50 },
+	{ x: 'b', y: 80 },
+];
+const bandXAccessor = ( d: BandDatum ) => d.x;
+const bandYAccessor = ( d: BandDatum ) => d.y;
+const renderBarTooltip = () => <span>bar</span>;
+const BAND_PARAMS = [
+	{ key: 'bars', index: 0, datum: BAND_DATA[ 0 ], svgPoint: { x: 20, y: 90 } },
+] as unknown as EventHandlerParams< Datum >[];
+
+// The pointer sits on A's datum, 25px above B's, so A is the nearest datum.
+const BOTH_SERIES: EventHandlerParams< Datum >[] = [
+	{
+		key: 'A',
+		index: 1,
+		datum: SERIES_A[ 1 ],
+		svgPoint: { x: 100, y: 50 },
+		distanceX: 0,
+		distanceY: 0,
+	},
+	{
+		key: 'B',
+		index: 1,
+		datum: SERIES_B[ 1 ],
+		svgPoint: { x: 100, y: 50 },
+		distanceX: 0,
+		distanceY: 25,
+	},
+];
+
+// Opens the tooltip the way a pointer event would, once the series have registered.
+const OpenTooltip = ( { params }: { params: EventHandlerParams< Datum >[] } ) => {
+	const tooltipContext = useContext( TooltipContext );
+	useEffect( () => {
+		params.forEach( p => tooltipContext?.showTooltip( p ) );
+		// The context object changes identity on every tooltip update; re-running would loop.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+	return null;
+};
+
+const renderTooltip: XyChartTooltipProps< Datum >[ 'renderTooltip' ] = ( { tooltipData } ) => (
+	<span>{ `nearest:${ tooltipData?.nearestDatum?.key ?? '' }` }</span>
+);
+
+const NO_MARGIN = { top: 0, right: 0, bottom: 0, left: 0 };
+
+// 200x100 chart; with no margin x maps 0..10 to 0..200px and y maps 0..100 to 100..0px.
+const renderChart = (
+	tooltipProps: Partial< XyChartTooltipProps< Datum > > = {},
+	params: EventHandlerParams< Datum >[] = [
+		{ key: 'A', index: 1, datum: SERIES_A[ 1 ], svgPoint: { x: 123, y: 45 } },
+	],
+	margin = NO_MARGIN
+) =>
+	render(
+		<div data-testid="wrapper" style={ { position: 'relative' } }>
+			<XYChart
+				width={ 200 }
+				height={ 100 }
+				margin={ margin }
+				xScale={ { type: 'linear', domain: [ 0, 10 ] } }
+				yScale={ { type: 'linear', domain: [ 0, 100 ] } }
+			>
+				<LineSeries dataKey="A" data={ SERIES_A } xAccessor={ xAccessor } yAccessor={ yAccessor } />
+				<LineSeries dataKey="B" data={ SERIES_B } xAccessor={ xAccessor } yAccessor={ yAccessor } />
+				<XyChartTooltip
+					renderTooltip={ renderTooltip }
+					data-testid="tooltip-box"
+					{ ...tooltipProps }
+				/>
+				<OpenTooltip params={ params } />
+			</XYChart>
+		</div>
+	);
+
+describe( 'XyChartTooltip', () => {
+	test( 'renders the tooltip box inside the chart wrapper, not in a body-level portal', async () => {
+		const { container } = renderChart();
+
+		const box = await screen.findByTestId( 'tooltip-box' );
+
+		expect( box ).toHaveTextContent( 'nearest:A' );
+		expect( screen.getByTestId( 'wrapper' ) ).toContainElement( box );
+		// A body-level portal would sit outside the render root.
+		expect( container ).toContainElement( box );
+	} );
+
+	test( 'places the box at the pointer position when snapping is off', async () => {
+		renderChart();
+
+		// TooltipWithBounds moves the box through a transform from (0, 0), after its 10px offsets.
+		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( {
+			transform: 'translate(133px, 55px)',
+		} );
+	} );
+
+	test( 'snaps the box to the nearest datum', async () => {
+		renderChart( { snapTooltipToDatumX: true, snapTooltipToDatumY: true } );
+
+		// Datum (5, 50) sits at (100px, 50px); the default 10px offsets apply after snapping.
+		await waitFor( () =>
+			expect( screen.getByTestId( 'tooltip-box' ) ).toHaveStyle( {
+				transform: 'translate(110px, 60px)',
+			} )
+		);
+	} );
+
+	test( 'draws one glyph per series in the SVG at the datum position', async () => {
+		renderChart( { showSeriesGlyphs: true }, BOTH_SERIES );
+
+		const glyphA = await screen.findByTestId( 'xy-chart-tooltip-glyph-A' );
+		const glyphB = await screen.findByTestId( 'xy-chart-tooltip-glyph-B' );
+
+		// The group is placed at the datum; the glyph itself draws at the origin.
+		expect( screen.getByTestId( 'xy-chart-tooltip-glyph-group-A' ) ).toHaveAttribute(
+			'transform',
+			'translate(100, 50)'
+		);
+		expect( screen.getByTestId( 'xy-chart-tooltip-glyph-group-B' ) ).toHaveAttribute(
+			'transform',
+			'translate(100, 75)'
+		);
+		expect( glyphA ).toHaveAttribute( 'cx', '0' );
+		expect( glyphA ).toHaveAttribute( 'cy', '0' );
+		expect( glyphB ).toHaveAttribute( 'cx', '0' );
+		expect( glyphB ).toHaveAttribute( 'cy', '0' );
+		// Drawn into the chart SVG, not portaled out as HTML.
+		expect( glyphA ).toBeInstanceOf( SVGElement );
+	} );
+
+	test( 'hands the glyph renderer the origin, like visx, and marks the nearest datum', async () => {
+		const renderGlyph = jest.fn( () => null );
+		renderChart( { showSeriesGlyphs: true, renderGlyph }, BOTH_SERIES );
+
+		await waitFor( () => expect( renderGlyph ).toHaveBeenCalledTimes( 2 ) );
+
+		const calls = renderGlyph.mock.calls as unknown as Array<
+			[ { key: string; x: number; y: number; isNearestDatum: boolean; datum: Datum } ]
+		>;
+		const byKey = Object.fromEntries( calls.map( ( [ p ] ) => [ p.key, p ] ) );
+		// A renderer written against visx's Tooltip ignores x and y, so both stay 0.
+		expect( byKey.A ).toMatchObject( { x: 0, y: 0, datum: SERIES_A[ 1 ] } );
+		expect( byKey.B ).toMatchObject( { x: 0, y: 0, datum: SERIES_B[ 1 ] } );
+		expect( byKey.A.isNearestDatum ).toBe( true );
+		expect( byKey.B.isNearestDatum ).toBe( false );
+	} );
+
+	test( 'centres a band-scale datum in its band', async () => {
+		render(
+			<div style={ { position: 'relative' } }>
+				<XYChart
+					width={ 200 }
+					height={ 100 }
+					margin={ NO_MARGIN }
+					xScale={ { type: 'band', domain: [ 'a', 'b' ], paddingInner: 0, paddingOuter: 0 } }
+					yScale={ { type: 'linear', domain: [ 0, 100 ] } }
+				>
+					<BarSeries
+						dataKey="bars"
+						data={ BAND_DATA }
+						xAccessor={ bandXAccessor }
+						yAccessor={ bandYAccessor }
+					/>
+					<XyChartTooltip
+						renderTooltip={ renderBarTooltip }
+						data-testid="tooltip-box"
+						snapTooltipToDatumX
+						snapTooltipToDatumY
+						showDatumGlyph
+					/>
+					<OpenTooltip params={ BAND_PARAMS } />
+				</XYChart>
+			</div>
+		);
+
+		// Band 'a' spans 0..100px; the datum sits at its centre, 50px, not its start.
+		await waitFor( () =>
+			expect( screen.getByTestId( 'xy-chart-tooltip-glyph-group-bars' ) ).toHaveAttribute(
+				'transform',
+				'translate(50, 50)'
+			)
+		);
+		expect( screen.getByTestId( 'tooltip-box' ) ).toHaveStyle( {
+			transform: 'translate(60px, 60px)',
+		} );
+	} );
+
+	test( 'draws the crosshairs across the plot area, inside the margins, at the snapped position', async () => {
+		renderChart(
+			{
+				snapTooltipToDatumX: true,
+				snapTooltipToDatumY: true,
+				showVerticalCrosshair: true,
+				showHorizontalCrosshair: true,
+			},
+			undefined,
+			{ top: 10, right: 20, bottom: 30, left: 40 }
+		);
+
+		const vertical = await screen.findByTestId( 'xy-chart-tooltip-crosshair-vertical' );
+		const horizontal = await screen.findByTestId( 'xy-chart-tooltip-crosshair-horizontal' );
+
+		// Plot area is 140x60 at (40, 10); datum (5, 50) sits at its centre, (110, 40).
+		expect( vertical ).toHaveAttribute( 'x1', '110' );
+		expect( vertical ).toHaveAttribute( 'y1', '10' );
+		expect( vertical ).toHaveAttribute( 'y2', '70' );
+		expect( horizontal ).toHaveAttribute( 'y1', '40' );
+		expect( horizontal ).toHaveAttribute( 'x1', '40' );
+		expect( horizontal ).toHaveAttribute( 'x2', '180' );
+	} );
+
+	test( 'stacks the box above the chart overlays, with zIndex as the override', async () => {
+		const { unmount } = renderChart();
+		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( { zIndex: '3' } );
+		unmount();
+
+		renderChart( { zIndex: 9 } );
+		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( { zIndex: '9' } );
+	} );
+
+	test( 'accepts the portal-era options without passing them to the box', async () => {
+		renderChart( { scroll: true, debounce: 50, resizeObserverPolyfill: undefined } );
+
+		const box = await screen.findByTestId( 'tooltip-box' );
+
+		expect( box ).not.toHaveAttribute( 'scroll' );
+		expect( box ).not.toHaveAttribute( 'debounce' );
+	} );
+
+	test( 'renders no box when there is no tooltip renderer', async () => {
+		renderChart( { renderTooltip: undefined } );
+
+		await expect( screen.findByTestId( 'xy-chart-tooltip-anchor' ) ).resolves.toBeInTheDocument();
+		expect( screen.queryByTestId( 'tooltip-box' ) ).not.toBeInTheDocument();
+	} );
+
+	test( 'renders nothing when the tooltip content is empty', async () => {
+		renderChart( { renderTooltip: () => null, showSeriesGlyphs: true }, BOTH_SERIES );
+
+		// The anchor is the only thing rendered while there is nothing to show.
+		await expect( screen.findByTestId( 'xy-chart-tooltip-anchor' ) ).resolves.toBeInTheDocument();
+		expect( screen.queryByTestId( 'tooltip-box' ) ).not.toBeInTheDocument();
+		expect( screen.queryByTestId( 'xy-chart-tooltip-glyph-A' ) ).not.toBeInTheDocument();
+	} );
+
+	test( 'renders nothing while the tooltip is closed', () => {
+		renderChart( { showSeriesGlyphs: true, showVerticalCrosshair: true }, [] );
+
+		expect( screen.queryByTestId( 'tooltip-box' ) ).not.toBeInTheDocument();
+		expect( screen.queryByTestId( 'xy-chart-tooltip-glyph-A' ) ).not.toBeInTheDocument();
+		expect( screen.queryByTestId( 'xy-chart-tooltip-crosshair-vertical' ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/components/tooltip/xy-chart-tooltip.tsx

@@ -0,0 +1,288 @@
+import { Tooltip, defaultStyles } from '@visx/tooltip';
+import { DataContext, TooltipContext } from '@visx/xychart';
+import { useCallback, useContext, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { BoundedTooltip } from './private/bounded-tooltip';
+import type { RenderTooltipGlyphProps, XyChartTooltipProps } from '../../visx/types';
+import type { TooltipContextType } from '@visx/xychart';
+import type { CSSProperties, ReactNode } from 'react';
+
+const CROSSHAIR_STROKE_WIDTH = 1.5;
+const DEFAULT_GLYPH_RADIUS = 4;
+const FALLBACK_COLOR = '#222';
+// Above the chart's own overlays (the zoom reset button sits at 2). The chart
+// wrapper isolates its stacking context, so this never competes with page chrome.
+const DEFAULT_TOOLTIP_Z_INDEX = 3;
+// Portal-era options, accepted for compatibility and dropped before the box
+// renders: it sits in the chart wrapper and moves with it, and nothing
+// measures it any more.
+const PORTAL_OPTIONS = new Set( [ 'scroll', 'debounce', 'resizeObserverPolyfill' ] );
+
+type ScaleFn = ( value: unknown ) => number | undefined;
+
+const isValidNumber = ( value: unknown ): value is number =>
+	typeof value === 'number' && Number.isFinite( value );
+
+// Band scales place a datum at the start of its band; snapping targets the band's centre.
+// A d3 scale is a function that carries `bandwidth` as a property.
+const scaleBandwidth = ( scale: unknown ): number => {
+	const bandwidth = ( scale as { bandwidth?: unknown } | null | undefined )?.bandwidth;
+	return typeof bandwidth === 'function' ? Number( bandwidth() ) : 0;
+};
+
+const DefaultGlyph = < Datum extends object >( {
+	x,
+	y,
+	size,
+	color,
+	glyphStyle,
+	seriesKey,
+}: Omit< RenderTooltipGlyphProps< Datum >, 'key' > & { seriesKey: string } ) => {
+	const { theme } = useContext( DataContext ) || {};
+
+	return (
+		<circle
+			data-testid={ `xy-chart-tooltip-glyph-${ seriesKey }` }
+			cx={ x }
+			cy={ y }
+			r={ size }
+			fill={ color }
+			stroke={ theme?.backgroundColor }
+			strokeWidth={ CROSSHAIR_STROKE_WIDTH }
+			paintOrder="fill"
+			{ ...glyphStyle }
+		/>
+	);
+};
+
+const defaultRenderGlyph = < Datum extends object >( {
+	key,
+	...props
+}: RenderTooltipGlyphProps< Datum > ) => (
+	<DefaultGlyph key={ key } seriesKey={ key } { ...props } />
+);
+
+type XyChartTooltipContentProps< Datum extends object > = XyChartTooltipProps< Datum > & {
+	tooltipContext: TooltipContextType< Datum >;
+	/** The SVG's HTML parent once found. The box waits for it; the SVG overlay does not. */
+	container: HTMLElement | null;
+};
+
+const XyChartTooltipContent = < Datum extends object >( {
+	tooltipContext,
+	container,
+	renderTooltip,
+	renderGlyph = defaultRenderGlyph,
+	glyphStyle,
+	snapTooltipToDatumX = false,
+	snapTooltipToDatumY = false,
+	showVerticalCrosshair = false,
+	showHorizontalCrosshair = false,
+	showDatumGlyph = false,
+	showSeriesGlyphs = false,
+	verticalCrosshairStyle,
+	horizontalCrosshairStyle,
+	detectBounds = true,
+	zIndex = DEFAULT_TOOLTIP_Z_INDEX,
+	...rest
+}: XyChartTooltipContentProps< Datum > ) => {
+	const tooltipProps = Object.fromEntries(
+		Object.entries( rest ).filter( ( [ key ] ) => ! PORTAL_OPTIONS.has( key ) )
+	) as Omit< typeof rest, 'scroll' | 'debounce' | 'resizeObserverPolyfill' >;
+	const {
+		colorScale,
+		theme,
+		innerHeight = 0,
+		innerWidth = 0,
+		margin,
+		xScale,
+		yScale,
+		dataRegistry,
+	} = useContext( DataContext ) || {};
+
+	const tooltipContent = renderTooltip ? renderTooltip( { ...tooltipContext, colorScale } ) : null;
+	if ( tooltipContent == null ) {
+		return null;
+	}
+
+	const scaleX = xScale as ScaleFn | undefined;
+	const scaleY = yScale as ScaleFn | undefined;
+
+	// Datum position in SVG coordinates, from the accessors the series registered.
+	const getDatumLeftTop = ( key: string, datum: Datum ) => {
+		const entry = dataRegistry?.get( key );
+		const left =
+			scaleX && entry?.xAccessor
+				? Number( scaleX( entry.xAccessor( datum ) ) ) + scaleBandwidth( xScale ) / 2
+				: undefined;
+		const top =
+			scaleY && entry?.yAccessor
+				? Number( scaleY( entry.yAccessor( datum ) ) ) + scaleBandwidth( yScale ) / 2
+				: undefined;
+		return { left, top };
+	};
+
+	const nearestDatum = tooltipContext.tooltipData?.nearestDatum;
+	let { tooltipLeft, tooltipTop } = tooltipContext;
+
+	if ( nearestDatum && ( snapTooltipToDatumX || snapTooltipToDatumY ) ) {
+		const { left, top } = getDatumLeftTop( nearestDatum.key, nearestDatum.datum );
+		if ( snapTooltipToDatumX && isValidNumber( left ) ) {
+			tooltipLeft = left;
+		}
+		if ( snapTooltipToDatumY && isValidNumber( top ) ) {
+			tooltipTop = top;
+		}
+	}
+
+	const glyphs: ReactNode[] = [];
+	if ( showDatumGlyph || showSeriesGlyphs ) {
+		const size = Number( glyphStyle?.radius ?? DEFAULT_GLYPH_RADIUS );
+		const labelColor = theme?.htmlLabel?.color ?? FALLBACK_COLOR;
+		// visx colours a lone nearest-datum glyph like the gridlines and series glyphs like labels.
+		const fallbackColor = showSeriesGlyphs ? labelColor : theme?.gridStyles?.stroke ?? labelColor;
+		let entries: Array< { key: string; datum: Datum; index: number } > = [];
+		if ( showSeriesGlyphs ) {
+			entries = Object.values( tooltipContext.tooltipData?.datumByKey ?? {} );
+		} else if ( nearestDatum ) {
+			entries = [ nearestDatum ];
+		}
+
+		for ( const { key, datum, index } of entries ) {
+			const { left, top } = getDatumLeftTop( key, datum );
+			if ( ! isValidNumber( left ) || ! isValidNumber( top ) ) {
+				continue;
+			}
+			// The group carries the position and the renderer draws at the origin,
+			// as with visx's portal: a renderer that ignores `x` and `y` still lands
+			// on its datum.
+			glyphs.push(
+				<g
+					key={ key }
+					className="visx-tooltip-glyph"
+					data-testid={ `xy-chart-tooltip-glyph-group-${ key }` }
+					transform={ `translate(${ left }, ${ top })` }
+				>
+					{ renderGlyph( {
+						key,
+						color: colorScale?.( key ) ?? fallbackColor,
+						datum,
+						index,
+						size,
+						x: 0,
+						y: 0,
+						glyphStyle,
+						isNearestDatum: nearestDatum?.key === key,
+					} ) }
+				</g>
+			);
+		}
+	}
+
+	const crosshairStroke = theme?.gridStyles?.stroke ?? theme?.htmlLabel?.color ?? FALLBACK_COLOR;
+	const marginTop = margin?.top ?? 0;
+	const marginLeft = margin?.left ?? 0;
+
+	const TooltipComponent = detectBounds ? BoundedTooltip : Tooltip;
+	const boxStyle: CSSProperties = {
+		...defaultStyles,
+		zIndex,
+		background: theme?.backgroundColor ?? 'white',
+		boxShadow: `0 1px 2px ${
+			theme?.htmlLabel?.color ? `${ theme.htmlLabel.color }55` : '#22222255'
+		}`,
+		...theme?.htmlLabel,
+	};
+
+	return (
+		<>
+			<g className="visx-tooltip-overlay" pointerEvents="none">
+				{ showVerticalCrosshair && isValidNumber( tooltipLeft ) && (
+					<line
+						className="visx-crosshair visx-crosshair-vertical"
+						data-testid="xy-chart-tooltip-crosshair-vertical"
+						x1={ tooltipLeft }
+						x2={ tooltipLeft }
+						y1={ marginTop }
+						y2={ marginTop + innerHeight }
+						stroke={ crosshairStroke }
+						strokeWidth={ CROSSHAIR_STROKE_WIDTH }
+						{ ...verticalCrosshairStyle }
+					/>
+				) }
+				{ showHorizontalCrosshair && isValidNumber( tooltipTop ) && (
+					<line
+						className="visx-crosshair visx-crosshair-horizontal"
+						data-testid="xy-chart-tooltip-crosshair-horizontal"
+						x1={ marginLeft }
+						x2={ marginLeft + innerWidth }
+						y1={ tooltipTop }
+						y2={ tooltipTop }
+						stroke={ crosshairStroke }
+						strokeWidth={ CROSSHAIR_STROKE_WIDTH }
+						{ ...horizontalCrosshairStyle }
+					/>
+				) }
+				{ glyphs }
+			</g>
+			{ container &&
+				createPortal(
+					<TooltipComponent
+						left={ tooltipLeft }
+						top={ tooltipTop }
+						style={ boxStyle }
+						applyPositionStyle
+						{ ...tooltipProps }
+					>
+						{ tooltipContent }
+					</TooltipComponent>,
+					container
+				) }
+		</>
+	);
+};
+
+/**
+ * In-tree replacement for `@visx/xychart`'s `Tooltip`.
+ *
+ * visx renders its tooltip box, glyphs and crosshairs through portals appended
+ * to `document.body`. That puts them in the page's root stacking context, where
+ * they paint above every sticky or fixed element that lives inside a nested
+ * stacking context, and no z-index on that element can change the order. This
+ * component draws the glyphs and crosshairs straight into the chart SVG and
+ * renders the tooltip box into the SVG's parent element, so all of them stack
+ * as ordinary descendants of the chart.
+ *
+ * Render it as a child of `XYChart`. The element wrapping that `XYChart` must
+ * be `position: relative` with the SVG at its origin, and `isolation: isolate`:
+ * the box is placed with the SVG-local coordinates visx reports, and the
+ * isolation keeps the box's `zIndex` from competing with page chrome. The box
+ * flips and clamps to stay inside the nearest ancestor that clips its overflow
+ * (or the viewport), so it may extend past the chart wrapper but is never cut
+ * off unless that ancestor is smaller than the box itself.
+ *
+ * @param props - visx's `Tooltip` options. `scroll`, `debounce` and `resizeObserverPolyfill` are accepted and ignored.
+ * @return An anchor in the SVG, plus the overlay and the tooltip box while the tooltip is open.
+ */
+export const XyChartTooltip = < Datum extends object >( props: XyChartTooltipProps< Datum > ) => {
+	const tooltipContext = useContext( TooltipContext ) as TooltipContextType< Datum > | null;
+	const [ container, setContainer ] = useState< HTMLElement | null >( null );
+
+	// Children of XYChart render inside its SVG, and the box needs an HTML parent.
+	const anchorRef = useCallback( ( node: SVGGElement | null ) => {
+		setContainer( node?.ownerSVGElement?.parentElement ?? null );
+	}, [] );
+
+	return (
+		<>
+			<g ref={ anchorRef } data-testid="xy-chart-tooltip-anchor" />
+			{ tooltipContext?.tooltipOpen && (
+				<XyChartTooltipContent
+					{ ...props }
+					tooltipContext={ tooltipContext }
+					container={ container }
+				/>
+			) }
+		</>
+	);
+};

package/src/components/trend-indicator/trend-indicator.module.scss

@@ -2,8 +2,8 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 0.125em;
-	font-size: var(--wpds-typography-font-size-md, 13px);
-	font-weight: var(--wpds-typography-font-weight-emphasis, 600);
+	font-size: var(--wpds-typography-font-size-md);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	line-height: 1;
 
 	&--up {

package/src/hooks/test/use-xychart-theme.test.tsx

@@ -23,7 +23,7 @@ describe( 'useXYChartTheme', () => {
 		document.body.removeChild( scope );
 	} );
 
-	// Resolving a paint-only color here would freeze it: visx writes whatever it is handed onto the element, so a literal stops following the cascade and an override set below the provider wrapper never reaches it. Handing visx the pointer instead lets it resolve at the element it paints. jsdom does not compute `var()`, so what the pointer resolves *to* is covered in Storybook; this pins that the chain survives the theme build intact.
+	// jsdom does not compute `var()`, so what a pointer resolves *to* is covered in Storybook.
 	it( 'hands visx the catalog pointer for paint-only colors rather than a resolved value', () => {
 		const scope = document.createElement( 'div' );
 		document.body.appendChild( scope );
@@ -36,10 +36,10 @@ describe( 'useXYChartTheme', () => {
 
 		expect( result.current.gridStyles.stroke ).toBe( 'var(--a8c-charts-color-grid, #dbdbdb)' );
 		expect( result.current.axisStyles.x.bottom.axisLine.stroke ).toBe(
-			'var(--a8c-charts-color-axis, #dbdbdb)'
+			'var(--a8c-charts-color-axis-x, #dbdbdb)'
 		);
 		expect( result.current.axisStyles.x.bottom.tickLine.stroke ).toBe(
-			'var(--a8c-charts-color-tick, #dbdbdb)'
+			'var(--a8c-charts-color-tick-x, #dbdbdb)'
 		);
 		expect( result.current.axisStyles.x.bottom.tickLabel.fill ).toBe(
 			'var(--a8c-charts-color-label-axis, #1e1e1e)'
@@ -67,4 +67,17 @@ describe( 'useXYChartTheme', () => {
 
 		document.body.removeChild( scope );
 	} );
+
+	it( 'gives the y axis its own roles, resolving to none', () => {
+		const { result } = renderHook( () => useXYChartTheme( [] ) );
+
+		for ( const side of [ 'left', 'right' ] as const ) {
+			expect( result.current.axisStyles.y[ side ].axisLine.stroke ).toBe(
+				'var(--a8c-charts-color-axis-y, none)'
+			);
+			expect( result.current.axisStyles.y[ side ].tickLine.stroke ).toBe(
+				'var(--a8c-charts-color-tick-y, none)'
+			);
+		}
+	} );
 } );

package/src/hooks/use-xychart-theme.ts

@@ -1,8 +1,9 @@
 import { buildChartTheme } from '@visx/xychart';
 import { useMemo } from 'react';
 import { useGlobalChartsTheme } from '../providers';
+import { CATALOG_POINTERS } from '../providers/chart-context/private/catalog-pointers';
 import { useChartScopeElement } from '../providers/chart-scope';
-import { createCssVariableResolver } from '../utils';
+import { createCssVariableResolver, normalizeColorToHex } from '../utils';
 import type { SeriesData } from '../types';
 
 export const useXYChartTheme = ( data: SeriesData[] ) => {
@@ -17,29 +18,44 @@ export const useXYChartTheme = ( data: SeriesData[] ) => {
 	);
 
 	return useMemo( () => {
-		// Only what is read as a string is resolved here — the palette and `backgroundColor` — plus `htmlLabel.color` below, which is painted outside the scope. Resolving against the chart's own scope element, never :root, is what reads an override set inside the provider tree.
-		//
-		// One resolver per theme build, so all three share a single getComputedStyle call.
+		// Only what is read as a string is resolved: the palette, `backgroundColor`, `htmlLabel.color`.
+		// At the chart's scope element, never :root, so an override inside the provider tree is seen.
+		// One resolver for all three, so they share a single getComputedStyle call.
 		const resolve = createCssVariableResolver( scopeElement );
 		const resolveColor = ( value?: string ): string | undefined =>
 			value ? resolve( value ) ?? value : value;
 
 		const seriesColors: string[] = JSON.parse( seriesColorKey );
 
-		// The palette gets the same treatment as every other color here, and needs it more: `theme.colors` is the one field that is always a `var()` chain, and the four slots without a catalog default resolve to nothing at all. visx builds its `colorScale` from this array and uses it as the default stroke for a series rendered without an explicit one, so an unresolved entry paints nothing rather than degrading. Entries that resolve to nothing are dropped so the scale compacts the way the provider's own palette does.
-		const paletteColors = [ ...seriesColors, ...( theme.colors ?? [] ) ]
+		// visx uses this as the default stroke for a series without one, so an
+		// unresolved entry paints nothing.
+		const paletteColors = [ ...seriesColors, ...CATALOG_POINTERS.series ]
 			.map( color => resolveColor( color ) )
 			.filter( ( color ): color is string => Boolean( color ) && ! color.includes( 'var(' ) );
 
 		// The tooltip is painted in a portal outside the scope, and visx concatenates this color into a `box-shadow` where a chain cannot take a suffix; see TOKENS.md#the-svg-bridge. Passing it explicitly leaves `svgLabelSmall.fill`, which visx derives it from, a chain for the SVG tick labels.
-		const htmlLabelColor = resolveColor( theme.svgLabelSmall?.fill );
+		// Hex specifically: that concatenation appends `55`, which only yields a color
+		// after a 6-digit hex. An `rgb()` computed value takes the whole shadow down.
+		const resolvedLabelColor = resolveColor( CATALOG_POINTERS.labelAxis );
+		const htmlLabelColor = resolvedLabelColor
+			? normalizeColorToHex( resolvedLabelColor ) || resolvedLabelColor
+			: resolvedLabelColor;
 
-		// The grid, axis, tick and label colors are spread through untouched, and that is the whole mechanism: visx writes each one onto the element it paints — as an inline style for the grid, a presentation attribute elsewhere — and a `var()` chain resolves there natively. So the role is read at the painted element rather than snapshot at the provider wrapper, which is what makes an override on a chart's own class work, keeps a theme change live without a re-render, and leaves nothing to resolve during SSR. Resolving them here would freeze the color instead.
+		// visx's fallbacks for whichever axis or grid style object it is not given. All four are
+		// supplied, so these reach nothing; they stay because the config type requires them.
 		return buildChartTheme( {
 			...theme,
+			gridColor: '',
+			gridColorDark: '',
 			colors: paletteColors,
-			backgroundColor: resolveColor( theme.backgroundColor ),
+			backgroundColor: resolveColor( CATALOG_POINTERS.background ),
 			htmlLabel: htmlLabelColor ? { color: htmlLabelColor } : undefined,
+			gridStyles: { ...theme.gridStyles, stroke: CATALOG_POINTERS.grid },
+			xAxisLineStyles: { ...theme.xAxisLineStyles, stroke: CATALOG_POINTERS.axisX },
+			xTickLineStyles: { ...theme.xTickLineStyles, stroke: CATALOG_POINTERS.tickX },
+			yAxisLineStyles: { stroke: CATALOG_POINTERS.axisY },
+			yTickLineStyles: { stroke: CATALOG_POINTERS.tickY },
+			svgLabelSmall: { ...theme.svgLabelSmall, fill: CATALOG_POINTERS.labelAxis },
 		} );
 	}, [ theme, seriesColorKey, scopeElement ] );
 };