@automattic/charts 1.7.0 → 1.8.1

package/src/charts/bar-chart/private/test/comparison-bars-geometry.test.ts

@@ -0,0 +1,47 @@
+import { computeComparisonRect, getValueScaleBaseline } from '../comparison-bars-geometry';
+
+describe( 'getValueScaleBaseline', () => {
+	it( 'clamps to the bottom (range max) when 0 is below the domain (vertical, descending range)', () => {
+		// vertical linear scale: range [200, 0] (bottom -> top), domain [10, 100] (zero excluded)
+		const scale = ( ( v: number ) => 200 - ( ( v - 10 ) / 90 ) * 200 ) as never;
+		( scale as { range: () => number[] } ).range = () => [ 200, 0 ];
+		// scale(0) = 200 - (-10/90)*200 ≈ 222 -> clamped to 200
+		expect( getValueScaleBaseline( scale ) ).toBe( 200 );
+	} );
+
+	it( 'clamps to the end (range max) when 0 is outside an ascending range scale', () => {
+		// horizontal linear scale: range [0, 200], domain [-100, -10] (zero excluded)
+		const scale = ( ( v: number ) => ( ( v + 100 ) / 90 ) * 200 ) as never;
+		( scale as { range: () => number[] } ).range = () => [ 0, 200 ];
+		// scale(0) = (100/90)*200 ≈ 222 -> clamped to 200
+		expect( getValueScaleBaseline( scale ) ).toBe( 200 );
+	} );
+} );
+
+describe( 'computeComparisonRect', () => {
+	const base = {
+		bandPosition: 100,
+		slotOffset: 10,
+		slotThickness: 40,
+		valuePosition: 50,
+		baseline: 200,
+		widthFactor: 1.5,
+	};
+
+	it( 'centers a 150% wide shadow on the primary slot (vertical)', () => {
+		const r = computeComparisonRect( { ...base, horizontal: false } );
+		// slotStart=110, center=110+20=130, shadowThickness=60, shadowStart=130-30=100
+		expect( r ).toEqual( { x: 100, y: 50, width: 60, height: 150 } );
+	} );
+
+	it( 'centers a 150% tall shadow on the primary slot (horizontal)', () => {
+		const r = computeComparisonRect( {
+			...base,
+			horizontal: true,
+			valuePosition: 150,
+			baseline: 0,
+		} );
+		// slotStart=110, center=130, shadowThickness=60, shadowStart=100
+		expect( r ).toEqual( { x: 0, y: 100, width: 150, height: 60 } );
+	} );
+} );

package/src/charts/bar-chart/private/test/comparison-bars.test.tsx

