@automattic/charts 3.1.1 → 4.0.0

package/src/components/tooltip/test/bounded-tooltip.test.tsx

@@ -0,0 +1,129 @@
+import { render, screen } from '@testing-library/react';
+import { BoundedTooltip, getBoundedPosition } from '../private/bounded-tooltip';
+
+const BOX = { width: 208, height: 36 };
+const OFFSETS = { offsetLeft: 10, offsetTop: 10 };
+
+describe( 'getBoundedPosition', () => {
+	test( 'sits below and to the right of the anchor when that fits', () => {
+		expect(
+			getBoundedPosition( {
+				left: 40,
+				top: 20,
+				...OFFSETS,
+				box: BOX,
+				bounds: { left: 0, top: 0, right: 600, bottom: 300 },
+			} )
+		).toEqual( { x: 50, y: 30 } );
+	} );
+
+	test( 'flips to the other side when the near side clips more', () => {
+		expect(
+			getBoundedPosition( {
+				left: 500,
+				top: 280,
+				...OFFSETS,
+				box: BOX,
+				bounds: { left: 0, top: 0, right: 600, bottom: 300 },
+			} )
+		).toEqual( { x: 282, y: 234 } );
+	} );
+
+	test( 'pins the box to the edge when neither side fits, instead of spilling', () => {
+		// A 208px box mid-way across a 346px plot: neither side fits, so the box
+		// keeps the near side and parks at the right edge instead of spilling.
+		expect(
+			getBoundedPosition( {
+				left: 173,
+				top: 50,
+				...OFFSETS,
+				box: BOX,
+				bounds: { left: 0, top: 0, right: 346, bottom: 200 },
+			} )
+		).toEqual( { x: 138, y: 60 } );
+	} );
+
+	test( 'may leave the wrapper as long as it stays inside the clipping ancestor', () => {
+		// The wrapper starts 40px inside its clipping card, so the box can reach
+		// 40px past the wrapper's left edge, and stops there.
+		expect(
+			getBoundedPosition( {
+				left: 173,
+				top: 50,
+				...OFFSETS,
+				box: BOX,
+				bounds: { left: -40, top: -60, right: 360, bottom: 200 },
+			} )
+		).toEqual( { x: -40, y: 60 } );
+	} );
+} );
+
+const rect = ( left: number, top: number, width: number, height: number ) =>
+	( {
+		left,
+		top,
+		width,
+		height,
+		right: left + width,
+		bottom: top + height,
+		x: left,
+		y: top,
+		toJSON: () => ( {} ),
+	} ) as DOMRect;
+
+describe( 'BoundedTooltip', () => {
+	afterEach( () => {
+		jest.restoreAllMocks();
+	} );
+
+	test( 'keeps the box inside an overflow-hidden ancestor that is wider than the wrapper', () => {
+		// Card at x=400 (400 wide, overflow hidden); plot wrapper at x=440, 346 wide.
+		jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+			this: Element
+		) {
+			if ( this.classList.contains( 'visx-tooltip' ) ) {
+				return rect( 0, 0, 208, 36 );
+			}
+			if ( this.getAttribute( 'data-testid' ) === 'card' ) {
+				return rect( 400, 100, 400, 400 );
+			}
+			return rect( 440, 160, 346, 200 );
+		} );
+
+		render(
+			<div data-testid="card" style={ { overflow: 'hidden' } }>
+				<div style={ { position: 'relative' } }>
+					<BoundedTooltip left={ 173 } top={ 50 } data-testid="box">
+						content
+					</BoundedTooltip>
+				</div>
+			</div>
+		);
+
+		// Neither side of the anchor fits inside the card, so the box stops at
+		// the card's left edge, 40px outside the wrapper.
+		expect( screen.getByTestId( 'box' ) ).toHaveStyle( { transform: 'translate(-40px, 60px)' } );
+	} );
+
+	test( 'falls back to the viewport when nothing clips', () => {
+		jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+			this: Element
+		) {
+			return this.classList.contains( 'visx-tooltip' )
+				? rect( 0, 0, 208, 36 )
+				: rect( 900, 0, 346, 200 );
+		} );
+
+		render(
+			<div style={ { position: 'relative' } }>
+				<BoundedTooltip left={ 173 } top={ 50 } data-testid="box">
+					content
+				</BoundedTooltip>
+			</div>
+		);
+
+		// JSDOM's viewport is 1024px wide and the wrapper starts at 900: the box
+		// flips left of the anchor and stops at the viewport's right edge.
+		expect( screen.getByTestId( 'box' ) ).toHaveStyle( { transform: 'translate(-84px, 60px)' } );
+	} );
+} );

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 }
+				/>
+			) }
+		</>
+	);
+};