@automattic/charts 4.11.1 → 4.13.0

package/src/charts/line-chart/line-chart.tsx

@@ -16,6 +16,7 @@ import {
 } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { XYChartTooltip, useKeyboardNavigation } from '../../components/tooltip';
+import { getKeyboardStops } from '../../components/tooltip/private/keyboard-stops';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -336,6 +337,15 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			} ) );
 		}, [ dataSorted, hiddenSeries ] );
 
+		const visibleSeries = useMemo(
+			() => dataSorted.filter( series => isSeriesVisible( series.label ) ),
+			[ dataSorted, isSeriesVisible ]
+		);
+		const visibleSeriesKey = useMemo(
+			() => JSON.stringify( visibleSeries.map( series => series.label ) ),
+			[ visibleSeries ]
+		);
+
 		// Check if all series are hidden
 		const allSeriesHidden = useMemo( () => {
 			return seriesWithVisibility.every( ( { isVisible } ) => ! isVisible );
@@ -378,18 +388,18 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			return min < max ? [ min, max ] : undefined;
 		}, [ rescaleYOnVisibilityChange, dataSorted, isSeriesVisible, options?.yScale ] );
 
-		// Keyboard navigation steps through x positions, and the grouped tooltip
-		// reads every series at that position; the first series names the point.
+		const stops = useMemo( () => getKeyboardStops( visibleSeries ), [ visibleSeries ] );
+
+		// The grouped tooltip reads every visible series at a stop; the first visible series with a point there names it.
 		const activateSelectedPoint = useCallback(
-			( index: number ) => {
-				const series = dataSorted[ 0 ];
-				const datum = series?.data[ index ];
+			( stop: number ) => {
+				const match = stops.membersAt( stop )[ 0 ];
 
-				if ( series && datum ) {
-					onDatumActivate?.( { datum, index, key: series.label } );
+				if ( match ) {
+					onDatumActivate?.( { datum: match.datum, index: match.index, key: match.series.label } );
 				}
 			},
-			[ dataSorted, onDatumActivate ]
+			[ stops, onDatumActivate ]
 		);
 
 		const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
@@ -398,7 +408,8 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			isNavigating,
 			setIsNavigating,
 			chartRef,
-			totalPoints: dataSorted[ 0 ]?.data.length || 0,
+			totalPoints: stops.count,
+			visibleSeriesKey,
 			onActivate: activateSelectedPoint,
 			preventTooltipScroll: tooltipPlacement === 'below-axis',
 		} );
@@ -424,8 +435,8 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 		}, [ dataSorted, isSeriesVisible ] );
 
 		const hasWholeNumberValues = useMemo(
-			() => hasOnlyWholeNumbers( dataSorted.filter( series => isSeriesVisible( series.label ) ) ),
-			[ dataSorted, isSeriesVisible ]
+			() => hasOnlyWholeNumbers( visibleSeries ),
+			[ visibleSeries ]
 		);
 
 		const chartOptions = useMemo( () => {
@@ -482,12 +493,8 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 		// Classified from the rendered series, like the axis above: a hidden
 		// hourly line must not leave the tooltip naming an hour the axis dropped.
 		const bucketInfo = useMemo(
-			() =>
-				getBucketInfo(
-					dataSorted.filter( series => isSeriesVisible( series.label ) ),
-					options?.axis?.x?.tickResolution
-				),
-			[ dataSorted, isSeriesVisible, options?.axis?.x?.tickResolution ]
+			() => getBucketInfo( visibleSeries, options?.axis?.x?.tickResolution ),
+			[ visibleSeries, options?.axis?.x?.tickResolution ]
 		);
 
 		const tooltipRenderGlyph = useMemo( () => {
@@ -809,7 +816,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 													keyboardFocusedClassName={
 														styles[ 'line-chart__tooltip--keyboard-focused' ]
 													}
-													series={ dataSorted }
+													series={ visibleSeries }
 												/>
 											) }
 

package/src/charts/line-chart/test/line-chart.test.tsx

@@ -6,9 +6,10 @@ import { GlyphDiamond } from '@visx/glyph';
 import { createElement, createRef, type ComponentProps } from 'react';
 import { GlobalChartsProvider, defaultTheme } from '../../../providers';
 import { useGlobalChartsContext } from '../../../providers/chart-context/hooks/use-global-charts-context';
-import LineChart, { LineChartUnresponsive } from '../line-chart';
+import LineChart, { LineChartUnresponsive, renderDefaultTooltip } from '../line-chart';
 import type { GlobalChartsContextValue } from '../../../providers/chart-context/types';
 import type { DataPointDate, SeriesData } from '../../../types';
+import type { RenderTooltipParams } from '../../../visx/types';
 import type { ChartInstanceRef } from '../../private/chart-instance-context';
 import type { RenderLineGlyphProps } from '../types';
 
@@ -1658,6 +1659,32 @@ describe( 'LineChart', () => {
 				} );
 			} );
 
