@automattic/charts 3.1.1 → 4.0.0

package/src/charts/line-chart/line-chart.module.scss

@@ -21,21 +21,21 @@
 	&__annotation-label-popover {
 		background: var(--a8c-charts-color-surface);
 		color: var(--a8c-charts-color-label);
-		padding: var(--wpds-dimension-padding-sm, 8px);
+		padding: var(--wpds-dimension-padding-sm);
 	}
 
 	&__tooltip-date {
-		font-weight: var(--wpds-typography-font-weight-emphasis, 600);
-		padding-bottom: var(--wpds-dimension-padding-md, 12px);
+		font-weight: var(--wpds-typography-font-weight-emphasis);
+		padding-bottom: var(--wpds-dimension-padding-md);
 	}
 
 	&__tooltip-row {
-		padding: var(--wpds-dimension-padding-xs, 4px) 0;
+		padding: var(--wpds-dimension-padding-xs) 0;
 	}
 
 	&__tooltip-label {
-		font-weight: var(--wpds-typography-font-weight-emphasis, 600);
-		padding-right: var(--wpds-dimension-padding-lg, 16px);
+		font-weight: var(--wpds-typography-font-weight-emphasis);
+		padding-right: var(--wpds-dimension-padding-lg);
 	}
 
 	&__annotations-overlay {
@@ -64,14 +64,14 @@
 	&__annotation-label-popover {
 		min-width: 125px;
 		border: none;
-		border-radius: var(--wpds-border-radius-md, 4px);
-		font-size: var(--wpds-typography-font-size-md, 13px);
+		border-radius: var(--wpds-border-radius-md);
+		font-size: var(--wpds-typography-font-size-md);
 		box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
 		position: fixed;
 		// Without margin set, the popover has margin:auto which upsets the
 		// positioning relative to the trigger button. A gap token is appropriate
 		// because it creates a gap to the trigger button.
-		margin: var(--wpds-dimension-gap-sm, 8px);
+		margin: var(--wpds-dimension-gap-sm);
 		visibility: hidden;
 
 		&--visible {
@@ -85,7 +85,7 @@
 	}
 
 	&__annotation-label-popover-content {
-		padding: var(--wpds-dimension-padding-sm, 8px);
+		padding: var(--wpds-dimension-padding-sm);
 	}
 
 	&__annotation-label-popover-close-button {
@@ -101,14 +101,6 @@
 	}
 }
 
-:global(.visx-tooltip-glyph) {
-
-	svg {
-		width: 10px;
-		height: 10px;
-	}
-}
-
 @keyframes rise {
 
 	from {

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

@@ -24,25 +24,36 @@ import {
 import {
 	GlobalChartsProvider,
 	GlobalChartsContext,
+	useChartFormatting,
 	useChartId,
 	useChartRegistration,
 	useGlobalChartsContext,
-	useGlobalChartsTheme,
 } from '../../providers';
 import { useDefaultHiddenSeries } from '../../providers/chart-context/hooks/use-default-hidden-series';
 import { attachSubComponents } from '../../utils';
+import { getBucketInfo } from '../../utils/bucket-info';
+import { createDateFormatter } from '../../utils/date-formatting';
 import { useChartChildren } from '../private/chart-composition';
 import { ChartInstanceContext, type ChartInstanceRef } from '../private/chart-instance-context';
 import { ChartLayout } from '../private/chart-layout';
 import { DefaultGlyph } from '../private/default-glyph';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
-import { getCurveType, getFormatter, guessOptimalNumTicks } from '../private/time-axis';
+import { getCurveType } from '../private/time-axis';
+import { buildTimeAxisOptions } from '../private/time-axis-options';
 import { withResponsive } from '../private/with-responsive';
 import { useXZoom, ZoomResetButton, ZoomSelectionRect, ZoomClip } from '../private/x-zoom';
+import plotStyles from '../private/xy-plot/xy-plot.module.scss';
 import styles from './line-chart.module.scss';
 import { LineChartAnnotation, LineChartAnnotationsOverlay, LineChartGlyph } from './private';
 import type { RenderLineGlyphProps, LineChartProps, TooltipDatum } from './types';
-import type { DataPoint, DataPointDate, SeriesData, Optional } from '../../types';
+import type {
+	BucketInfo,
+	DataPoint,
+	DataPointDate,
+	SeriesData,
+	Optional,
+	TickResolution,
+} from '../../types';
 import type { RenderTooltipParams } from '../../visx/types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { TickFormatter } from '@visx/axis';
@@ -58,16 +69,52 @@ const toNumber = ( val?: number | string | null ): number | undefined => {
 	return isNaN( num ) ? undefined : num;
 };
 
+// No date-part options, which is what `Intl` defaults to a numeric date for —
+// the heading the tooltip printed with `toLocaleDateString()` before it could
+// be told a locale and a zone.
+const TOOLTIP_DATE: Intl.DateTimeFormatOptions = {};
+
+// Only the hour case adds to the plain date heading. A coarser bucket keeps the
+// day: 'month' covers any spacing from 28 days up, so dropping it would give two
+// distinct points one heading.
+const TOOLTIP_FORMAT_BY_RESOLUTION: Record<
+	Exclude< TickResolution, 'week' >,
+	Intl.DateTimeFormatOptions
+> = {
+	hour: { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric' },
+	day: TOOLTIP_DATE,
+	month: TOOLTIP_DATE,
+	year: TOOLTIP_DATE,
+};
+
+// A component rather than a call, because `renderDefaultTooltip` is a plain
+// function a consumer may pass around: the context has to be read where the
+// heading renders, not where the tooltip is built.
+const TooltipDate: FC< { date?: Date; displayResolution: Exclude< TickResolution, 'week' > } > = ( {
+	date,
+	displayResolution,
+} ) => {
+	const formatting = useChartFormatting();
+	const format = useMemo(
+		() => createDateFormatter( TOOLTIP_FORMAT_BY_RESOLUTION[ displayResolution ], formatting ),
+		[ displayResolution, formatting ]
+	);
+
+	return <>{ date ? format( date ) : null }</>;
+};
+
 /**
  * Default visx-tooltip render that prints the hovered date as a heading and
  * one row per visible series (label + formatted value), sorted descending by
  * value. Reused by AreaChart, which has the same multi-series shape.
  *
- * @param params - visx `RenderTooltipParams< DataPointDate >`.
+ * @param params - visx `RenderTooltipParams< DataPointDate >`, plus the chart's optional `bucketInfo`.
  * @return Tooltip JSX, or `null` when no datum is hovered.
  */
-export const renderDefaultTooltip = ( params: RenderTooltipParams< DataPointDate > ) => {
-	const { tooltipData } = params;
+export const renderDefaultTooltip = (
+	params: RenderTooltipParams< DataPointDate > & { bucketInfo?: BucketInfo }
+) => {
+	const { tooltipData, bucketInfo } = params;
 	const nearestDatum = tooltipData?.nearestDatum?.datum;
 	if ( ! nearestDatum ) return null;
 
@@ -81,7 +128,10 @@ export const renderDefaultTooltip = ( params: RenderTooltipParams< DataPointDate
 	return (
 		<div className={ styles[ 'line-chart__tooltip' ] }>
 			<div className={ styles[ 'line-chart__tooltip-date' ] }>
-				{ nearestDatum.date?.toLocaleDateString() }
+				<TooltipDate
+					date={ nearestDatum.date }
+					displayResolution={ bucketInfo?.displayResolution ?? 'day' }
+				/>
 			</div>
 			{ tooltipPoints.map( point => (
 				<Stack
@@ -179,6 +229,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			onPointerUp = undefined,
 			onPointerMove = undefined,
 			onPointerOut = undefined,
+			onDatumActivate = undefined,
 			zoomable = false,
 			rescaleYOnVisibilityChange = true,
 			defaultHiddenSeries,
@@ -193,10 +244,11 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 		const legendShape = legend.shape ?? 'line';
 		const legendPosition = legend.position ?? 'bottom';
 
-		const providerTheme = useGlobalChartsTheme();
+		const formatting = useChartFormatting();
 		const theme = useXYChartTheme( data );
-		// Gradient stops apply this as an SVG attribute, where CSS var() cannot resolve. useXYChartTheme has already resolved the same role inside its memo, against the chart's scope element, so read it back rather than paying another getComputedStyle on every render.
-		const resolvedBackgroundColor = theme.backgroundColor ?? providerTheme.backgroundColor;
+		// A gradient stop reads its color as a string, so it has to be resolved. Read back what
+		// `useXYChartTheme` already resolved rather than paying another getComputedStyle per render.
+		const resolvedBackgroundColor = theme.backgroundColor;
 		const chartId = useChartId( providedChartId );
 		const hiddenSeries = useDefaultHiddenSeries( chartId, defaultHiddenSeries );
 		const isSeriesVisible = useCallback(
@@ -280,7 +332,20 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			return min < max ? [ min, max ] : undefined;
 		}, [ rescaleYOnVisibilityChange, dataSorted ] );
 
-		// Use the keyboard navigation hook
+		// Keyboard navigation steps through x positions, and the grouped tooltip
+		// reads every series at that position; the first series names the point.
+		const activateSelectedPoint = useCallback(
+			( index: number ) => {
+				const series = dataSorted[ 0 ];
+				const datum = series?.data[ index ];
+
+				if ( series && datum ) {
+					onDatumActivate?.( { datum, index, key: series.label } );
+				}
+			},
+			[ dataSorted, onDatumActivate ]
+		);
+
 		const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
 			selectedIndex,
 			setSelectedIndex,
@@ -288,21 +353,22 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			setIsNavigating,
 			chartRef,
 			totalPoints: dataSorted[ 0 ]?.data.length || 0,
+			onActivate: activateSelectedPoint,
 		} );
 
 		const chartOptions = useMemo( () => {
-			const { tickResolution, tickFormat, ...xAxisOptions } = options?.axis?.x ?? {};
-			const formatter = tickFormat || getFormatter( dataSorted, tickResolution );
-
 			return {
 				axis: {
-					x: {
-						orientation: 'bottom' as const,
-						numTicks: guessOptimalNumTicks( dataSorted, width, formatter ),
-						tickFormat: formatter,
-						display: true,
-						...xAxisOptions,
-					},
+					x: buildTimeAxisOptions( {
+						dataSorted,
+						width,
+						axisOptions: options?.axis?.x,
+						scaleDomain: options?.xScale?.domain,
+						zoomDomain: zoom.domain,
+						formatting,
+						// A hidden line is unmounted, so visx scales to the rest.
+						isSeriesRendered: series => isSeriesVisible( series.label ),
+					} ),
 					y: {
 						orientation: 'left' as const,
 						numTicks: 4,
@@ -324,7 +390,18 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 					...options?.yScale,
 				},
 			};
-		}, [ options, dataSorted, width, zoom.domain, stableYDomain ] );
+		}, [ options, dataSorted, width, zoom.domain, stableYDomain, formatting, isSeriesVisible ] );
+
+		// 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 ]
+		);
 
 		const tooltipRenderGlyph = useMemo( () => {
 			return ( props: GlyphProps< DataPointDate > ) => {
@@ -396,7 +473,14 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			yAccessor: ( d: DataPointDate ) => d?.value,
 		};
 
-		// Create a custom renderTooltip that includes focus capability
+		// Augments every renderTooltip call with the chart's bucket classification,
+		// default or custom, so a heading keyed on it can't disagree with the axis.
+		const tooltipRenderer = useMemo(
+			() => ( params: RenderTooltipParams< DataPointDate > ) =>
+				renderTooltip( { ...params, bucketInfo } ),
+			[ renderTooltip, bucketInfo ]
+		);
+
 		if ( error ) {
 			return <div className={ clsx( 'line-chart', styles[ 'line-chart' ] ) }>{ error }</div>;
 		}
@@ -457,7 +541,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 								onBlur={ onChartBlur }
 							>
 								{ chartHeight > 0 && (
-									<div ref={ chartRef } style={ { position: 'relative' } }>
+									<div ref={ chartRef } className={ plotStyles[ 'xy-plot' ] }>
 										{ zoomable && zoom.domain && <ZoomResetButton onClick={ zoom.reset } /> }
 										<XYChart
 											theme={ theme }
@@ -594,7 +678,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 													snapTooltipToDatumX
 													snapTooltipToDatumY
 													showSeriesGlyphs
-													renderTooltip={ renderTooltip }
+													renderTooltip={ tooltipRenderer }
 													renderGlyph={ tooltipRenderGlyph }
 													glyphStyle={ glyphStyle }
 													showVerticalCrosshair={ withTooltipCrosshairs?.showVertical }

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

@@ -9,11 +9,13 @@ import {
 import { DataContext } from '@visx/xychart';
 import merge from 'deepmerge';
 import { useContext, useRef, useEffect, useState, useMemo } from 'react';
-import { useChartScopeElement, useGlobalChartsTheme } from '../../../providers';
-import { isSafari, resolveCssVariable } from '../../../utils';
+import { useGlobalChartsTheme } from '../../../providers';
+import { ANNOTATION_POINTERS } from '../../../providers/chart-context/private/catalog-pointers';
+import { isSafari } from '../../../utils';
 import LineChartAnnotationLabelWithPopover, {
 	POPOVER_BUTTON_SIZE,
 } from './line-chart-annotation-label-popover';
+import type { AnnotationStyles } from '../../../types';
 import type { LineChartAnnotationProps } from '../types';
 import type { LabelProps } from '@visx/annotation';
 import type { TextProps } from '@visx/text';
@@ -152,17 +154,22 @@ const LineChartAnnotation: FC< LineChartAnnotationProps > = ( {
 	renderLabelPopover,
 } ) => {
 	const providerTheme = useGlobalChartsTheme();
-	const scopeElement = useChartScopeElement();
 	const { xScale, yScale } = useContext( DataContext ) || {};
 	const labelRef = useRef< SVGGElement >( null );
 	const [ height, setHeight ] = useState< number | null >( null );
 
-	// Deep merge styles to preserve nested object properties
-	const styles = merge( providerTheme.annotationStyles ?? {}, datumStyles ?? {} );
-
-	// visx annotation parts apply these colours as SVG presentation attributes, where CSS var() cannot resolve. Resolve against the chart's scope element, never :root.
-	const resolveColor = ( value?: string ): string | undefined =>
-		value ? resolveCssVariable( value, scopeElement ) ?? value : value;
+	// Deep merge to preserve nested object properties. Pointers first, so a per-datum color wins.
+	// Memoized because the result is spread into the visx annotation parts: a fresh object every
+	// render would give each of them new props whether or not a style changed.
+	const styles = useMemo(
+		() =>
+			merge.all( [
+				ANNOTATION_POINTERS,
+				providerTheme.annotationStyles ?? {},
+				datumStyles ?? {},
+			] ) as AnnotationStyles,
+		[ providerTheme.annotationStyles, datumStyles ]
+	);
 
 	// Measure the label height once after initial render
 	useEffect( () => {
@@ -269,14 +276,8 @@ const LineChartAnnotation: FC< LineChartAnnotationProps > = ( {
 	return (
 		<g data-testid={ testId }>
 			<Annotation x={ x } y={ y } dx={ dx } dy={ dy }>
-				<Connector { ...styles?.connector } stroke={ resolveColor( styles?.connector?.stroke ) } />
-				{ subjectType === 'circle' && (
-					<CircleSubject
-						{ ...styles?.circleSubject }
-						fill={ resolveColor( styles?.circleSubject?.fill ) }
-						stroke={ resolveColor( styles?.circleSubject?.stroke ) }
-					/>
-				) }
+				<Connector { ...styles?.connector } />
+				{ subjectType === 'circle' && <CircleSubject { ...styles?.circleSubject } /> }
 				{ subjectType === 'line-vertical' && (
 					<LineSubject
 						min={ yMax }
@@ -312,8 +313,6 @@ const LineChartAnnotation: FC< LineChartAnnotationProps > = ( {
 							title={ title }
 							subtitle={ subtitle }
 							{ ...styles?.label }
-							anchorLineStroke={ resolveColor( styles?.label?.anchorLineStroke ) }
-							backgroundFill={ resolveColor( styles?.label?.backgroundFill ) }
 							{ ...labelPosition }
 							horizontalAnchor={ getHorizontalAnchor( subjectType, isFlippedHorizontally ) }
 							verticalAnchor={ getVerticalAnchor(

package/src/charts/line-chart/test/default-tooltip-formatting.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * @jest-environment <rootDir>/tests/environment-los-angeles.mjs
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { GlobalChartsProvider } from '../../../providers';
+import LineChart, { renderDefaultTooltip } from '../line-chart';
+import type { DataPointDate } from '../../../types';
+import type { RenderTooltipParams } from '../../../visx/types';
+
+const mockRefCallback = jest.fn();
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
+} ) );
+
+// The instant below is Aug 2 in Los Angeles and Aug 3 in Tokyo, so a tooltip
+// that reads the runtime zone prints a different day from the axis.
+
+const date = new Date( '2026-08-02T15:30:00Z' );
+
+const params = {
+	tooltipData: {
+		nearestDatum: { key: 'Series A', datum: { date, value: 10 }, index: 0, distance: 0 },
+		datumByKey: { 'Series A': { key: 'Series A', datum: { date, value: 10 }, index: 0 } },
+	},
+} as unknown as RenderTooltipParams< DataPointDate >;
+
+describe( 'renderDefaultTooltip date heading', () => {
+	it( 'uses the locale and time zone from the provider', () => {
+		render(
+			<GlobalChartsProvider locale="de-DE" timeZone="Asia/Tokyo">
+				{ renderDefaultTooltip( params ) }
+			</GlobalChartsProvider>
+		);
+
+		expect( screen.getByText( '3.8.2026' ) ).toBeInTheDocument();
+	} );
+
+	it( 'falls back to the runtime locale and zone when the provider supplies none', () => {
+		render( <GlobalChartsProvider>{ renderDefaultTooltip( params ) }</GlobalChartsProvider> );
+
+		expect( screen.getByText( '8/2/2026' ) ).toBeInTheDocument();
+	} );
+
+	// The tooltip renders through a portal, so this is the only check that the
+	// provider's context actually reaches it inside a real chart.
+	it( 'reaches the tooltip a mounted chart opens', async () => {
+		const user = userEvent.setup();
+		render(
+			<GlobalChartsProvider locale="de-DE" timeZone="Asia/Tokyo">
+				<LineChart
+					width={ 500 }
+					height={ 300 }
+					withGradientFill={ false }
+					data={ [
+						{
+							label: 'Series A',
+							data: [
+								{ date, value: 10 },
+								{ date: new Date( date.getTime() + 24 * 60 * 60 * 1000 ), value: 20 },
+							],
+							options: {},
+						},
+					] }
+				/>
+			</GlobalChartsProvider>
+		);
+
+		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		await user.keyboard( '{ArrowRight}' );
+
+		expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( '3.8.2026' );
+	} );
+} );

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

@@ -445,10 +445,11 @@ describe( 'LineChart', () => {
 				data: [
 					{
 						label: 'Series A',
-						// A day apart: spacing inference would read this as daily buckets.
+						// 23h apart (not 24, and not both midnight): spacing inference would
+						// read this as daily buckets, and the two hours format distinctly.
 						data: [
 							{ date: new Date( '2024-01-01T00:00:00' ), value: 10 },
-							{ date: new Date( '2024-01-02T00:00:00' ), value: 20 },
+							{ date: new Date( '2024-01-01T23:00:00' ), value: 20 },
 						],
 					},
 				],
@@ -458,6 +459,27 @@ describe( 'LineChart', () => {
 			expect( ticks.length ).toBeGreaterThan( 1 );
 		} );
 
+		// Exactly 24 hours apart: bare hours would print "12 AM" twice and leave the
+		// second day unnamed, so the span reads as multi-day and dates its ticks.
+		test( 'names both days when two sub-daily points sit a full day apart', () => {
+			renderWithTheme( {
+				width: 800,
+				options: { axis: { x: { tickResolution: 'hour' } } },
+				data: [
+					{
+						label: 'Series A',
+						data: [
+							{ date: new Date( '2024-01-01T00:00:00' ), value: 10 },
+							{ date: new Date( '2024-01-02T00:00:00' ), value: 20 },
+						],
+					},
+				],
+			} );
+
+			expect( screen.getByText( 'Jan 1' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Jan 2' ) ).toBeInTheDocument();
+		} );
+
 		test( 'renders ticks in short date format.', () => {
 			renderWithTheme( {
 				width: 800,
@@ -599,6 +621,8 @@ describe( 'LineChart', () => {
 			expect( ticks.length ).toBeLessThan( 6 ); // Not much space
 		} );
 
+		// One repeated instant carries no spacing, so the axis falls back to
+		// calendar dates rather than reading a zero gap as hourly buckets.
 		test( 'renders only one tick when all ticks are the same', () => {
 			renderWithTheme( {
 				width: 800,
@@ -614,7 +638,7 @@ describe( 'LineChart', () => {
 				],
 			} );
 
-			const ticks = screen.getAllByText( /\d+ [AP]M/ );
+			const ticks = screen.getAllByText( /^[A-Z][a-z]{2} \d{1,2}$/ );
 			expect( ticks ).toHaveLength( 1 );
 		} );
 	} );
@@ -1153,6 +1177,53 @@ describe( 'LineChart', () => {
 			} );
 		} );
 
+		describe( 'Activation', () => {
+			const SERIES_A = {
+				label: 'Series A',
+				data: [
+					{ date: new Date( '2024-01-01' ), value: 10 },
+					{ date: new Date( '2024-01-02' ), value: 20 },
+				],
+				options: {},
+			};
+			const SERIES_B = {
+				label: 'Series B',
+				data: [
+					{ date: new Date( '2024-01-01' ), value: 15 },
+					{ date: new Date( '2024-01-02' ), value: 25 },
+				],
+				options: {},
+			};
+
+			// Navigation steps through x positions; the first series names the point.
+			test( 'Enter hands the selected point to onDatumActivate', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( { data: [ SERIES_A, SERIES_B ], onDatumActivate } );
+
+				screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+				await user.keyboard( '{ArrowRight}{ArrowRight}{Enter}' );
+
+				expect( onDatumActivate ).toHaveBeenCalledTimes( 1 );
+				expect( onDatumActivate ).toHaveBeenCalledWith( {
+					datum: SERIES_A.data[ 1 ],
+					index: 1,
+					key: 'Series A',
+				} );
+			} );
+
+			test( 'Enter with no point selected activates nothing', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( { data: [ SERIES_A ], onDatumActivate } );
+
+				screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+				await user.keyboard( '{Enter}' );
+
+				expect( onDatumActivate ).not.toHaveBeenCalled();
+			} );
+		} );
+
 		describe( 'Arrow Key Navigation', () => {
 			test( 'right arrow key navigates to next data point', async () => {
 				const user = userEvent.setup();

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

@@ -0,0 +1,84 @@
+/**
+ * @jest-environment <rootDir>/tests/environment-los-angeles.mjs
+ */
+import { render, screen } from '@testing-library/react';
+import { GlobalChartsProvider } from '../../../providers';
+import LineChart from '../line-chart';
+
+const mockRefCallback = jest.fn();
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
+} ) );
+
+// Each instant below is one day in Los Angeles and the next in Tokyo.
+const data = [
+	{
+		label: 'Series A',
+		data: Array.from( { length: 8 }, ( _, index ) => ( {
+			date: new Date( new Date( '2026-08-02T15:30:00Z' ).getTime() + index * 86400000 ),
+			value: index,
+		} ) ),
+		options: {},
+	},
+];
+
+// A long series and a short one, so hiding the long one leaves visx a much
+// narrower domain than the whole dataset would give.
+const monthly = ( label: string, count: number ) => ( {
+	label,
+	data: Array.from( { length: count }, ( _, index ) => ( {
+		date: new Date( Date.UTC( 2026, index, 1, 12 ) ),
+		value: index,
+	} ) ),
+	options: {},
+} );
+
+describe( 'line chart tick placement', () => {
+	it( 'places one tick per host zone calendar day, with no gap', () => {
+		render(
+			<GlobalChartsProvider locale="en-US" timeZone="Asia/Tokyo">
+				<LineChart width={ 500 } height={ 300 } withGradientFill={ false } data={ data } />
+			</GlobalChartsProvider>
+		);
+
+		const ticks = screen.getAllByText( /^[A-Z][a-z]{2} \d{1,2}$/ );
+		expect( ticks.map( tick => tick.textContent ) ).toEqual( [
+			'Aug 3',
+			'Aug 4',
+			'Aug 5',
+			'Aug 6',
+			'Aug 7',
+			'Aug 8',
+			'Aug 9',
+			'Aug 10',
+		] );
+	} );
+
+	it( 'keeps every tick inside the axis when a series is hidden', () => {
+		const { container } = render(
+			<GlobalChartsProvider locale="en-US" timeZone="Asia/Tokyo">
+				<LineChart
+					width={ 500 }
+					height={ 300 }
+					withGradientFill={ false }
+					data={ [ monthly( 'Long', 12 ), monthly( 'Short', 3 ) ] }
+					defaultHiddenSeries={ [ 'Long' ] }
+				/>
+			</GlobalChartsProvider>
+		);
+
+		// The x axis renders before the y axis, and neither carries an orientation class.
+		/* eslint-disable testing-library/no-container, testing-library/no-node-access -- A tick's position is an SVG attribute no query reaches. */
+		const xAxis = container.querySelectorAll( '.visx-axis' )[ 0 ];
+		const offsets = Array.from( xAxis.querySelectorAll( '.visx-axis-tick text' ) ).map( tick =>
+			Number( tick.getAttribute( 'x' ) )
+		);
+		/* eslint-enable testing-library/no-container, testing-library/no-node-access */
+
+		expect( offsets.length ).toBeGreaterThan( 1 );
+		for ( const offset of offsets ) {
+			expect( offset ).toBeGreaterThanOrEqual( 0 );
+			expect( offset ).toBeLessThanOrEqual( 500 );
+		}
+	} );
+} );