@automattic/charts 4.1.1 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.1.1",
+	"version": "4.2.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -65,7 +65,7 @@
 	"dependencies": {
 		"@automattic/number-formatters": "^1.2.9",
 		"@babel/runtime": "7.29.7",
-		"@date-fns/tz": "1.4.1",
+		"@date-fns/tz": "1.5.0",
 		"@react-spring/web": "10.1.1",
 		"@visx/annotation": "^4.0.0",
 		"@visx/axis": "^4.0.0",
@@ -84,9 +84,9 @@
 		"@visx/vendor": "^4.0.0",
 		"@visx/xychart": "^4.0.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/icons": "^15.0.0",
-		"@wordpress/theme": "2.1.1-next.v.202608281122.0",
-		"@wordpress/ui": "0.21.0",
+		"@wordpress/icons": "^16.0.0",
+		"@wordpress/theme": "2.1.1-next.v.202609031004.0",
+		"@wordpress/ui": "0.22.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -111,9 +111,9 @@
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"@visx/glyph": "4.0.0",
-		"@wordpress/components": "40.0.0",
-		"@wordpress/element": "8.6.0",
-		"@wordpress/private-apis": "1.54.0",
+		"@wordpress/components": "40.1.0",
+		"@wordpress/element": "8.7.0",
+		"@wordpress/private-apis": "1.55.0",
 		"babel-jest": "30.5.1",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.5.1",

package/src/charts/area-chart/private/overlays.tsx

@@ -57,8 +57,7 @@ export const HoverGlyphs: FC< {
 	const yScale = dataContext?.yScale as ScaleFn | undefined;
 	const tooltipOpen = tooltipContext?.tooltipOpen;
 	const nearestDatum = tooltipContext?.tooltipData?.nearestDatum?.datum as
-		| DataPointDate
-		| undefined;
+		DataPointDate | undefined;
 
 	if (
 		! tooltipOpen ||

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

@@ -31,6 +31,8 @@ import plotStyles from '../private/xy-plot/xy-plot.module.scss';
 import styles from './bar-chart.module.scss';
 import {
 	useBarChartOptions,
+	BandHighlight,
+	BandTooltip,
 	ComparisonBars,
 	DEFAULT_COMPARISON_WIDTH_FACTOR,
 	COMPARISON_INNER_GAP,
@@ -51,15 +53,31 @@ import type { RenderTooltipParams } from '../../visx/types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { FC, ReactNode, ComponentType } from 'react';
 
+export type BandHighlightSelection = {
+	datum: DataPointDate;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+
 export interface BarChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */
 	legend?: SeriesChartLegendConfig;
 	renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
+	/** Place the tooltip beside its category without vertical flipping. */
+	tooltipPlacement?: 'auto' | 'beside';
+	/** Tooltip top anchor in SVG coordinates; negative offsets are supported. */
+	tooltipAnchorTop?: number;
 	orientation?: 'horizontal' | 'vertical';
 	withPatterns?: boolean;
 	showZeroValues?: boolean;
+	/** Highlight the active band across the plot when tooltips are enabled. */
+	withBandHighlight?: boolean;
+	/** Receive active band bounds in SVG coordinates, or null when dismissed. */
+	onBandHighlightChange?: ( selection: BandHighlightSelection | null ) => void;
 	children?: ReactNode;
 }
 
@@ -121,10 +139,14 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	legend = {},
 	gridVisibility: gridVisibilityProp,
 	renderTooltip,
+	tooltipPlacement,
+	tooltipAnchorTop,
 	options = {},
 	orientation = 'vertical',
 	withPatterns = false,
 	showZeroValues = false,
+	withBandHighlight = false,
+	onBandHighlightChange,
 	defaultHiddenSeries,
 	animation,
 	children,
@@ -193,13 +215,6 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );
 	const [ isNavigating, setIsNavigating ] = useState( false );
 
-	// Comparison series have no .visx-bar elements; count only primary series so
-	// keyboard navigation doesn't cycle phantom indices into comparison-only slots.
-	const primarySeriesForNav = dataWithVisibleZeros.filter( s => s.options?.type !== 'comparison' );
-	const totalPoints =
-		Math.max( 0, ...primarySeriesForNav.map( s => s.data?.length || 0 ) ) *
-		primarySeriesForNav.length;
-
 	// Add visibility information from the shared legend state.
 	const seriesWithVisibility = useMemo(
 		() =>
@@ -225,6 +240,9 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ seriesWithVisibility ]
 	);
 
+	const totalPoints =
+		Math.max( 0, ...primaryEntries.map( e => e.series.data.length ) ) * primaryEntries.length;
+
 	const primaryKeys = useMemo(
 		() => primaryEntries.map( ( { series } ) => series.label ),
 		[ primaryEntries ]
@@ -259,6 +277,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ primaryEntries, onDatumActivate ]
 	);
 
+	const visibleSeriesKey = useMemo( () => JSON.stringify( primaryKeys ), [ primaryKeys ] );
+
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
 		selectedIndex,
 		setSelectedIndex,
@@ -267,6 +287,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		chartRef,
 		totalPoints,
 		onActivate: activateSelectedBar,
+		visibleSeriesKey,
 	} );
 
 	const comparisonEntries = useMemo( () => {
@@ -342,10 +363,10 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	}, [ comparisonEntries.length, chartOptions.xScale, chartOptions.yScale, horizontal ] );
 
 	const getBarBackground = useCallback(
-		( index: number ) => () =>
+		( index: number ) => ( datum: DataPointDate ) =>
 			withPatterns
 				? `url(#${ getPatternId( chartId, index ) })`
-				: getElementStyles( { data: dataSorted[ index ], index } ).color,
+				: ( datum.color ?? getElementStyles( { data: dataSorted[ index ], index } ).color ),
 		[ withPatterns, getElementStyles, dataSorted, chartId ]
 	);
 
