@automattic/charts 3.2.0 → 4.0.0

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

@@ -1,7 +1,7 @@
 .leaderboardChart {
 	transition:
-		opacity var(--wpds-motion-duration-lg, 300ms)
-		var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
+		opacity var(--wpds-motion-duration-lg)
+		var(--wpds-motion-easing-subtle);
 
 	&--responsive {
 		height: 100%;
@@ -49,7 +49,7 @@
 		}
 
 		.label {
-			padding-left: var(--wpds-dimension-padding-sm, 8px);
+			padding-left: var(--wpds-dimension-padding-sm);
 		}
 	}
 
@@ -58,7 +58,7 @@
 		min-height: 6px;
 		// Keeps a sliver of bar visible for tiny shares, and stops the interactive
 		// row's fixed-pixel hover inset from collapsing a narrow bar to nothing.
-		min-width: var(--wpds-dimension-size-5xs, 4px);
+		min-width: var(--wpds-dimension-size-5xs);
 
 		border-radius: var(--a8c-charts-border-radius-leaderboard-bar);
 		z-index: -1; /* places it behind the label */
@@ -97,6 +97,18 @@
 	font-variant-numeric: tabular-nums;
 	min-width: 3ch;
 	text-align: end;
+
+	&--down {
+		color: var(--a8c-charts-color-trend-down);
+	}
+
+	&--neutral {
+		color: var(--a8c-charts-color-trend-neutral);
+	}
+
+	&--up {
+		color: var(--a8c-charts-color-trend-up);
+	}
 }
 
 .deltaPlaceholder {
@@ -108,10 +120,10 @@
 }
 
 .emptyState {
-	padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
+	padding: var(--wpds-dimension-padding-3xl) var(--wpds-dimension-padding-lg);
 	text-align: center;
 	color: var(--a8c-charts-color-label-secondary);
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md);
 	font-style: italic;
 }
 
@@ -133,7 +145,7 @@
 // interactive row's outline (and its inset offset) stay equal. A Sass var,
 // not a custom property: a compile-time constant scoped to this module, so it
 // needs no runtime cascade and never lands on the DOM as an unprefixed var.
-$focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+$focus-ring-width: var(--wpds-border-width-focus);
 
 .row {
 	display: grid;
@@ -169,16 +181,16 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	// value slide is given an RTL override below. No row background.
 	.bar {
 		transition:
-			opacity var(--wpds-motion-duration-sm, 100ms)
-			var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1)),
-			width var(--wpds-motion-duration-sm, 100ms)
-			var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
+			opacity var(--wpds-motion-duration-sm)
+			var(--wpds-motion-easing-subtle),
+			width var(--wpds-motion-duration-sm)
+			var(--wpds-motion-easing-subtle);
 	}
 
 	.valueContainer {
 		transition:
-			transform var(--wpds-motion-duration-sm, 100ms)
-			var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
+			transform var(--wpds-motion-duration-sm)
+			var(--wpds-motion-easing-subtle);
 	}
 
 	&:hover,
@@ -186,7 +198,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 
 		// Fixed reserve for the chevron — the value slides by it in full, and the
 		// bar width inset (see leaderboard-chart.tsx) scales it by the bar's share.