@@ -0,0 +1,183 @@
+import { render, screen } from '@testing-library/react';
+import { scaleBand, scaleLinear } from '@visx/scale';
+import { DataContext } from '@visx/xychart';
+import { ComparisonBars } from '../comparison-bars';
+import type { DataPointDate, SeriesData } from '../../../../types';
+import type { ComparisonSeriesEntry } from '../comparison-bars';
+
+// Build the band scale over two categories (matches how BarGroup sets it up)
+const categories = [ 'Jan', 'Feb' ];
+const xScale = scaleBand( {
+	domain: categories,
+	range: [ 0, 200 ],
+	padding: 0.1,
+} );
+
+// Simple linear value scale: domain 0..100 -> range 200..0 (SVG coords, descending)
+const yScale = scaleLinear( { domain: [ 0, 100 ], range: [ 200, 0 ] } );
+
+// The primaryKeys in this test
+const primaryKeys = [ 'current' ];
+const groupPadding = 0.1;
+
+// Build the same groupScale so tests can compute expected width
+const groupScale = scaleBand( {
+	domain: primaryKeys,
+	range: [ 0, xScale.bandwidth() ],
+	padding: groupPadding,
+} );
+
+// Minimal DataContext value
+const dataContextValue = {
+	xScale: xScale as never,
+	yScale: yScale as never,
+	horizontal: false,
+	// Other DataContext fields the component doesn't use
+	width: 200,
+	height: 200,
+	margin: { top: 0, right: 0, bottom: 0, left: 0 },
+	dataRegistry: {} as never,
+	registerData: () => undefined,
+	unregisterData: () => undefined,
+	setDimensions: () => undefined,
+	innerWidth: 200,
+	innerHeight: 200,
+	theme: {} as never,
+	colorScale: {} as never,
+};
+
+const seriesData: SeriesData = {
+	label: 'Comparison',
+	data: [
+		{ label: 'Jan', value: 40 } as DataPointDate,
+		{ label: 'Feb', value: 70 } as DataPointDate,
+	] as DataPointDate[],
+	options: { type: 'comparison' },
+};
+
+const comparisonEntries: ComparisonSeriesEntry[] = [
+	{ series: seriesData, index: 0, primaryKey: 'current', primaryIndex: 0 },
+];
+
+const getElementStyles = () => ( {
+	color: '#f00',
+	barStyles: { widthFactor: 1.5, opacity: 0.5 },
+	lineStyles: {} as never,
+	glyph: undefined as never,
+	shapeStyles: {} as never,
+} );
+
+const resolveFill = () => '#f00';
+
+const xAccessor = ( d: DataPointDate ) => d.label;
+const yAccessor = ( d: DataPointDate ) => d.value ?? undefined;
+
+describe( 'ComparisonBars', () => {
+	it( 'renders two shadow rects for two data points', () => {
+		render(
+			<svg>
+				<DataContext.Provider value={ dataContextValue }>
+					<ComparisonBars
+						comparisonEntries={ comparisonEntries }
+						primaryKeys={ primaryKeys }
+						groupPadding={ groupPadding }
+						horizontal={ false }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						getElementStyles={ getElementStyles }
+						resolveFill={ resolveFill }
+					/>
+				</DataContext.Provider>
+			</svg>
+		);
+
+		const rects = screen.getAllByTestId( /^bar-chart-comparison-0-/ );
+		expect( rects ).toHaveLength( 2 );
+		expect( rects[ 0 ] ).toHaveAttribute( 'fill', '#f00' );
+		expect( rects[ 0 ] ).toHaveAttribute( 'opacity', '0.5' );
+		// width == widthFactor (1.5) * groupScale.bandwidth()
+		expect( Number( rects[ 0 ].getAttribute( 'width' ) ) ).toBeCloseTo(
+			1.5 * groupScale.bandwidth()
+		);
+	} );
+
+	it( 'wraps rects in a g with correct class and pointerEvents', () => {
+		render(
+			<svg>
+				<DataContext.Provider value={ dataContextValue }>
+					<ComparisonBars
+						comparisonEntries={ comparisonEntries }
+						primaryKeys={ primaryKeys }
+						groupPadding={ groupPadding }
+						horizontal={ false }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						getElementStyles={ getElementStyles }
+						resolveFill={ resolveFill }
+					/>
+				</DataContext.Provider>
+			</svg>
+		);
+
+		const g = screen.getByTestId( 'bar-chart-comparison-bars' );
+		expect( g ).toHaveClass( 'bar-chart__comparison-bars', { exact: true } );
+		expect( g ).toHaveAttribute( 'pointer-events', 'none' );
+	} );
+
+	it( 'shadow rect is horizontally centered on the primary bar slot at widthFactor × slot width', () => {
+		render(
+			<svg>
+				<DataContext.Provider value={ dataContextValue }>
+					<ComparisonBars
+						comparisonEntries={ comparisonEntries }
+						primaryKeys={ primaryKeys }
+						groupPadding={ groupPadding }
+						horizontal={ false }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						getElementStyles={ getElementStyles }
+						resolveFill={ resolveFill }
+					/>
+				</DataContext.Provider>
+			</svg>
+		);
+
+		const rects = screen.getAllByTestId( /^bar-chart-comparison-0-/ );
+		const rect = rects[ 0 ]; // 'Jan' datum
+
+		const slotThickness = groupScale.bandwidth();
+		const expectedWidth = 1.5 * slotThickness; // shadow = widthFactor × slot width
+		// Shadow x = bandStart + slotOffset + slotThickness/2 - shadowWidth/2
+		const bandStart = Number( xScale( 'Jan' ) );
+		const slotOffset = Number( groupScale( 'current' ) );
+		const expectedX = bandStart + slotOffset + slotThickness / 2 - expectedWidth / 2;
+		const expectedCenterX = expectedX + expectedWidth / 2;
+		const primarySlotCenterX = bandStart + slotOffset + slotThickness / 2;
+
+		expect( Number( rect.getAttribute( 'width' ) ) ).toBeCloseTo( expectedWidth );
+		expect( Number( rect.getAttribute( 'x' ) ) ).toBeCloseTo( expectedX );
+		// Center of shadow matches center of primary slot
+		expect( expectedCenterX ).toBeCloseTo( primarySlotCenterX );
+	} );
+
+	it( 'renders nothing when primaryKeys is empty', () => {
+		render(
+			<svg>
+				<DataContext.Provider value={ dataContextValue }>
+					<ComparisonBars
+						comparisonEntries={ comparisonEntries }
+						primaryKeys={ [] }
+						groupPadding={ groupPadding }
+						horizontal={ false }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						getElementStyles={ getElementStyles }
+						resolveFill={ resolveFill }
+					/>
+				</DataContext.Provider>
+			</svg>
+		);
+
+		expect( screen.queryByTestId( 'bar-chart-comparison-bars' ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/charts/bar-chart/private/use-bar-chart-options.ts

@@ -5,6 +5,11 @@ import type { EnhancedDataPoint } from '../../../hooks/use-zero-value-display';
 import type { DataPointDate, BaseChartProps, SeriesData } from '../../../types';
 import type { TickFormatter } from '@visx/axis';
 
+/** Outer padding of the category band scale (space at the chart edges). */
+export const BASE_BAND_PADDING = 0.2;
+/** Inner padding of the category band scale (the base gap between ticks). */
+export const BASE_BAND_PADDING_INNER = 0.1;
+
 const formatDateTick = ( timestamp: number ) => {
 	const date = new Date( timestamp );
 	return date.toLocaleDateString( undefined, {
@@ -39,8 +44,8 @@ export function useBarChartOptions(
 	const defaultOptions = useMemo( () => {
 		const bandScale = {
 			type: 'band' as const,
-			padding: 0.2,
-			paddingInner: 0.1,
+			padding: BASE_BAND_PADDING,
+			paddingInner: BASE_BAND_PADDING_INNER,
 		};
 		const linearScale = {
 			type: 'linear' as const,
@@ -97,8 +102,47 @@ export function useBarChartOptions(
 			yScale: baseYScale,
 		} = defaultOptions[ orientationKey ];
 
-		const xScale = { ...baseXScale, ...( options.xScale || {} ) };
-		const yScale = { ...baseYScale, ...( options.yScale || {} ) };
+		// When comparison series are present, visx only sees primary BarSeries and computes
+		// a too-narrow domain. Compute an explicit domain spanning all series so comparison
+		// shadows aren't clipped. Skip when the user has already provided an explicit domain.
+		let valueScaleDomainOverride: { domain?: [ number, number ] } = {};
+		const hasComparisonSeries = data.some( s => s.options?.type === 'comparison' );
+		if ( hasComparisonSeries ) {
+			const valueAxisIsY = ! horizontal;
+			const userDomain = valueAxisIsY ? options.yScale?.domain : options.xScale?.domain;
+			if ( ! userDomain ) {
+				const allValues: number[] = [];
+				data.forEach( series => {
+					series.data.forEach( d => {
+						const enhanced = d as { visualValue?: number };
+						const v =
+							enhanced.visualValue !== undefined ? enhanced.visualValue : ( d.value as number );
+						if ( typeof v === 'number' && Number.isFinite( v ) ) {
+							allValues.push( v );
+						}
+					} );
+				} );
+				if ( allValues.length > 0 ) {
+					// Keep zero in the domain so bar length stays proportional to value — a
+					// non-zero baseline would exaggerate differences between periods. Math.max
+					// keeps zero on the far side too, so charts with negative values still span 0.
+					valueScaleDomainOverride = {
+						domain: [ Math.min( 0, ...allValues ), Math.max( 0, ...allValues ) ],
+					};
+				}
+			}
+		}
+
+		const xScale = {
+			...baseXScale,
+			...( options.xScale || {} ),
+			...( horizontal ? valueScaleDomainOverride : {} ),
+		};
+		const yScale = {
+			...baseYScale,
+			...( options.yScale || {} ),
+			...( ! horizontal ? valueScaleDomainOverride : {} ),
+		};
 		const providedToolTipLabelFormatter = horizontal
 			? options.axis?.y?.tickFormat
 			: options.axis?.x?.tickFormat;
@@ -137,5 +181,5 @@ export function useBarChartOptions(
 				labelFormatter: providedToolTipLabelFormatter || defaultTooltipLabelFormatter,
 			},
 		};
-	}, [ defaultOptions, options, horizontal ] );
+	}, [ defaultOptions, options, horizontal, data ] );
 }

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

@@ -1,7 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { render, renderHook, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GlobalChartsProvider } from '../../../providers';
 import BarChart from '../bar-chart';
+import { useBarChartOptions } from '../private';
 
 // Mock useElementSize to return non-zero dimensions in jsdom so charts render
 const mockRefCallback = jest.fn();
@@ -233,6 +234,37 @@ describe( 'BarChart', () => {
 			// Check that no pattern definitions container is present
 			expect( screen.queryByTestId( 'bar-chart-patterns' ) ).not.toBeInTheDocument();
 		} );
+
+		test( 'comparison shadow reuses the primary bar pattern when patterns are enabled', () => {
+			renderWithTheme( {
+				withPatterns: true,
+				data: [
+					{
+						label: 'This period',
+						group: 'views',
+						data: [
+							{ label: 'Mon', value: 10 },
+							{ label: 'Tue', value: 20 },
+						],
+					},
+					{
+						label: 'Previous period',
+						group: 'views',
+						options: { type: 'comparison' as const },
+						data: [
+							{ label: 'Mon', value: 15 },
+							{ label: 'Tue', value: 25 },
+						],
+					},
+				],
+			} );
+
+			const shadow = screen.getAllByTestId( /^bar-chart-comparison-\d+-\d+$/ )[ 0 ];
+			const shadowFill = shadow.getAttribute( 'fill' );
+			// Shadow is filled with a pattern, not a solid color, and it references the PRIMARY
+			// series' pattern (index 0) rather than the comparison series' own index.
+			expect( shadowFill ).toMatch( /^url\(#bar-pattern-.+-0\)$/ );
+		} );
 	} );
 
 	describe( 'Keyboard Navigation Accessibility', () => {
@@ -290,6 +322,8 @@ describe( 'BarChart', () => {
 				await user.keyboard( '{ArrowRight}' );
 				expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveFocus();
 				expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( 'Series A' );
+				// The category/value row joins with a space after the colon.
+				expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( 'Jan 1: 10' );
 				expect( screen.queryByTestId( 'chart-tooltip-1' ) ).not.toBeInTheDocument();
 
 				// Second tab should focus on the second tooltip.
@@ -346,6 +380,84 @@ describe( 'BarChart', () => {
 			} );
 		} );
 
+		describe( 'Comparison tooltip', () => {
+			test( 'tooltip shows both the primary and comparison values', async () => {
+				const user = userEvent.setup();
+				renderWithTheme( {
+					withTooltips: true,
+					data: [
+						{
+							label: 'This period',
+							group: 'views',
+							data: [
+								{ date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' },
+								{ date: new Date( '2024-01-02' ), value: 20, label: 'Jan 2' },
+							],
+						},
+						{
+							label: 'Previous period',
+							group: 'views',
+							options: { type: 'comparison' as const },
+							data: [
+								{ date: new Date( '2024-01-01' ), value: 15, label: 'Jan 1' },
+								{ date: new Date( '2024-01-02' ), value: 25, label: 'Jan 2' },
+							],
+						},
+					],
+				} );
+
+				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				chart.focus();
+
+				await user.keyboard( '{ArrowRight}' );
+				const tooltip = screen.getByTestId( 'chart-tooltip-0' );
+				// Both periods are shown, each as "label: value" with a space after the colon.
+				expect( tooltip ).toHaveTextContent( 'This period: 10' );
+				expect( tooltip ).toHaveTextContent( 'Previous period: 15' );
+			} );
+
+			test( 'keyboard navigation past the first slot stays on the primary bar, not the comparison series', async () => {
+				const user = userEvent.setup();
+				renderWithTheme( {
+					withTooltips: true,
+					data: [
+						{
+							label: 'This period',
+							group: 'views',
+							data: [
+								{ label: 'Mon', value: 10 },
+								{ label: 'Tue', value: 20 },
+							],
+						},
+						{
+							label: 'Previous period',
+							group: 'views',
+							options: { type: 'comparison' as const },
+							data: [
+								{ label: 'Mon', value: 15 },
+								{ label: 'Tue', value: 25 },
+							],
+						},
+					],
+				} );
+
+				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				chart.focus();
+
+				// Slot 0 is the first primary bar (Mon); slot 1 must be the SECOND primary
+				// bar (Tue) — not the comparison series' first bar. The keyboard index space
+				// counts only primary bars, so the tooltip must too.
+				await user.keyboard( '{ArrowRight}' );
+				await user.keyboard( '{ArrowRight}' );
+				const tooltip = screen.getByTestId( 'chart-tooltip-1' );
+				expect( tooltip ).toHaveTextContent( 'Tue' );
+				expect( tooltip ).toHaveTextContent( 'This period' );
+				expect( tooltip ).toHaveTextContent( '20' );
+				expect( tooltip ).toHaveTextContent( 'Previous period' );
+				expect( tooltip ).toHaveTextContent( '25' );
+			} );
+		} );
+
 		describe( 'Tab Key Navigation', () => {
 			test( 'tab key exits navigation when reaching end of data points', async () => {
 				const user = userEvent.setup();
@@ -754,6 +866,222 @@ describe( 'BarChart', () => {
 		} );
 	} );
 
+	describe( 'Comparison Series', () => {
+		it( 'renders a translucent shadow behind the primary bar for a comparison series', () => {
+			const data = [
+				{
+					label: 'This year',
+					group: 'views',
+					data: [
+						{ label: 'Jan', value: 100 },
+						{ label: 'Feb', value: 120 },
+					],
+				},
+				{
+					label: 'Last year',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [
+						{ label: 'Jan', value: 80 },
+						{ label: 'Feb', value: 140 },
+					],
+				},
+			];
+			render( <BarChart data={ data } width={ 400 } height={ 300 } /> );
+
+			// two comparison shadow rects (one per data point)
+			// Match individual rect testids like bar-chart-comparison-1-0 (not the group wrapper)
+			const shadows = screen.getAllByTestId( /^bar-chart-comparison-\d+-\d+$/ );
+			expect( shadows ).toHaveLength( 2 );
+			expect( shadows[ 0 ] ).toHaveAttribute( 'opacity', '0.5' );
+
+			// primary bars still render for the single primary series (visx .visx-bar)
+			// eslint-disable-next-line testing-library/no-node-access
+			const bars = document.querySelectorAll( '.visx-bar' );
+			expect( bars.length ).toBeGreaterThanOrEqual( 2 );
+		} );
+
+		it( 'hides the comparison shadow group from assistive technology', () => {
+			const data = [
+				{
+					label: 'This year',
+					group: 'views',
+					data: [ { label: 'Jan', value: 100 } ],
+				},
+				{
+					label: 'Last year',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Jan', value: 80 } ],
+				},
+			];
+			render( <BarChart data={ data } width={ 400 } height={ 300 } /> );
+
+			// The shadow is decorative: no keyboard/hover target and its value is surfaced
+			// through the tooltip, so it must not be announced as a separate element.
+			expect( screen.getByTestId( 'bar-chart-comparison-bars' ) ).toHaveAttribute(
+				'aria-hidden',
+				'true'
+			);
+		} );
+
+		it( 'renders comparison shadows in horizontal orientation', () => {
+			const data = [
+				{
+					label: 'This year',
+					group: 'views',
+					data: [
+						{ label: 'Jan', value: 100 },
+						{ label: 'Feb', value: 120 },
+					],
+				},
+				{
+					label: 'Last year',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [
+						{ label: 'Jan', value: 80 },
+						{ label: 'Feb', value: 140 },
+					],
+				},
+			];
+			render( <BarChart data={ data } orientation="horizontal" width={ 400 } height={ 300 } /> );
+
+			const shadows = screen.getAllByTestId( /^bar-chart-comparison-\d+-\d+$/ );
+			expect( shadows ).toHaveLength( 2 );
+			expect( shadows[ 0 ] ).toHaveAttribute( 'opacity', '0.5' );
+		} );
+
+		it( 'expands value-axis domain to include comparison values exceeding the primary max', () => {
+			// Comparison value 150 exceeds primary max 100.
+			// Without domain expansion the value-axis scale config has no explicit domain,
+			// so visx derives it from primary BarSeries only (max=100).
+			// With the fix, an explicit domain [min,150] is set on the value-axis scale config.
+			const data = [
+				{
+					label: 'This year',
+					group: 'views',
+					data: [ { label: 'Jan', value: 100 } ],
+				},
+				{
+					label: 'Last year',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Jan', value: 150 } ],
+				},
+			];
+
+			const { result } = renderHook( () => useBarChartOptions( data, false, {} ) );
+			const yScale = result.current.yScale as { domain?: number[] };
+			// domain must be set explicitly and its max must be >= 150
+			expect( yScale.domain ).toBeDefined();
+			expect( ( yScale.domain as number[] )[ 1 ] ).toBeGreaterThanOrEqual( 150 );
+		} );
+
+		it( 'keeps the value-axis baseline at zero so comparison bars encode magnitude truthfully', () => {
+			// All values are well above zero; the domain must still start at 0 so a bar's
+			// length stays proportional to its value (a non-zero baseline exaggerates differences).
+			const data = [
+				{
+					label: 'This period',
+					group: 'views',
+					data: [ { label: 'Mon', value: 420 } ],
+				},
+				{
+					label: 'Previous period',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Mon', value: 510 } ],
+				},
+			];
+
+			const { result } = renderHook( () => useBarChartOptions( data, false, {} ) );
+			const yScale = result.current.yScale as { domain?: number[] };
+			expect( yScale.domain ).toBeDefined();
+			expect( ( yScale.domain as number[] )[ 0 ] ).toBe( 0 );
+		} );
+
+		it( 'zero-bases the value-axis domain in horizontal comparison charts', () => {
+			const data = [
+				{
+					label: 'This period',
+					group: 'views',
+					data: [ { label: 'Mon', value: 420 } ],
+				},
+				{
+					label: 'Previous period',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Mon', value: 510 } ],
+				},
+			];
+
+			// In horizontal charts the value axis is x.
+			const { result } = renderHook( () => useBarChartOptions( data, true, {} ) );
+			const xScale = result.current.xScale as { domain?: number[] };
+			expect( xScale.domain ).toBeDefined();
+			expect( ( xScale.domain as number[] )[ 0 ] ).toBe( 0 );
+			expect( ( xScale.domain as number[] )[ 1 ] ).toBeGreaterThanOrEqual( 510 );
+		} );
+
+		it( 'counts only primary series for keyboard navigation when a comparison series is present', async () => {
+			const user = userEvent.setup();
+			// 2 primary + 1 comparison. totalPoints should be 2*2=4, not 3*2=6.
+			// If comparison is counted, the 5th ArrowRight would reference a phantom series
+			// and could throw or show an undefined tooltip key.
+			const data = [
+				{
+					label: 'Series A',
+					group: 'g',
+					data: [
+						{ label: 'Jan', value: 10 },
+						{ label: 'Feb', value: 20 },
+					],
+				},
+				{
+					label: 'Series B',
+					group: 'g2',
+					data: [
+						{ label: 'Jan', value: 15 },
+						{ label: 'Feb', value: 25 },
+					],
+				},
+				{
+					label: 'Last year',
+					group: 'g',
+					options: { type: 'comparison' as const },
+					data: [
+						{ label: 'Jan', value: 8 },
+						{ label: 'Feb', value: 18 },
+					],
+				},
+			];
+			render(
+				<GlobalChartsProvider>
+					<BarChart data={ data } width={ 400 } height={ 300 } withTooltips />
+				</GlobalChartsProvider>
+			);
+
+			const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+			chart.focus();
+
+			// Navigate through all 4 primary slots (2 series × 2 data points)
+			for ( let i = 0; i < 4; i++ ) {
+				await user.keyboard( '{ArrowRight}' );
+			}
+
+			// If totalPoints was 6 (counted comparison), tooltip 4 would still show.
+			// With correct totalPoints=4, navigation wraps and tooltip 0 is shown again,
+			// not phantom slot 4 (which would reference data[2], a comparison series).
+			// Either way, there must be no crash and navigation must stay in bounds.
+			const tooltips = screen.queryAllByTestId( /^chart-tooltip-/ );
+			expect( tooltips ).toHaveLength( 1 );
+			// The visible tooltip must belong to a primary series
+			const tooltipText = tooltips[ 0 ].textContent ?? '';
+			expect( [ 'Series A', 'Series B' ].some( k => tooltipText.includes( k ) ) ).toBe( true );
+		} );
+	} );
+
 	describe( 'Interactive Legend', () => {
 		it( 'filters series when interactive legend is enabled and series is toggled', async () => {
 			const user = userEvent.setup();