@@ -581,6 +602,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 					return (
 						<div
 							role="grid"
+							ref={ chartRef }
 							aria-label={ __( 'Bar chart', 'jetpack-charts' ) }
 							tabIndex={ 0 }
 							onKeyDown={ onChartKeyDown }
@@ -588,7 +610,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 							onBlur={ onChartBlur }
 						>
 							{ chartHeight > 0 && (
-								<div ref={ chartRef } className={ plotStyles[ 'xy-plot' ] }>
+								<div className={ plotStyles[ 'xy-plot' ] }>
 									<XYChart
 										theme={ theme }
 										width={ width }
@@ -600,18 +622,34 @@ const BarChartInternal: FC< BarChartProps > = ( {
 										xScale={ xScale }
 										yScale={ yScale }
 										horizontal={ horizontal }
-										onPointerDown={ onPointerDown }
-										onPointerUp={ onPointerUp }
 										pointerEventsDataKey="nearest"
 									>
-										{ ! allSeriesHidden && (
-											<Grid
-												columns={ gridVisibility.includes( 'y' ) }
-												rows={ gridVisibility.includes( 'x' ) }
-												numTicks={ 4 }
+										{ withTooltips && ( withBandHighlight || onBandHighlightChange ) && (
+											<BandHighlight
+												visible={ withBandHighlight }
+												horizontal={ horizontal }
+												onChange={ onBandHighlightChange }
 											/>
 										) }
 
+										{ ! allSeriesHidden && (
+											<>
+												{ /* Visx forwards tickValues to its grid primitives but omits it from GridProps. */ }
+												<Grid
+													columns={ gridVisibility.includes( 'y' ) }
+													rows={ false }
+													numTicks={ 4 }
+													{ ...{ tickValues: chartOptions.axis.x.tickValues } }
+												/>
+												<Grid
+													columns={ false }
+													rows={ gridVisibility.includes( 'x' ) }
+													numTicks={ 4 }
+													{ ...{ tickValues: chartOptions.axis.y.tickValues } }
+												/>
+											</>
+										) }
+
 										{ withPatterns && (
 											<>
 												<defs data-testid="bar-chart-patterns">
@@ -673,6 +711,16 @@ const BarChartInternal: FC< BarChartProps > = ( {
 												/>
 											) ) }
 										</BarGroup>
+										{ /* Do not reorder: for one key the last showTooltip wins, so this must run after BarGroup. */ }
+										{ ( withTooltips || onPointerDown || onPointerUp ) && (
+											<BandTooltip
+												keys={ primaryKeys }
+												groupPadding={ groupPadding }
+												withTooltips={ withTooltips }
+												onPointerDown={ onPointerDown }
+												onPointerUp={ onPointerUp }
+											/>
+										) }
 
 										{ /* With every series hidden there is no data to build the value scale from, so
 										     visx collapses the domain and the axes render squished at the top. Drop them
@@ -686,6 +734,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 
 										{ withTooltips && (
 											<AccessibleTooltip
+												tooltipPlacement={ tooltipPlacement }
+												tooltipAnchorTop={ tooltipAnchorTop }
 												detectBounds
 												snapTooltipToDatumX
 												snapTooltipToDatumY

package/src/charts/bar-chart/index.ts

@@ -1,2 +1,2 @@
 export { default as BarChart, BarChartUnresponsive } from './bar-chart';
-export type { BarChartProps } from './bar-chart';
+export type { BarChartProps, BandHighlightSelection } from './bar-chart';

package/src/charts/bar-chart/private/band-highlight.tsx

@@ -0,0 +1,85 @@
+import { DataContext, TooltipContext } from '@visx/xychart';
+import { useContext, useEffect, useMemo, useRef } from 'react';
+import { useDeepMemo } from '../../../hooks';
+import { CATALOG_POINTERS } from '../../../providers/chart-context/private/catalog-pointers';
+import type { BandScale } from './band-scale';
+import type { DataPointDate } from '../../../types';
+import type { BandHighlightSelection } from '../bar-chart';
+
+type Props = {
+	visible: boolean;
+	horizontal: boolean;
+	onChange?: ( selection: BandHighlightSelection | null ) => void;
+};
+
+/**
+ * Render and report the active band using the chart’s registered scales.
+ * @param root0            - Highlight options.
+ * @param root0.visible    - Whether to paint the band.
+ * @param root0.horizontal - Whether categories run vertically.
+ * @param root0.onChange   - Receives selected band geometry.
+ * @return The optional band highlight.
+ */
+export function BandHighlight( { visible, horizontal, onChange }: Props ) {
+	const { xScale, yScale, dataRegistry, margin, innerWidth, innerHeight } =
+		useContext( DataContext );
+	const { tooltipOpen, tooltipData } = useContext( TooltipContext );
+	const nearest = tooltipData?.nearestDatum;
+	const selection = useMemo( () => {
+		if ( ! tooltipOpen || ! nearest ) {
+			return null;
+		}
+		const scale = ( horizontal ? yScale : xScale ) as BandScale | undefined;
+		const entry = dataRegistry?.get( nearest.key );
+		const accessor = horizontal ? entry?.yAccessor : entry?.xAccessor;
+		if ( ! scale?.bandwidth || ! accessor ) {
+			return null;
+		}
+		const position = scale( accessor( nearest.datum ) );
+		if ( position === undefined || ! Number.isFinite( position ) ) {
+			return null;
+		}
+		return {
+			datum: nearest.datum as DataPointDate,
+			x: horizontal ? ( margin?.left ?? 0 ) : position,
+			y: horizontal ? position : ( margin?.top ?? 0 ),
+			width: horizontal ? innerWidth : scale.bandwidth(),
+			height: horizontal ? scale.bandwidth() : innerHeight,
+		};
+	}, [
+		tooltipOpen,
+		nearest,
+		horizontal,
+		xScale,
+		yScale,
+		dataRegistry,
+		margin,
+		innerWidth,
+		innerHeight,
+	] );
+
+	const stableSelection = useDeepMemo( selection );
+	const onChangeRef = useRef( onChange );
+	onChangeRef.current = onChange;
+	useEffect( () => {
+		onChangeRef.current?.( stableSelection );
+	}, [ stableSelection ] );
+
+	useEffect( () => () => onChangeRef.current?.( null ), [] );
+
+	if ( ! visible || ! selection ) {
+		return null;
+	}
+	const { x, y, width, height } = selection;
+	return (
+		<rect
+			x={ x }
+			y={ y }
+			width={ width }
+			height={ height }
+			data-testid="bar-chart-band-highlight"
+			pointerEvents="none"
+			fill={ CATALOG_POINTERS.surfaceSecondary }
+		/>
+	);
+}

package/src/charts/bar-chart/private/band-scale.ts

@@ -0,0 +1,13 @@
+import { scaleBand } from '@visx/scale';
+
+export type BandScale = ( ( value: unknown ) => number | undefined ) & { bandwidth: () => number };
+
+/**
+ * Match the inner slot scale used by visx BarGroup.
+ * @param keys      - Visible primary series keys.
+ * @param bandwidth - Category band width.
+ * @param padding   - Padding between slots.
+ * @return The grouped bar scale.
+ */
+export const createGroupScale = ( keys: string[], bandwidth: number, padding: number ) =>
+	scaleBand( { domain: keys, range: [ 0, bandwidth ], padding } );

package/src/charts/bar-chart/private/band-tooltip.tsx

@@ -0,0 +1,138 @@
+import { DataContext, TooltipContext, useEventEmitter } from '@visx/xychart';
+import { useCallback, useContext, useMemo } from 'react';
+import { createGroupScale } from './band-scale';
+import type { BandScale } from './band-scale';
+import type { BarChartProps } from '../bar-chart';
+
+type PointerHandler = NonNullable< Parameters< typeof useEventEmitter >[ 1 ] >;
+type PointerSelection = Parameters< NonNullable< BarChartProps[ 'onPointerUp' ] > >[ 0 ];
+
+/**
+ * Find a category by its painted center, including outer padding and reversed ranges.
+ * @param data     - Registered series points.
+ * @param accessor - Category accessor.
+ * @param scale    - Rendered category band scale.
+ * @param position - Pointer coordinate on the category axis.
+ * @return Index of the nearest category, or -1 when none is registered.
+ */
+export function nearestBandIndex< Datum >(
+	data: Datum[],
+	accessor: ( datum: Datum ) => unknown,
+	scale: BandScale,
+	position: number
+): number {
+	let nearest = -1;
+	let distance = Infinity;
+	data.forEach( ( datum, index ) => {
+		const start = scale( accessor( datum ) );
+		if ( start === undefined ) {
+			return;
+		}
+		const candidate = Math.abs( start + scale.bandwidth() / 2 - position );
+		if ( candidate < distance ) {
+			distance = candidate;
+			nearest = index;
+		}
+	} );
+	return nearest;
+}
+
+/**
+ * Correct visx's range-based band inversion, which omits outer padding.
+ * @param root0               - Registered series selection.
+ * @param root0.keys          - Visible series keys.
+ * @param root0.groupPadding  - Padding between grouped bars.
+ * @param root0.withTooltips  - Whether pointer events update the tooltip.
+ * @param root0.onPointerDown - Receives the corrected pointer-down datum.
+ * @param root0.onPointerUp   - Receives the corrected pointer-up datum.
+ * @return No visual content.
+ */
+export function BandTooltip( {
+	keys,
+	groupPadding,
+	withTooltips,
+	onPointerDown,
+	onPointerUp,
+}: { keys: string[]; groupPadding: number } & Pick<
+	BarChartProps,
+	'withTooltips' | 'onPointerDown' | 'onPointerUp'
+> ) {
+	const { xScale, yScale, dataRegistry, horizontal } = useContext( DataContext );
+	const { showTooltip } = useContext( TooltipContext );
+	const scale = ( horizontal ? yScale : xScale ) as BandScale | undefined;
+	const bandwidth = scale?.bandwidth?.() ?? 0;
+	const groupScale = useMemo(
+		() => createGroupScale( keys, bandwidth, groupPadding ),
+		[ keys, bandwidth, groupPadding ]
+	);
+	const getSelections = useCallback(
+		( params: Parameters< PointerHandler >[ 0 ] ) => {
+			const point = params?.svgPoint;
+			if ( ! point || ! scale?.bandwidth ) {
+				return [];
+			}
+			const selections: PointerSelection[] = [];
+			for ( const key of keys ) {
+				const entry = dataRegistry?.get( key );
+				if ( ! entry ) {
+					continue;
+				}
+				const accessor = horizontal ? entry.yAccessor : entry.xAccessor;
+				const index = nearestBandIndex(
+					entry.data,
+					accessor,
+					scale,
+					horizontal ? point.y : point.x
+				);
+				if ( index < 0 ) {
+					continue;
+				}
+				const datum = entry.data[ index ];
+				const start = Number( scale( accessor( datum ) ) ) + Number( groupScale( key ) );
+				const end = start + groupScale.step();
+				const position = horizontal ? point.y : point.x;
+				const distance =
+					position >= start && position <= end ? 0 : Math.abs( position - ( start + end ) / 2 );
+				selections.push( {
+					event: params.event,
+					key,
+					datum,
+					index,
+					svgPoint: point,
+					distanceX: horizontal ? 0 : distance,
+					distanceY: horizontal ? distance : 0,
+				} );
+			}
+			return selections;
+		},
+		[ scale, dataRegistry, horizontal, keys, groupScale ]
+	);
+	const handlePointer = useCallback< PointerHandler >(
+		params => {
+			const selections = getSelections( params );
+			if ( withTooltips && params?.event.type !== 'pointerup' ) {
+				selections.forEach( showTooltip );
+			}
+			const callback = params?.event.type === 'pointerdown' ? onPointerDown : onPointerUp;
+			if ( params?.event.type === 'pointermove' || ! callback ) {
+				return;
+			}
+			const nearest = selections.reduce(
+				( best, selection ) => {
+					const distance = ( value: typeof selection ) =>
+						Math.hypot( value.distanceX, value.distanceY );
+					return ! best || distance( selection ) <= distance( best ) ? selection : best;
+				},
+				undefined as ( typeof selections )[ number ] | undefined
+			);
+			if ( nearest ) {
+				callback( nearest );
+			}
+		},
+		[ getSelections, withTooltips, showTooltip, onPointerDown, onPointerUp ]
+	);
+	useEventEmitter( 'pointermove', withTooltips ? handlePointer : undefined );
+	useEventEmitter( 'pointerdown', handlePointer );
+	useEventEmitter( 'pointerup', onPointerUp ? handlePointer : undefined );
+	return null;
+}

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

@@ -1,11 +1,12 @@
-import { scaleBand } from '@visx/scale';
 import { DataContext } from '@visx/xychart';
 import { useContext } from 'react';
+import { createGroupScale } from './band-scale';
 import { computeComparisonRect, getValueScaleBaseline } from './comparison-bars-geometry';
 import {
 	DEFAULT_COMPARISON_OPACITY,
 	DEFAULT_COMPARISON_WIDTH_FACTOR,
 } from './comparison-constants';
+import type { BandScale } from './band-scale';
 import type { ElementStyles, GetElementStylesParams } from '../../../providers';
 import type { DataPointDate, SeriesData } from '../../../types';
 import type { FC, ReactNode } from 'react';
@@ -26,10 +27,8 @@ export type ComparisonSeriesEntry = {
 
 // Minimal shape we need from visx scales — avoids spreading `any` while
 // remaining compatible with both band and continuous scale return types.
-type AnyScale = ( ( input: unknown ) => number ) & {
-	bandwidth?: () => number;
-	range: () => unknown[];
-};
+type AnyScale = ( ( input: unknown ) => number ) &
+	Partial< Pick< BandScale, 'bandwidth' > > & { range: () => unknown[] };
 
 // Renders translucent "shadow" bars for comparison series behind their paired primary bars.
 // IMPORTANT: each comparison datum's category key (label or date) must exactly match a key
@@ -73,11 +72,7 @@ export const ComparisonBars: FC< {
 	}
 
 	// Rebuild visx's inner group scale exactly as BarGroup does.
-	const groupScale = scaleBand( {
-		domain: primaryKeys,
-		range: [ 0, bandwidth ],
-		padding: groupPadding,
-	} );
+	const groupScale = createGroupScale( primaryKeys, bandwidth, groupPadding );
 	const slotThickness = groupScale.bandwidth();
 	const baseline = getValueScaleBaseline( valueScale );
 

package/src/charts/bar-chart/private/index.ts

@@ -9,3 +9,5 @@ export {
 	COMPARISON_TICK_GAP_FACTOR,
 } from './comparison-constants';
 export { BASE_BAND_PADDING_INNER } from './use-bar-chart-options';
+export { BandHighlight } from './band-highlight';
+export { BandTooltip } from './band-tooltip';

package/src/charts/bar-chart/private/test/band-highlight.test.tsx

@@ -0,0 +1,109 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { scaleBand } from '@visx/scale';
+import { DataContext, TooltipContext } from '@visx/xychart';
+import { useState } from 'react';
+import { GlobalChartsProvider } from '../../../../providers';
+import { CATALOG_POINTERS } from '../../../../providers/chart-context/private/catalog-pointers';
+import { BarChartUnresponsive } from '../../bar-chart';
+import { BandHighlight } from '../band-highlight';
+import type { BandHighlightSelection } from '../../bar-chart';
+
+const xScale = scaleBand( { domain: [ 'Jan', 'Feb' ], range: [ 10, 210 ] } );
+const dataContext = {
+	xScale,
+	dataRegistry: { get: () => ( { xAccessor: datum => datum.label } ) },
+	margin: { top: 20, left: 10 },
+	innerWidth: 200,
+	innerHeight: 150,
+};
+
+const Fixture = ( { label = 'Jan', onChange } ) => {
+	return (
+		<DataContext.Provider value={ dataContext as never }>
+			<TooltipContext.Provider
+				value={
+					{
+						tooltipOpen: true,
+						tooltipData: { nearestDatum: { key: 'scores', datum: { label, value: 50 } } },
+					} as never
+				}
+			>
+				<svg>
+					<BandHighlight visible horizontal={ false } onChange={ onChange } />
+				</svg>
+			</TooltipContext.Provider>
+		</DataContext.Provider>
+	);
+};
+
+describe( 'BandHighlight', () => {
+	test( 'uses the catalog surface fill', () => {
+		render( <Fixture onChange={ undefined } /> );
+		expect( screen.getByTestId( 'bar-chart-band-highlight' ) ).toHaveAttribute(
+			'fill',
+			CATALOG_POINTERS.surfaceSecondary
+		);
+	} );
+
+	test( 'settles inline derived-state callbacks and notifies the latest callback on selection changes', () => {
+		const notify = jest.fn();
+		const DerivedState = ( { label } ) => {
+			const [ band, setBand ] = useState< { x: number } | null >( null );
+			return (
+				<>
+					<output>{ band?.x }</output>
+					<Fixture
+						label={ label }
+						// eslint-disable-next-line react/jsx-no-bind -- An inline callback reproduces parent state updates changing its identity.
+						onChange={ ( selection: BandHighlightSelection | null ) => {
+							notify( label );
+							if ( notify.mock.calls.length > 4 ) {
+								throw new Error( 'Highlight notifications did not settle' );
+							}
+							setBand( selection && { x: selection.x } );
+						} }
+					/>
+				</>
+			);
+		};
+		const { rerender } = render( <DerivedState label="Jan" /> );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' );
+		expect( notify ).toHaveBeenCalledTimes( 1 );
+		rerender( <DerivedState label="Feb" /> );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '110' );
+		expect( notify ).toHaveBeenCalledTimes( 2 );
+		expect( notify ).toHaveBeenLastCalledWith( 'Feb' );
+	} );
+
+	test.each( [ { withTooltips: false }, { data: [] } ] )(
+		'clears the selected band when the highlight unmounts with %j',
+		async props => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const chartProps = {
+				width: 500,
+				height: 300,
+				withTooltips: true,
+				onBandHighlightChange: onChange,
+				data: [ { label: 'Scores', data: [ { label: 'Jan', value: 50 } ] } ],
+			};
+			const { rerender } = render(
+				<GlobalChartsProvider>
+					<BarChartUnresponsive { ...chartProps } />
+				</GlobalChartsProvider>
+			);
+			await user.tab();
+			await user.keyboard( '{ArrowRight}' );
+			expect( onChange ).toHaveBeenLastCalledWith(
+				expect.objectContaining( { datum: expect.objectContaining( { label: 'Jan' } ) } )
+			);
+			rerender(
+				<GlobalChartsProvider>
+					<BarChartUnresponsive { ...chartProps } { ...props } />
+				</GlobalChartsProvider>
+			);
+			expect( onChange ).toHaveBeenLastCalledWith( null );
+		}
+	);
+} );

package/src/charts/bar-chart/private/test/band-tooltip.test.ts

@@ -0,0 +1,26 @@
+import { scaleBand } from '@visx/scale';
+import { nearestBandIndex } from '../band-tooltip';
+
+describe( 'nearestBandIndex', () => {
+	test.each( [
+		[ 25, 688 ],
+		[ 688, 25 ],
+	] )( 'matches every painted center with outer padding in range %s to %s', ( start, end ) => {
+		const data = Array.from( { length: 30 }, ( _, index ) => String( index ) );
+		const scale = scaleBand( {
+			domain: data,
+			range: [ start, end ],
+			paddingInner: 0.024,
+			paddingOuter: 0.7,
+		} );
+		data.forEach( ( datum, index ) => {
+			expect(
+				nearestBandIndex( data, value => value, scale, scale( datum )! + scale.bandwidth() / 2 )
+			).toBe( index );
+		} );
+	} );
+	test( 'ignores data outside the band domain', () => {
+		const scale = scaleBand( { domain: [ 'recorded' ], range: [ 0, 100 ] } );
+		expect( nearestBandIndex( [ 'missing' ], value => value, scale, 50 ) ).toBe( -1 );
+	} );
+} );

package/src/charts/bar-chart/private/truncated-tick-component.tsx

@@ -11,7 +11,7 @@ import type { FC, CSSProperties } from 'react';
  * @return The bandwidth of the scale
  */
 const getScaleBandwidth = < Scale extends AxisScale >( scale?: Scale ) => {
-	return scale && 'bandwidth' in scale ? scale.bandwidth() ?? 0 : 0;
+	return scale && 'bandwidth' in scale ? ( scale.bandwidth() ?? 0 ) : 0;
 };
 interface TruncatedTickComponentProps extends TickRendererProps {
 	/** Which axis this tick belongs to */