-		--a8c-charts-dimension-leaderboard-bar-hover-inset: var(--wpds-dimension-gap-2xl, 32px);
+		--a8c-charts-dimension-leaderboard-bar-hover-inset: var(--wpds-dimension-gap-2xl);
 
 		.bar {
 			opacity: 0.5;
@@ -208,10 +220,10 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	}
 
 	&:focus-visible {
-		border-radius: var(--wpds-border-radius-sm, 2px);
+		border-radius: var(--wpds-border-radius-sm);
 		outline:
 			$focus-ring-width solid
-			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+			var(--wpds-color-stroke-focus);
 		// Inset by its own width so the outer edge hugs the row boundary: the
 		// outline then sits in the shared row padding, clear of the bar, and stays
 		// inside the overflow:auto container that would clip an outset ring.
@@ -221,15 +233,15 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 
 .chevron {
 	position: absolute;
-	inset-inline-end: var(--wpds-dimension-padding-xs, 4px);
+	inset-inline-end: var(--wpds-dimension-padding-xs);
 	top: 0;
 	bottom: 0;
 	margin-block: auto;
 	opacity: 0;
 	color: var(--a8c-charts-color-label-secondary);
 	transition:
-		opacity var(--wpds-motion-duration-sm, 100ms)
-		var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
+		opacity var(--wpds-motion-duration-sm)
+		var(--wpds-motion-easing-subtle);
 	pointer-events: none;
 
 	// The glyph points toward the inline end, so flip it to point left in RTL.

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

@@ -26,6 +26,15 @@ import styles from './leaderboard-chart.module.scss';
 import type { LeaderboardChartProps } from './types';
 import type { LeaderboardEntry } from '../../types';
 
+// Handed to `Grid` as a chain rather than set in this component's stylesheet: `Grid` writes
+// its own gaps through an Emotion class, which a module class of equal specificity would not
+// reliably outrank. The chain lands on the element and resolves there.
+const ROW_GAP = 'var(--a8c-charts-dimension-leaderboard-row-gap, 12px)';
+const COLUMN_GAP = 'var(--a8c-charts-dimension-leaderboard-column-gap, 4px)';
+
+/** Indexed by `Math.sign( delta ) + 1`, so [negative, neutral, positive]. */
+const DELTA_TREND_CLASS = [ 'deltaValue--down', 'deltaValue--neutral', 'deltaValue--up' ] as const;
+
 /**
  * Default value formatter using formatMetricValue
  *
@@ -198,22 +207,15 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 
 	// Process children to extract compound components
 	const { legendChildren, nonLegendChildren } = useChartChildren( children, 'LeaderboardChart' );
-	const {
-		labelSpacing,
-		rowGap,
-		columnGap,
-		primaryColor: settingsPrimaryColor,
-		secondaryColor: settingsSecondaryColor,
-		deltaColors,
-	} = leaderboardChartSettings;
+	const { labelSpacing } = leaderboardChartSettings;
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
 	const { color: resolvedPrimaryColor } = getElementStyles( {
 		index: 0,
-		overrideColor: primaryColor || settingsPrimaryColor,
+		overrideColor: primaryColor,
 	} );
 	const { color: resolvedSecondaryColor } = getElementStyles( {
 		index: 1,
-		overrideColor: secondaryColor || settingsSecondaryColor,
+		overrideColor: secondaryColor,
 	} );
 
 	// Create legend items using the custom hook
@@ -292,6 +294,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					legendElement={ false }
 					legendChildren={ legendChildren }
 					className={ clsx(
+						'leaderboard-chart',
 						styles.leaderboardChart,
 						{
 							[ styles[ 'leaderboardChart--responsive' ] ]: ! propWidth && ! propHeight,
@@ -336,6 +339,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 				legendElement={ legendElement }
 				legendChildren={ legendChildren }
 				className={ clsx(
+					'leaderboard-chart',
 					styles.leaderboardChart,
 					{
 						[ styles[ 'leaderboardChart--responsive' ] ]: ! propWidth && ! propHeight,
@@ -372,8 +376,8 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					) : (
 						<Grid
 							templateColumns="minmax(0, 1fr) auto"
-							rowGap={ rowGap }
-							columnGap={ columnGap }
+							rowGap={ ROW_GAP }
+							columnGap={ COLUMN_GAP }
 							data-leaderboard-grid
 						>
 							{ data.map( ( entry, rowIndex ) => {
@@ -389,8 +393,11 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 								const hasDelta = hasDeltaValue( entry );
 								const showComparisonValue = showComparisonColumn && hasDelta;
 								const showComparisonPlaceholder = showComparisonColumn && ! hasDelta;
-								const colorIndex = showComparisonValue ? Math.sign( entry.delta ) + 1 : 1;
-								const deltaColor = deltaColors[ colorIndex ];
+								// Math.sign gives -1/0/1; the placeholder has no delta to read, so it takes neutral.
+								const deltaTrendClass =
+									styles[
+										DELTA_TREND_CLASS[ showComparisonValue ? Math.sign( entry.delta ) + 1 : 1 ]
+									];
 
 								const rowCells = (
 									<>
@@ -417,15 +424,18 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 											{ isPrimaryVisible && <Text>{ valueFormatter( entry.currentValue ) }</Text> }
 
 											{ showComparisonValue && (
-												<Text className={ styles.deltaValue } style={ { color: deltaColor } }>
+												<Text className={ clsx( styles.deltaValue, deltaTrendClass ) }>
 													{ deltaFormatter( entry.delta ) }
 												</Text>
 											) }
 
 											{ showComparisonPlaceholder && (
 												<Text
-													className={ clsx( styles.deltaValue, styles.deltaPlaceholder ) }
-													style={ { color: deltaColor } }
+													className={ clsx(
+														styles.deltaValue,
+														styles.deltaPlaceholder,
+														deltaTrendClass
+													) }
 												>
 													<span aria-hidden="true">—</span>
 													<VisuallyHidden as="span">

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

@@ -665,4 +665,18 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getAllByRole( 'button' ) ).toHaveLength( 1 );
 		} );
 	} );
+
+	describe( 'grid gaps', () => {
+		// eslint-disable-next-line testing-library/no-node-access -- The grid is rendered by `Grid` from @wordpress/components, which takes no test id.
+		const grid = () => document.querySelector( '[data-leaderboard-grid]' );
+
+		it( 'hands the catalog role to the grid', () => {
+			render( <LeaderboardChart data={ mockData } /> );
+
+			expect( grid() ).toHaveStyle( {
+				gridRowGap: 'var(--a8c-charts-dimension-leaderboard-row-gap, 12px)',
+				gridColumnGap: 'var(--a8c-charts-dimension-leaderboard-column-gap, 4px)',
+			} );
+		} );
+	} );
 } );

package/src/charts/leaderboard-chart/test/use-leaderboard-legend-items.test.tsx

@@ -113,14 +113,8 @@ describe( 'useLeaderboardLegendItems', () => {
 	} );
 
 	describe( 'Color handling', () => {
-		it( 'should use default theme colors', () => {
-			const customTheme = {
-				leaderboardChart: {
-					primaryColor: '#FF0000',
-					secondaryColor: '#00FF00',
-				},
-			};
-			const wrapper = createWrapper( customTheme );
+		it( 'gives both legend items a color from the palette', () => {
+			const wrapper = createWrapper();
 			const { result } = renderHook(
 				() =>
 					useLeaderboardLegendItems( {
@@ -131,7 +125,6 @@ describe( 'useLeaderboardLegendItems', () => {
 				{ wrapper }
 			);
 
-			// Note: The actual color will be resolved by the context, but we can check structure
 			expect( result.current[ 0 ].color ).toBeTruthy();
 			expect( result.current[ 1 ].color ).toBeTruthy();
 		} );

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
@@ -194,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(
@@ -306,18 +357,18 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 		} );
 
 		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,
@@ -339,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 > ) => {
@@ -411,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>;
 		}
@@ -472,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 }
@@ -609,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(