+			test.each( [
+				[ 'the first is hidden', [ { ...SERIES_A, data: SERIES_A.data.slice( 0, 1 ) }, SERIES_B ] ],
+				[
+					'the first visible series is empty',
+					[ SERIES_A, { ...SERIES_A, label: 'Empty', data: [] }, SERIES_B ],
+				],
+			] )( 'Enter reaches every visible point when %s', async ( _, data ) => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( {
+					data,
+					defaultHiddenSeries: [ 'Series A' ],
+					chartId: 'activation-hidden-first',
+					onDatumActivate,
+				} );
+
+				screen.getByRole( 'application', { name: /line chart/i } ).focus();
+				await user.keyboard( '{ArrowRight}{ArrowRight}{Enter}' );
+
+				expect( onDatumActivate ).toHaveBeenCalledWith( {
+					datum: SERIES_B.data[ 1 ],
+					index: 1,
+					key: 'Series B',
+				} );
+			} );
+
 			test( 'Enter with no point selected activates nothing', async () => {
 				const user = userEvent.setup();
 				const onDatumActivate = jest.fn();
@@ -1670,6 +1697,80 @@ describe( 'LineChart', () => {
 			} );
 		} );
 
+		describe( 'Keyboard stops by date', () => {
+			const point = ( day: number, value: number | null ) => ( {
+				date: new Date( `2024-01-0${ day }` ),
+				value,
+			} );
+			const rowsTooltip = ( { tooltipData }: RenderTooltipParams< DataPointDate > ) => (
+				<div data-testid="rows-tooltip">
+					{ Object.values( tooltipData?.datumByKey ?? {} )
+						.map( ( { key, datum } ) => `${ key }=${ datum.value }` )
+						.sort()
+						.join( ';' ) }
+				</div>
+			);
+			const renderRows = ( data: SeriesData[], props = {} ) => {
+				renderWithTheme( { data, withTooltips: true, renderTooltip: rowsTooltip, ...props } );
+				screen.getByRole( 'application', { name: /line chart/i } ).focus();
+			};
+
+			it( 'stops at every date any series has and reads each series there', async () => {
+				const user = userEvent.setup();
+				renderRows( [
+					{ label: 'A', data: [ point( 1, 1 ), point( 2, 2 ), point( 3, 3 ) ] },
+					{ label: 'B', data: [ point( 2, 20 ), point( 4, 40 ) ] },
+				] );
+
+				const expected = [
+					{ text: 'A=1', stop: 0 },
+					{ text: 'A=2;B=20', stop: 1 },
+					{ text: 'A=3', stop: 2 },
+					{ text: 'B=40', stop: 3 },
+					{ text: 'B=40', stop: 3 },
+				];
+				for ( const { text, stop } of expected ) {
+					await user.keyboard( '{ArrowRight}' );
+					await waitFor( () => {
+						expect( screen.getByTestId( `chart-tooltip-${ stop }` ) ).toBeInTheDocument();
+						expect( screen.getByTestId( 'rows-tooltip' ) ).toHaveTextContent(
+							new RegExp( `^${ text }$` )
+						);
+					} );
+				}
+			} );
+
+			it( 'keeps a null point at the selected date', async () => {
+				const user = userEvent.setup();
+				renderRows( [
+					{ label: 'A', data: [ point( 1, 1 ), point( 2, 2 ) ] },
+					{ label: 'B', data: [ point( 1, null ), point( 2, 20 ) ] },
+				] );
+
+				await user.keyboard( '{ArrowRight}' );
+				await expect( screen.findByTestId( 'rows-tooltip' ) ).resolves.toHaveTextContent(
+					/^A=1;B=null$/
+				);
+			} );
+
+			it( 'activates the first visible series with a point at the selected date', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				const seriesB = { label: 'Series B', data: [ point( 1, 10 ), point( 2, 20 ) ] };
+				renderRows( [ { label: 'Series A', data: [ point( 2, 2 ) ] }, seriesB ], {
+					onDatumActivate,
+				} );
+
+				await user.keyboard( '{ArrowRight}{Enter}' );
+
+				expect( onDatumActivate ).toHaveBeenCalledWith( {
+					key: 'Series B',
+					index: 0,
+					datum: seriesB.data[ 0 ],
+				} );
+			} );
+		} );
+
 		describe( 'Arrow Key Navigation', () => {
 			test.each( [ 'auto', 'below-axis' ] as const )(
 				'right arrow key navigates with %s tooltips',
@@ -1859,6 +1960,144 @@ describe( 'LineChart', () => {
 			expect( legendItem ).toHaveAttribute( 'aria-pressed', 'false' );
 		} );
 
+		it.each( [ 'Series A', 'Series B' ] )(
+			'leaves %s out of the keyboard tooltip once it is hidden',
+			async hiddenLabel => {
+				const user = userEvent.setup();
+				const visibleLabel = hiddenLabel === 'Series A' ? 'Series B' : 'Series A';
+				const renderTooltip = jest.fn( renderDefaultTooltip );
+
+				render(
+					<GlobalChartsProvider>
+						<LineChartUnresponsive
+							width={ 500 }
+							height={ 300 }
+							data={ [
+								defaultProps.data[ 0 ],
+								{
+									label: 'Series B',
+									data: [
+										{ date: new Date( '2024-01-01' ), value: 15 },
+										{ date: new Date( '2024-01-02' ), value: 25 },
+									],
+								},
+							] }
+							withGradientFill={ false }
+							showLegend={ true }
+							legend={ { interactive: true } }
+							renderTooltip={ renderTooltip }
+							chartId={ `test-keyboard-tooltip-hidden-${ hiddenLabel }` }
+						/>
+					</GlobalChartsProvider>
+				);
+
+				await user.click( screen.getByRole( 'button', { name: new RegExp( hiddenLabel ) } ) );
+				screen.getByRole( 'application', { name: /line chart/i } ).focus();
+				await user.keyboard( '{ArrowRight}' );
+
+				const tooltip = await screen.findByTestId( 'line-chart-tooltip-content' );
+				expect( tooltip ).toHaveTextContent( visibleLabel );
+				expect( tooltip ).not.toHaveTextContent( hiddenLabel );
+				expect( renderTooltip ).toHaveBeenLastCalledWith(
+					expect.objectContaining( {
+						tooltipData: expect.objectContaining( {
+							nearestDatum: expect.objectContaining( { key: visibleLabel } ),
+						} ),
+					} )
+				);
+			}
+		);
+
+		it( 'does not leave a series hidden mid-navigation in the keyboard tooltip', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<GlobalChartsProvider>
+					<LineChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						data={ [
+							defaultProps.data[ 0 ],
+							{
+								label: 'Series B',
+								data: [
+									{ date: new Date( '2024-01-01' ), value: 15 },
+									{ date: new Date( '2024-01-02' ), value: 25 },
+								],
+							},
+						] }
+						withGradientFill={ false }
+						showLegend={ true }
+						legend={ { interactive: true } }
+						chartId="test-keyboard-tooltip-hide-mid-navigation"
+					/>
+				</GlobalChartsProvider>
+			);
+
+			screen.getByRole( 'application', { name: /line chart/i } ).focus();
+			await user.keyboard( '{ArrowRight}' );
+			await expect(
+				screen.findByTestId( 'line-chart-tooltip-content' )
+			).resolves.toHaveTextContent( 'Series A' );
+
+			await user.click( screen.getByRole( 'button', { name: /Series A/ } ) );
+
+			await waitFor( () =>
+				expect( screen.queryByTestId( 'line-chart-tooltip-content' ) ).not.toBeInTheDocument()
+			);
+		} );
+
+		it( 'drops a series hidden programmatically from an open keyboard tooltip', async () => {
+			const user = userEvent.setup();
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<LineChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						withGradientFill={ false }
+						chartId="test-keyboard-tooltip-programmatic-hide"
+						data={ [
+							{
+								label: 'Series A',
+								data: [
+									{ date: new Date( '2024-01-01' ), value: 10 },
+									{ date: new Date( '2024-01-02' ), value: 20 },
+									{ date: new Date( '2024-01-03' ), value: 30 },
+								],
+							},
+							{
+								label: 'Series B',
+								data: [
+									{ date: new Date( '2024-01-01' ), value: 15 },
+									{ date: new Date( '2024-01-02' ), value: 25 },
+								],
+							},
+						] }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			screen.getByRole( 'application', { name: /line chart/i } ).focus();
+			await user.keyboard( '{ArrowRight}{ArrowRight}' );
+			await expect(
+				screen.findByTestId( 'line-chart-tooltip-content' )
+			).resolves.toHaveTextContent( 'Series A' );
+
+			act( () => {
+				context.toggleSeriesVisibility( 'test-keyboard-tooltip-programmatic-hide', 'Series A' );
+			} );
+
+			await waitFor( () => expect( screen.queryByText( 'Series A:' ) ).not.toBeInTheDocument() );
+			expect( screen.getByTestId( 'line-chart-tooltip-content' ) ).toHaveTextContent( 'Series B' );
+		} );
+
 		it( 'does not filter series when legendInteractive is false', () => {
 			render(
 				<GlobalChartsProvider>

package/src/charts/pie-chart/pie-chart.tsx

@@ -31,10 +31,10 @@ import { pickLabelTextColor, resolveLabelRoles } from '../private/label-text-col
 import {
 	orderArcsForNavigation,
 	PieSelectionOutput,
-	SelectedSegmentRing,
 	usePieKeyboardNavigation,
 } from '../private/pie-keyboard-navigation';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation/';
+import { SelectedRing } from '../private/selected-ring/selected-ring';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
 import { withResponsive, ResponsiveConfig } from '../private/with-responsive';
 import styles from './pie-chart.module.scss';
@@ -503,7 +503,12 @@ const PieChartInternal = ( {
 								{ /* Unmasked so the entry wipe cannot hide the focus indicator. */ }
 								{ selectedArc && (
 									<Group top={ centerY } left={ centerX }>
-										<SelectedSegmentRing chartId={ chartId } d={ path( selectedArc ) || '' } />
+										<SelectedRing
+											chartId={ chartId }
+											d={ path( selectedArc ) || '' }
+											side="inside"
+											testId="pie-selected-ring"
+										/>
 									</Group>
 								) }
 								{ ! allSegmentsHidden && (

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -26,10 +26,10 @@ import { ChartLayout } from '../private/chart-layout';
 import {
 	orderArcsForNavigation,
 	PieSelectionOutput,
-	SelectedSegmentRing,
 	usePieKeyboardNavigation,
 } from '../private/pie-keyboard-navigation';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation';
+import { SelectedRing } from '../private/selected-ring/selected-ring';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
 import { withResponsive } from '../private/with-responsive';
 import styles from './pie-semi-circle-chart.module.scss';
@@ -429,7 +429,12 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 								{ /* Unmasked so the entry wipe cannot hide the focus indicator. */ }
 								{ selectedArc && (
 									<Group top={ height } left={ width / 2 }>
-										<SelectedSegmentRing chartId={ chartId } d={ path( selectedArc ) || '' } />
+										<SelectedRing
+											chartId={ chartId }
+											d={ path( selectedArc ) || '' }
+											side="inside"
+											testId="pie-selected-ring"
+										/>
 									</Group>
 								) }
 								{ ! allSegmentsHidden && (

package/src/charts/private/pie-keyboard-navigation/index.ts

@@ -1,4 +1,3 @@
 export { orderArcsForNavigation } from './order-arcs-for-navigation';
 export { PieSelectionOutput } from './pie-selection-output';
-export { SelectedSegmentRing } from './selected-segment-ring';
 export { usePieKeyboardNavigation } from './use-pie-keyboard-navigation';

package/src/charts/private/{pie-keyboard-navigation/pie-keyboard-navigation.module.scss → selected-ring/selected-ring.module.scss}

@@ -1,16 +1,21 @@
-// The clip to the segment removes the outer half of each stroke,
-// so widths are doubled.
-.selected-ring__contrast,
-.selected-ring__focus {
+// The clip removes one half of each stroke, so widths are doubled.
+.selected-ring__far,
+.selected-ring__edge {
 	fill: none;
 }
 
+.selected-ring__far {
+	stroke-width: calc(4 * var(--wpds-border-width-focus));
+}
+
+.selected-ring__edge {
+	stroke-width: calc(2 * var(--wpds-border-width-focus));
+}
+
 .selected-ring__contrast {
 	stroke: var(--a8c-charts-color-background, #fff);
-	stroke-width: calc(4 * var(--wpds-border-width-focus));
 }
 
 .selected-ring__focus {
 	stroke: var(--wpds-color-stroke-focus);
-	stroke-width: calc(2 * var(--wpds-border-width-focus));
 }

package/src/charts/private/selected-ring/selected-ring.tsx

@@ -0,0 +1,73 @@
+import clsx from 'clsx';
+import styles from './selected-ring.module.scss';
+
+type Tone = 'contrast' | 'focus';
+
+/** Which side of the shape's edge the ring is drawn on. */
+export type SelectedRingSide = 'inside' | 'outside';
+
+interface SelectedRingProps {
+	/** The chart's id, which keeps the clip path unique on a page with several charts. */
+	chartId: string;
+	/** The selected shape's path. */
+	d: string;
+	/** `inside` keeps the ring clear of the SVG edge; `outside` leaves the shape's fill uncovered. */
+	side: SelectedRingSide;
+	testId?: string;
+}
+
+// The tone at the edge is drawn last, over the wider tone beyond it.
+const TONES: Record< SelectedRingSide, [ far: Tone, edge: Tone ] > = {
+	inside: [ 'contrast', 'focus' ],
+	outside: [ 'focus', 'contrast' ],
+};
+
+const EVERYWHERE = 'M-1e6 -1e6H1e6V1e6H-1e6Z';
+
+/**
+ * Encodes `value` for an SVG id, losslessly so distinct chart ids never share a clip path.
+ *
+ * @param value - Any string.
+ * @return `value` with each character outside `[A-Za-z0-9-]` written as `_<hex code point>_`.
+ */
+export const toSvgId = ( value: string ) =>
+	Array.from( value, character =>
+		/[A-Za-z0-9-]/.test( character )
+			? character
+			: `_${ character.codePointAt( 0 )?.toString( 16 ) }_`
+	).join( '' );
+
+/**
+ * Marks a selected shape with a focus-colored ring and a contrast ring, so it reads against any fill.
+ *
+ * @param {SelectedRingProps} props - Component props
+ * @return {JSX.Element} The ring
+ */
+export const SelectedRing = ( { chartId, d, side, testId }: SelectedRingProps ) => {
+	const clipId = `selected-ring-clip-${ toSvgId( chartId ) }`;
+	const clipPath = `url(#${ clipId })`;
+	const [ far, edge ] = TONES[ side ];
+
+	return (
+		<g pointerEvents="none" aria-hidden="true">
+			<clipPath id={ clipId }>
+				{ side === 'inside' ? (
+					<path d={ d } />
+				) : (
+					<path d={ `${ EVERYWHERE } ${ d }` } clipRule="evenodd" />
+				) }
+			</clipPath>
+			<path
+				d={ d }
+				clipPath={ clipPath }
+				className={ clsx( styles[ 'selected-ring__far' ], styles[ `selected-ring__${ far }` ] ) }
+			/>
+			<path
+				d={ d }
+				clipPath={ clipPath }
+				className={ clsx( styles[ 'selected-ring__edge' ], styles[ `selected-ring__${ edge }` ] ) }
+				data-testid={ testId }
+			/>
+		</g>
+	);
+};

package/src/charts/private/{pie-keyboard-navigation/test/selected-segment-ring.test.ts → selected-ring/test/selected-ring.test.ts}

@@ -1,4 +1,4 @@
-import { toSvgId } from '../selected-segment-ring';
+import { toSvgId } from '../selected-ring';
 
 describe( 'toSvgId', () => {
 	it.each( [

package/src/components/legend/hooks/test/use-chart-legend-items.test.tsx

@@ -421,6 +421,26 @@ describe( 'useChartLegendItems', () => {
 			expect( result.current[ 2 ].color ).toBe( result.current[ 0 ].color );
 		} );
 
+		test( 'colors each swatch, comparison items included, from seriesColors by series index', () => {
+			const seriesColors = [ '#111111', '#222222', '#333333', '#444444' ];
+			const { result } = renderHook(
+				() =>
+					useChartLegendItems( twoMetricData, {
+						collapseGroups: true,
+						comparisonSeriesItems: perMetricLabel,
+						seriesColors,
+					} ),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.color ) ).toEqual( [
+				'#111111',
+				'#333333',
+				'#222222',
+				'#444444',
+			] );
+		} );
+
 		test( 'adds nothing when no series is a comparison', () => {
 			const { result } = renderHook(
 				() => useChartLegendItems( [ comparisonData[ 0 ] ], { comparisonItem: true } ),

package/src/components/legend/hooks/use-chart-legend-items.ts

@@ -41,6 +41,25 @@ export interface ChartLegendOptions {
 	comparisonItem?: SeriesChartLegendConfig[ 'comparisonItem' ];
 	/** One static item per comparison series instead; see `SeriesChartLegendConfig`. */
 	comparisonSeriesItems?: SeriesChartLegendConfig[ 'comparisonSeriesItems' ];
+	/** Each series' swatch color, by index, in place of its series color. */
+	seriesColors?: string[];
+}
+
+/**
+ * Wraps `getElementStyles` so a swatch takes the color given for its series.
+ * @param getElementStyles - Function to get element styles
+ * @param seriesColors     - Each series' swatch color, by index
+ * @return Element styles with the given color
+ */
+function withSeriesColors(
+	getElementStyles: ( params: GetElementStylesParams ) => ElementStyles,
+	seriesColors: string[]
+): ( params: GetElementStylesParams ) => ElementStyles {
+	return params => {
+		const styles = getElementStyles( params );
+
+		return { ...styles, color: seriesColors[ params.index ] ?? styles.color };
+	};
 }
 
 /**
@@ -386,9 +405,10 @@ export function useChartLegendItems<
 		collapseGroups = false,
 		comparisonItem = false,
 		comparisonSeriesItems,
+		seriesColors,
 		renderGlyph,
 	} = options;
-	const { getElementStyles } = useGlobalChartsContext();
+	const { getElementStyles: getSeriesStyles } = useGlobalChartsContext();
 
 	return useMemo( () => {
 		if ( ! data || ! Array.isArray( data ) || data.length === 0 ) {
@@ -398,6 +418,9 @@ export function useChartLegendItems<
 		// Handle SeriesData (multiple series with data points)
 		if ( 'data' in data[ 0 ] ) {
 			const seriesData = data as SeriesData[];
+			const getElementStyles = seriesColors
+				? withSeriesColors( getSeriesStyles, seriesColors )
+				: getSeriesStyles;
 			const items = processSeriesData(
 				seriesData,
 				getElementStyles,
@@ -440,7 +463,7 @@ export function useChartLegendItems<
 		// Handle DataPointDate or DataPointPercentageCalculated (single data points)
 		return processPointData(
 			data as ( DataPointDate | DataPointPercentageCalculated )[],
-			getElementStyles,
+			getSeriesStyles,
 			showValues,
 			legendValueDisplay,
 			withGlyph,
@@ -450,7 +473,7 @@ export function useChartLegendItems<
 		);
 	}, [
 		data,
-		getElementStyles,
+		getSeriesStyles,
 		showValues,
 		legendValueDisplay,
 		withGlyph,
@@ -458,6 +481,7 @@ export function useChartLegendItems<
 		collapseGroups,
 		comparisonItem,
 		comparisonSeriesItems,
+		seriesColors,
 		renderGlyph,
 		legendShape,
 	] );

package/src/components/tooltip/private/at-nearest-date.ts

@@ -0,0 +1,49 @@
+import type { AxisScale } from '@visx/axis';
+import type { DataRegistryEntry, TooltipContextType } from '@visx/xychart';
+
+type TooltipData< Datum extends object > = TooltipContextType< Datum >[ 'tooltipData' ];
+
+type Registry< Datum extends object > = {
+	entries: () => DataRegistryEntry< AxisScale, AxisScale, Datum >[];
+};
+
+const timeOf = ( datum: object ): number | undefined =>
+	( datum as { date?: Date } ).date?.getTime();
+
+/**
+ * Lists every registered series at the nearest datum's date, each with its own point there.
+ *
+ * The pointer hands each series its own nearest point, which for a series that skips that date, or that the pointer sits nearer another date of, is a neighbor's.
+ *
+ * @param tooltipData - The tooltip data visx collected.
+ * @param registry    - The chart's data registry.
+ * @return The tooltip data, unchanged when the nearest datum has no date.
+ */
+export const atNearestDate = < Datum extends object >(
+	tooltipData: TooltipData< Datum >,
+	registry: Registry< Datum > | undefined
+): TooltipData< Datum > => {
+	const nearest = tooltipData?.nearestDatum?.datum;
+	const time = nearest ? timeOf( nearest ) : undefined;
+
+	if ( ! tooltipData || time === undefined ) {
+		return tooltipData;
+	}
+
+	const datumByKey: NonNullable< TooltipData< Datum > >[ 'datumByKey' ] = {};
+	for ( const { key, data } of registry?.entries() ?? [] ) {
+		const index = data.findIndex( datum => timeOf( datum ) === time );
+		if ( index !== -1 ) {
+			datumByKey[ key ] = { key, index, datum: data[ index ] };
+		}
+	}
+
+	// Stacked series register points without a date, so their own nearest point is kept when it is at that date.
+	for ( const [ key, entry ] of Object.entries( tooltipData.datumByKey ) ) {
+		if ( ! datumByKey[ key ] && timeOf( entry.datum ) === time ) {
+			datumByKey[ key ] = entry;
+		}
+	}
+
+	return { ...tooltipData, datumByKey };
+};