@automattic/charts 3.2.0 → 4.1.0

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

@@ -0,0 +1,326 @@
+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 {
+	CrosshairStyle,
+	RenderTooltipGlyphProps,
+	XyChartTooltipProps,
+} from '../../visx/types';
+import type { TooltipContextType } from '@visx/xychart';
+import type { CSSProperties, ReactNode } from 'react';
+
+const CROSSHAIR_STROKE_WIDTH = 1.5;
+const CROSSHAIR_PAINT_PROPERTIES = new Set( [
+	'stroke',
+	'strokeWidth',
+	'strokeOpacity',
+	'strokeDasharray',
+	'strokeLinecap',
+	'opacity',
+] );
+
+const crosshairPaintProps = ( props: CrosshairStyle = {} ) => {
+	const pickPaint = ( value: object ) =>
+		Object.fromEntries(
+			Object.entries( value ).filter( ( [ key ] ) => CROSSHAIR_PAINT_PROPERTIES.has( key ) )
+		);
+
+	return {
+		...pickPaint( props ),
+		...( props.className === undefined ? {} : { className: props.className } ),
+		...( props.style === undefined ? {} : { style: pickPaint( props.style ) } ),
+	};
+};
+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,
+	tooltipPlacement = 'auto',
+	zIndex = DEFAULT_TOOLTIP_Z_INDEX,
+	style,
+	...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 || tooltipPlacement === 'below-axis' )
+	) {
+		const { left, top } = getDatumLeftTop( nearestDatum.key, nearestDatum.datum );
+		if ( ( snapTooltipToDatumX || tooltipPlacement === 'below-axis' ) && 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 || tooltipPlacement === 'below-axis' ? BoundedTooltip : Tooltip;
+	const boxStyle: CSSProperties = {
+		...defaultStyles,
+		zIndex,
+		backgroundColor: theme?.backgroundColor ?? 'white',
+		boxShadow: `0 1px 2px ${
+			theme?.htmlLabel?.color ? `${ theme.htmlLabel.color }55` : '#22222255'
+		}`,
+		...theme?.htmlLabel,
+		...style,
+	};
+
+	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"
+						stroke={ crosshairStroke }
+						strokeWidth={ CROSSHAIR_STROKE_WIDTH }
+						{ ...crosshairPaintProps( verticalCrosshairStyle ) }
+						x1={ tooltipLeft }
+						x2={ tooltipLeft }
+						y1={ marginTop }
+						y2={ marginTop + innerHeight }
+					/>
+				) }
+				{ showHorizontalCrosshair && isValidNumber( tooltipTop ) && (
+					<line
+						className="visx-crosshair visx-crosshair-horizontal"
+						data-testid="xy-chart-tooltip-crosshair-horizontal"
+						stroke={ crosshairStroke }
+						strokeWidth={ CROSSHAIR_STROKE_WIDTH }
+						{ ...crosshairPaintProps( horizontalCrosshairStyle ) }
+						x1={ marginLeft }
+						x2={ marginLeft + innerWidth }
+						y1={ tooltipTop }
+						y2={ tooltipTop }
+					/>
+				) }
+				{ glyphs }
+			</g>
+			{ container &&
+				createPortal(
+					<TooltipComponent
+						left={ tooltipLeft }
+						top={
+							tooltipPlacement === 'below-axis'
+								? marginTop + innerHeight + ( margin?.bottom ?? 0 )
+								: tooltipTop
+						}
+						style={ boxStyle }
+						applyPositionStyle
+						{ ...tooltipProps }
+						{ ...( tooltipPlacement === 'below-axis' && { placement: tooltipPlacement } ) }
+					>
+						{ 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. Below-axis placement
+ * pins it beneath the x-axis and applies horizontal bounds only.
+ *
+ * @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-chart-data-transform-zone.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import { GlobalChartsProvider } from '../../providers';
+import { useChartDataTransform } from '../use-chart-data-transform';
+import type { SeriesData } from '../../types';
+
+// One reference, reused across both renders, so only the zone can invalidate the memo.
+const data: SeriesData[] = [
+	{ label: 'Series A', data: [ { dateString: '2026-08-02', value: 1 } ] },
+];
+
+const Probe = () => {
+	const [ series ] = useChartDataTransform( data );
+	const point = series.data[ 0 ] as { date?: Date };
+
+	return <span data-testid="instant">{ point.date?.toISOString() }</span>;
+};
+
+describe( 'useChartDataTransform', () => {
+	it( 're-dates its points when only the provider time zone changes', () => {
+		const { rerender } = render(
+			<GlobalChartsProvider timeZone="Asia/Tokyo">
+				<Probe />
+			</GlobalChartsProvider>
+		);
+
+		expect( screen.getByTestId( 'instant' ) ).toHaveTextContent( '2026-08-01T15:00:00.000Z' );
+
+		rerender(
+			<GlobalChartsProvider timeZone="Pacific/Auckland">
+				<Probe />
+			</GlobalChartsProvider>
+		);
+
+		expect( screen.getByTestId( 'instant' ) ).toHaveTextContent( '2026-08-01T12:00:00.000Z' );
+	} );
+} );

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

@@ -9,6 +9,13 @@ jest.mock( '../../utils/get-longest-tick-width', () => ( {
 	getLongestTickWidth: ( ...args: unknown[] ) => mockGetLongestTickWidth( ...args ),
 } ) );
 
+// jsdom has no getComputedTextLength, so the real measurement always returns null.
+const mockGetEdgeTickWidths = jest.fn();
+jest.mock( '../../utils/get-edge-tick-widths', () => ( {
+	...jest.requireActual( '../../utils/get-edge-tick-widths' ),
+	getEdgeTickWidths: ( ...args: unknown[] ) => mockGetEdgeTickWidths( ...args ),
+} ) );
+
 describe( 'useChartMargin', () => {
 	const baseTheme = {
 		axisStyles: {
@@ -43,6 +50,8 @@ describe( 'useChartMargin', () => {
 	beforeEach( () => {
 		mockGetLongestTickWidth.mockReset();
 		mockGetLongestTickWidth.mockReturnValue( 40 );
+		mockGetEdgeTickWidths.mockReset();
+		mockGetEdgeTickWidths.mockReturnValue( { first: 0, last: 0 } );
 	} );
 
 	it( 'calculates left margin for left y axis', () => {
@@ -62,7 +71,7 @@ describe( 'useChartMargin', () => {
 		expect( mockGetLongestTickWidth ).toHaveBeenCalledWith(
 			expect.any( Array ),
 			options.axis.y.tickFormat,
-			theme.axisStyles.y.left.axisLabel
+			{ fontSize: '12px' }
 		);
 		// 40 label width + 8 tick length + ceil(11 * 0.25) label dx offset
 		expect( result.current.left ).toBe( 51 );
@@ -85,7 +94,7 @@ describe( 'useChartMargin', () => {
 		expect( mockGetLongestTickWidth ).toHaveBeenCalledWith(
 			expect.any( Array ),
 			options.axis.y.tickFormat,
-			theme.axisStyles.y.right.axisLabel
+			{ fontSize: '12px' }
 		);
 		// 40 label width + 8 tick length + ceil(11 * 0.25) label dx offset
 		expect( result.current.right ).toBe( 51 );
@@ -108,7 +117,7 @@ describe( 'useChartMargin', () => {
 		expect( mockGetLongestTickWidth ).toHaveBeenCalledWith(
 			[ 0, 1000 ],
 			options.axis.y.tickFormat,
-			theme.axisStyles.y.left.axisLabel
+			{ fontSize: '12px' }
 		);
 	} );
 
@@ -185,6 +194,167 @@ describe( 'useChartMargin', () => {
 		expect( result.current.bottom ).toBe( 25 );
 	} );
 
+	describe( 'x-axis edge tick labels', () => {
+		const tickFormat = ( value: number ) => new Date( value ).toDateString();
+		const tickValues = [ 1, 2, 3 ];
+		const datedXOptions = ( xOverrides = {} ) => ( {
+			...optionsBase,
+			axis: { ...optionsBase.axis, x: { tickValues, tickFormat, ...xOverrides } },
+		} );
+
+		it( 'reserves half of the last label on the right', () => {
+			mockGetEdgeTickWidths.mockReturnValue( { first: 0, last: 60 } );
+
+			const { result } = renderHook( () =>
+				useChartMargin( 300, datedXOptions(), data, baseTheme )
+			);
+
+			expect( result.current.right ).toBe( 30 );
+		} );
+
+		it( 'keeps the default right margin when the last label fits inside it', () => {
+			mockGetEdgeTickWidths.mockReturnValue( { first: 0, last: 30 } );
+
+			const { result } = renderHook( () =>
+				useChartMargin( 300, datedXOptions(), data, baseTheme )
+			);
+
+			expect( result.current.right ).toBe( 20 );
+		} );
+
+		it( 'widens the left margin past the y-axis reservation when the first label needs it', () => {
+			mockGetEdgeTickWidths.mockReturnValue( { first: 120, last: 0 } );
+
+			const { result } = renderHook( () =>
+				useChartMargin( 300, datedXOptions(), data, baseTheme )
+			);
+
+			// 60 for the label's overhanging half, over the 51 the y-axis ticks need.
+			expect( result.current.left ).toBe( 60 );
+		} );
+
+		it( 'measures the axis tick values with the x tick label style', () => {
+			const theme = {
+				...baseTheme,
+				axisStyles: {
+					...baseTheme.axisStyles,
+					x: {
+						bottom: { tickLabel: { fontSize: 11 }, tickLength: 8 } as unknown as never,
+						top: {} as unknown as never,
+					},
+				},
+			} as XYChartTheme;
+
+			renderHook( () => useChartMargin( 300, datedXOptions(), data, theme ) );
+
+			expect( mockGetEdgeTickWidths ).toHaveBeenCalledWith( tickValues, tickFormat, {
+				fontSize: '11px',
+			} );
+		} );
+
+		it( 'falls back to the raw tick label style when its font size is a relative unit', () => {
+			const theme = {
+				...baseTheme,
+				axisStyles: {
+					...baseTheme.axisStyles,
+					x: {
+						bottom: { tickLabel: { fontSize: '0.875rem' }, tickLength: 8 } as unknown as never,
+						top: {} as unknown as never,
+					},
+				},
+			} as XYChartTheme;
+
+			renderHook( () => useChartMargin( 300, datedXOptions(), data, theme ) );
+
+			expect( mockGetEdgeTickWidths ).toHaveBeenCalledWith( tickValues, tickFormat, {
+				fontSize: '0.875rem',
+			} );
+		} );
+
+		it( 'reserves the edge labels on a top x axis too', () => {
+			mockGetEdgeTickWidths.mockReturnValue( { first: 120, last: 60 } );
+
+			const { result } = renderHook( () =>
+				useChartMargin( 300, datedXOptions( { orientation: 'top' } ), data, baseTheme )
+			);
+
+			expect( result.current.right ).toBe( 30 );
+			expect( result.current.left ).toBe( 60 );
+		} );
+
+		it( 'reserves nothing for a hidden x axis', () => {
+			mockGetEdgeTickWidths.mockReturnValue( { first: 120, last: 60 } );
+
+			const { result } = renderHook( () =>
+				useChartMargin( 300, datedXOptions( { display: false } ), data, baseTheme )
+			);
+
+			expect( mockGetEdgeTickWidths ).not.toHaveBeenCalled();
+			expect( result.current.right ).toBe( 20 );
+			expect( result.current.left ).toBe( 51 );
+		} );
+	} );
+
+	describe( 'real measurement', () => {
+		// Everything else here mocks the measurer out; this block runs it for real,
+		// so that a width that never reaches the margin would fail something.
+		const actual = jest.requireActual( '../../utils/get-edge-tick-widths' );
+		type Measurable = { getComputedTextLength?: () => number };
+
+		afterEach( () => {
+			delete ( window.SVGElement.prototype as Measurable ).getComputedTextLength;
+		} );
+
+		it( 'turns a measured edge label into a reserved margin', () => {
+			// jsdom ships no getComputedTextLength, so @visx/text cannot measure at all.
+			( window.SVGElement.prototype as Measurable ).getComputedTextLength = function (
+				this: SVGElement
+			) {
+				return ( this.textContent ?? '' ).length * 8;
+			};
+			mockGetEdgeTickWidths.mockImplementation( actual.getEdgeTickWidths );
+
+			const options = {
+				...optionsBase,
+				axis: {
+					...optionsBase.axis,
+					x: {
+						tickValues: [ 1, 2 ],
+						tickFormat: ( _value: number, index: number ) =>
+							index === 0 ? 'AA' : 'MEASURED-LAST',
+					},
+				},
+			};
+
+			const { result } = renderHook( () => useChartMargin( 300, options, data, baseTheme ) );
+
+			// 'MEASURED-LAST' is 13 characters, so 104px wide, and half of it is reserved.
+			expect( result.current.right ).toBe( 52 );
+		} );
+	} );
+
+	describe( 'y axis gutter', () => {
+		it( 'measures a caller-pinned domain rather than the data range', () => {
+			const options = { ...optionsBase, yScale: { domain: [ 0, 1 ] as [ number, number ] } };
+
+			renderHook( () => useChartMargin( 300, options, data, baseTheme ) );
+
+			const ticks = mockGetLongestTickWidth.mock.calls[ 0 ][ 0 ] as number[];
+			expect( Math.max( ...ticks ) ).toBeLessThanOrEqual( 1 );
+		} );
+
+		it( 'reserves no gutter for a hidden y axis', () => {
+			const options = {
+				...optionsBase,
+				axis: { ...optionsBase.axis, y: { ...optionsBase.axis.y, display: false } },
+			};
+
+			const { result } = renderHook( () => useChartMargin( 300, options, data, baseTheme ) );
+
+			expect( result.current.left ).toBe( 20 );
+		} );
+	} );
+
 	describe( 'horizontal y ticks', () => {
 		const horizontalOptions = ( tickFormat: ( value: string | number ) => string ) => ( {
 			...optionsBase,

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-chart-data-transform.ts

@@ -1,4 +1,7 @@
 import { useMemo } from 'react';
+// Imported from the module rather than the `providers` barrel: that barrel pulls
+// `use-chart-registration`, which imports this file's own barrel back.
+import { useChartFormatting } from '../providers/chart-context/hooks/use-chart-formatting';
 import { parseAsLocalDate } from '../utils';
 import type { SeriesData } from '../types';
 
@@ -7,7 +10,7 @@ import type { SeriesData } from '../types';
  *
  * This hook extracts the common data transformation logic used in both line-chart
  * and bar-chart components. It:
- * 1. Parses date strings into Date objects using parseAsLocalDate
+ * 1. Parses date strings into Date objects, dated in the provider's time zone
  * 2. Sorts data points by date when date properties are present
  * 3. Returns the original data unchanged when no date properties are found
  *
@@ -15,6 +18,10 @@ import type { SeriesData } from '../types';
  * @return {SeriesData[]} The transformed and sorted data
  */
 export const useChartDataTransform = ( data: SeriesData[] ) => {
+	// A naive `dateString` names no zone, so without this it would be read in the
+	// viewer's and then relabeled in the host's, and the two never cancel.
+	const { timeZone } = useChartFormatting();
+
 	return useMemo( () => {
 		// Check if the first data point has date or dateString properties
 		const firstPoint = data?.[ 0 ]?.data?.[ 0 ];
@@ -35,7 +42,7 @@ export const useChartDataTransform = ( data: SeriesData[] ) => {
 					if ( 'date' in point && point.date ) {
 						date = point.date;
 					} else if ( 'dateString' in point && point.dateString ) {
-						date = parseAsLocalDate( point.dateString );
+						date = parseAsLocalDate( point.dateString, timeZone );
 					}
 
 					return {
@@ -48,5 +55,5 @@ export const useChartDataTransform = ( data: SeriesData[] ) => {
 					return a.date.getTime() - b.date.getTime();
 				} ),
 		} ) );
-	}, [ data ] );
+	}, [ data, timeZone ] );
 };