@automattic/charts 4.11.0 → 4.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.11.0",
+	"version": "4.12.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,10 +63,10 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.2.11",
+		"@automattic/number-formatters": "^1.2.12",
 		"@babel/runtime": "7.29.7",
 		"@date-fns/tz": "1.5.0",
-		"@react-spring/web": "10.1.1",
+		"@react-spring/web": "10.1.2",
 		"@visx/annotation": "^4.0.0",
 		"@visx/axis": "^4.0.0",
 		"@visx/curve": "^4.0.0",
@@ -98,8 +98,8 @@
 	"devDependencies": {
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "^7.29.7",
-		"@storybook/addon-docs": "10.4.6",
-		"@storybook/react": "10.4.6",
+		"@storybook/addon-docs": "10.6.3",
+		"@storybook/react": "10.6.3",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
@@ -107,8 +107,8 @@
 		"@tsdown/css": "0.23.1",
 		"@types/jest": "^30.0.0",
 		"@types/node": "^24.12.0",
-		"@types/react": "18.3.31",
-		"@types/react-dom": "18.3.7",
+		"@types/react": "19.3.0",
+		"@types/react-dom": "19.3.0",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"@visx/glyph": "4.0.0",
 		"@wordpress/components": "42.0.0",
@@ -120,10 +120,10 @@
 		"jest-extended": "7.0.0",
 		"lightningcss": "^1.33.0",
 		"magic-string": "0.30.21",
-		"react": "18.3.1",
-		"react-dom": "18.3.1",
+		"react": "19.3.0",
+		"react-dom": "19.3.0",
 		"sass-embedded": "1.97.3",
-		"storybook": "10.4.6",
+		"storybook": "10.6.3",
 		"tsdown": "0.23.1",
 		"typescript": "6.0.3"
 	},

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

@@ -1,9 +1,9 @@
 import { PatternLines, PatternCircles, PatternWaves, PatternHexagons } from '@visx/pattern';
-import { Axis, BarSeries, BarGroup, Grid, XYChart } from '@visx/xychart';
+import { Axis, Grid, XYChart } from '@visx/xychart';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
-import { useCallback, useContext, useState, useRef, useMemo } from 'react';
-import { Legend, useChartLegendItems } from '../../components/legend';
+import { Fragment, useCallback, useContext, useState, useRef, useMemo } from 'react';
+import { Legend } from '../../components/legend';
 import { XYChartTooltip, useKeyboardNavigation } from '../../components/tooltip';
 import {
 	useXYChartTheme,
@@ -35,17 +35,22 @@ import {
 	useBarChartOptions,
 	BandHighlight,
 	BandTooltip,
-	ClassifiedBarSeries,
+	BarLayer,
 	ComparisonBars,
 	DEFAULT_COMPARISON_WIDTH_FACTOR,
 	COMPARISON_INNER_GAP,
 	MAX_GROUP_PADDING,
 	COMPARISON_TICK_GAP_FACTOR,
 	BASE_BAND_PADDING_INNER,
-	countRenderedBars,
 	isBarRendered,
+	SlotTooltipMembers,
+	useBarStops,
+	useOverlapSlots,
+	getSelectedSlot,
 } from './private';
-import type { ComparisonSeriesEntry } from './private';
+import { useBarColors } from './use-bar-colors';
+import { useBarLegendItems } from './use-bar-legend-items';
+import type { ComparisonSeriesEntry, SelectedBar } from './private';
 import type { BarChartProps } from './types';
 import type { DataPointDate, SeriesData, Optional } from '../../types';
 import type { RenderTooltipParams } from '../../visx/types';
@@ -117,6 +122,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	barClassName,
 	options = {},
 	orientation = 'vertical',
+	layout = 'grouped',
 	withPatterns = false,
 	showZeroValues = false,
 	withBandHighlight = false,
@@ -141,6 +147,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const legendComparisonItem = legend.comparisonItem ?? false;
 	const legendComparisonSeriesItems = legend.comparisonSeriesItems;
 	const horizontal = orientation === 'horizontal';
+	const isOverlap = layout === 'overlap';
 	const chartId = useChartId( providedChartId );
 	const hiddenSeries = useDefaultHiddenSeries( chartId, defaultHiddenSeries );
 	const isSeriesVisible = useCallback(
@@ -164,12 +171,25 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			collapseGroups: legendCollapseGroups,
 			comparisonItem: legendComparisonItem,
 			comparisonSeriesItems: legendComparisonSeriesItems,
+			layout,
 		} ),
-		[ legendCollapseGroups, legendComparisonItem, legendComparisonSeriesItems ]
+		[ legendCollapseGroups, legendComparisonItem, legendComparisonSeriesItems, layout ]
 	);
-	const legendItems = useChartLegendItems( dataSorted, legendOptions );
+	const legendItems = useBarLegendItems( dataSorted, legendOptions );
 
-	const { getElementStyles } = useGlobalChartsContext();
+	const { getElementStyles, theme: providerTheme } = useGlobalChartsContext();
+	const getBarColors = useBarColors();
+	const barColors = useMemo(
+		() => getBarColors( dataSorted, { layout } ),
+		[ layout, getBarColors, dataSorted ]
+	);
+
+	if ( providerTheme.barChart?.barStyles?.comparison?.opacity !== undefined ) {
+		warnOnce(
+			'bar-chart-comparison-opacity',
+			'BarChart: theme.barChart.barStyles.comparison.opacity is deprecated. Comparison bars are opaque; leave it unset.'
+		);
+	}
 
 	// A hidden series is unmounted, so it is not on the band scale either — the
 	// axis has to choose its tick values from what is left. Visibility is owned by
@@ -239,45 +259,27 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ seriesWithVisibility ]
 	);
 
-	const totalPoints =
-		Math.max( 0, ...primaryEntries.map( e => e.series.data.length ) ) * primaryEntries.length;
+	const overlapSlots = useOverlapSlots( isOverlap, seriesWithVisibility );
 
 	const primaryKeys = useMemo(
 		() => primaryEntries.map( ( { series } ) => series.label ),
 		[ primaryEntries ]
 	);
 
-	// The keyboard-navigation index space and the highlight CSS both stride over primary
-	// bars only; `XYChartTooltip` must use the same list, or its datum diverges from
-	// the highlighted bar once a comparison series shifts the indices.
-	const primarySeries = useMemo(
-		() => primaryEntries.map( ( { series } ) => series ),
-		[ primaryEntries ]
-	);
+	// The keyboard index space, the highlight and `XYChartTooltip` must share these stops, or the tooltip's datum diverges from the highlighted bar.
+	const stops = useBarStops( overlapSlots, primaryEntries );
+	const { barAt, stopOf } = stops;
 
-	// Walks the selected index the way the highlight style does — series-major
-	// within each data point — so the bar handed on is the one outlined.
 	const activateSelectedBar = useCallback(
-		( index: number ) => {
-			const primaryCount = primaryEntries.length;
-
-			if ( ! primaryCount ) {
-				return;
-			}
-
-			const dataPointIndex = Math.floor( index / primaryCount );
-			const series = primaryEntries[ index % primaryCount ]?.series;
-			const datum = series?.data[ dataPointIndex ];
-
-			if ( series && datum ) {
-				onDatumActivate?.( { datum, index: dataPointIndex, key: series.label } );
+		( stop: number ) => {
+			const bar = barAt( stop );
+			if ( bar ) {
+				onDatumActivate?.( bar );
 			}
 		},
-		[ primaryEntries, onDatumActivate ]
+		[ barAt, onDatumActivate ]
 	);
 
-	const visibleSeriesKey = useMemo( () => JSON.stringify( primaryKeys ), [ primaryKeys ] );
-
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown, onChartPointerMove } =
 		useKeyboardNavigation( {
 			selectedIndex,
@@ -285,22 +287,27 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			isNavigating,
 			setIsNavigating,
 			chartRef,
-			totalPoints,
+			totalPoints: stops.count,
 			onActivate: activateSelectedBar,
-			visibleSeriesKey,
+			visibleSeriesKey: stops.key,
 		} );
 
 	const handlePointerMove = useCallback(
 		( { key, index }: { key: string; index: number } ) => {
-			const seriesIndex = primaryKeys.indexOf( key );
-			if ( seriesIndex >= 0 ) {
-				onChartPointerMove( index * primaryKeys.length + seriesIndex );
+			const stop = stopOf( key, index );
+			if ( stop !== undefined ) {
+				onChartPointerMove( stop );
 			}
 		},
-		[ primaryKeys, onChartPointerMove ]
+		[ stopOf, onChartPointerMove ]
 	);
 
 	const comparisonEntries = useMemo( () => {
+		// An overlap layout draws its comparisons as slotted bars, not as shadows.
+		if ( isOverlap ) {
+			return [];
+		}
+
 		const primaryByGroup = new Map< string | undefined, { label: string; index: number } >(
 			primaryEntries.map( ( { series, index } ) => [
 				series.group,
@@ -321,10 +328,10 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			if ( ! primary || ! primaryKeys.includes( primary.label ) ) {
 				return;
 			}
-			entries.push( { series, index, primaryKey: primary.label, primaryIndex: primary.index } );
+			entries.push( { series, index, primaryKey: primary.label } );
 		} );
 		return entries;
-	}, [ seriesWithVisibility, primaryEntries, primaryKeys ] );
+	}, [ isOverlap, seriesWithVisibility, primaryEntries, primaryKeys ] );
 
 	// Comparison widthFactor (how much wider the shadow is than the primary) drives both the
 	// shadow width (in ComparisonBars) and the primary narrowing.
@@ -376,18 +383,48 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		( index: number ) => ( datum: DataPointDate ) =>
 			withPatterns
 				? `url(#${ getPatternId( chartId, index ) })`
-				: ( datum.color ?? getElementStyles( { data: dataSorted[ index ], index } ).color ),
-		[ withPatterns, getElementStyles, dataSorted, chartId ]
+				: ( datum.color ?? barColors[ index ] ?? '' ),
+		[ withPatterns, barColors, chartId ]
 	);
 
-	// Comparison shadow fill: when patterns are on, reuse the paired primary's pattern so the
-	// shadow reads as the same series; otherwise use the comparison series' resolved color.
 	const resolveComparisonFill = useCallback(
-		( entry: ComparisonSeriesEntry ) =>
+		( entry: ComparisonSeriesEntry, datum: DataPointDate ) =>
 			withPatterns
-				? `url(#${ getPatternId( chartId, entry.primaryIndex ) })`
-				: getElementStyles( { data: entry.series, index: entry.index } ).color,
-		[ withPatterns, chartId, getElementStyles ]
+				? `url(#${ getPatternId( chartId, entry.index ) })`
+				: ( datum.color ?? barColors[ entry.index ] ?? '' ),
+		[ withPatterns, chartId, barColors ]
+	);
+
+	// Lists every series with a point at the hovered category, in the order of the data.
+	const renderOverlapTooltip = useCallback(
+		( { tooltipData }: RenderTooltipParams< DataPointDate > ) => {
+			const nearestDatum = tooltipData?.nearestDatum?.datum;
+			if ( ! nearestDatum ) return null;
+
+			const datumByKey = tooltipData?.datumByKey ?? {};
+			const categoryLabel = chartOptions.tooltip.labelFormatter(
+				nearestDatum.label || ( nearestDatum.date ? nearestDatum.date.getTime() : 0 ),
+				0,
+				[]
+			);
+
+			return (
+				<div className={ styles[ 'bar-chart__tooltip' ] }>
+					<div className={ styles[ 'bar-chart__tooltip-header' ] }>{ categoryLabel }</div>
+					{ dataSorted.flatMap( ( { label } ) => {
+						const datum = datumByKey[ label ]?.datum;
+						return datum
+							? [
+									<Fragment key={ label }>
+										{ renderTooltipRow( label, formatReading( datum.value ) ) }
+									</Fragment>,
+								]
+							: [];
+					} ) }
+				</div>
+			);
+		},
+		[ chartOptions.tooltip, dataSorted ]
 	);
 
 	const renderDefaultTooltip = useCallback(
@@ -489,44 +526,25 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ chartId ]
 	);
 
-	const createKeyboardHighlightStyle = useCallback( () => {
-		if ( selectedIndex === undefined ) return '';
+	const overlapBandSlots = useMemo(
+		() => overlapSlots && { keys: overlapSlots.slotKeys, slotOf: overlapSlots.slotOf },
+		[ overlapSlots ]
+	);
 
-		// Use only primary entries: comparison series have no .visx-bar elements, so
-		// their indices must not appear in the nth-child selector.
-		// Pattern: [series1[0], series2[0], series3[0], series1[1], series2[1], series3[1], ...]
-		const primaryCount = primaryEntries.length;
-		if ( ! primaryCount ) {
-			return '';
-		}
-		const dataPointIndex = Math.floor( selectedIndex / primaryCount );
-		const seriesIndex = selectedIndex % primaryCount;
-		const seriesData = primaryEntries[ seriesIndex ]?.series;
-		const datum = seriesData?.data[ dataPointIndex ];
+	const selectedSlot = useMemo(
+		() => getSelectedSlot( overlapSlots, selectedIndex ),
+		[ overlapSlots, selectedIndex ]
+	);
 
-		if ( ! seriesData || ! datum || ! isBarRendered( datum ) ) {
-			return '';
+	const selectedBar = useMemo( (): SelectedBar | undefined => {
+		if ( overlapSlots ) {
+			return selectedSlot;
 		}
-
-		// The single .visx-bar-group holds series after series, and only the points visx drew a bar for.
-		const domBarIndex =
-			primaryEntries
-				.slice( 0, seriesIndex )
-				.reduce( ( count, { series } ) => count + countRenderedBars( series.data ), 0 ) +
-			countRenderedBars( seriesData.data.slice( 0, dataPointIndex ) );
-
-		// Use a CSS class selector instead of ID since useId() generates invalid CSS ID characters
-		const generatedStyles = `
-			.bar-chart[data-chart-id="bar-chart-${ chartId }"] .visx-bar-group .visx-bar:nth-child(${
-				domBarIndex + 1
-			}) {
-				stroke: #005fcc;
-				stroke-width: 2px;
-			}
-		`;
-
-		return generatedStyles;
-	}, [ selectedIndex, primaryEntries, chartId ] );
+		const bar = selectedIndex === undefined ? undefined : barAt( selectedIndex );
+		return bar && isBarRendered( bar.datum )
+			? { data: [ bar.datum ], slotKey: bar.key, thickness: 1 }
+			: undefined;
+	}, [ overlapSlots, selectedSlot, selectedIndex, barAt ] );
 
 	// Validate data first
 	const error = validateData( dataSorted );
@@ -557,7 +575,6 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	}
 
 	const gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;
-	const highlightedBarStyle = createKeyboardHighlightStyle();
 
 	const legendPosition = legend.position ?? 'bottom';
 	const legendElement = showLegend && (
@@ -676,30 +693,16 @@ const BarChartInternal: FC< BarChartProps > = ( {
 										{ withPatterns && (
 											<>
 												<defs data-testid="bar-chart-patterns">
-													{ dataSorted.map( ( seriesData, index ) =>
-														renderPattern(
-															index,
-															getElementStyles( { data: seriesData, index } ).color
-														)
-													) }
+													{ barColors.map( ( color, index ) => renderPattern( index, color ) ) }
 												</defs>
 												<style>
-													{ dataSorted.map( ( seriesData, index ) =>
-														createPatternBorderStyle(
-															index,
-															getElementStyles( { data: seriesData, index } ).color
-														)
+													{ barColors.map( ( color, index ) =>
+														createPatternBorderStyle( index, color )
 													) }
 												</style>
 											</>
 										) }
 
-										{ highlightedBarStyle && (
-											<style data-testid="bar-chart-keyboard-highlight">
-												{ highlightedBarStyle }
-											</style>
-										) }
-
 										{ allSeriesHidden ? (
 											<SvgEmptyState
 												x={ width / 2 }
@@ -726,40 +729,24 @@ const BarChartInternal: FC< BarChartProps > = ( {
 											resolveFill={ resolveComparisonFill }
 										/>
 
-										{ barClassName ? (
-											<g className="visx-bar-group">
-												{ primaryEntries.map( ( { series: seriesData, index } ) => (
-													<ClassifiedBarSeries
-														key={ seriesData.label }
-														dataKey={ seriesData.label }
-														data={ seriesData.data as DataPointDate[] }
-														xAccessor={ chartOptions.accessors.xAccessor }
-														yAccessor={ chartOptions.accessors.yAccessor }
-														colorAccessor={ getBarBackground( index ) }
-														barClassName={ barClassName }
-														primaryKeys={ primaryKeys }
-														groupPadding={ groupPadding }
-													/>
-												) ) }
-											</g>
-										) : (
-											<BarGroup padding={ groupPadding }>
-												{ primaryEntries.map( ( { series: seriesData, index } ) => (
-													<BarSeries
-														key={ seriesData?.label }
-														dataKey={ seriesData?.label }
-														data={ seriesData.data as DataPointDate[] }
-														yAccessor={ chartOptions.accessors.yAccessor }
-														xAccessor={ chartOptions.accessors.xAccessor }
-														colorAccessor={ getBarBackground( index ) }
-													/>
-												) ) }
-											</BarGroup>
-										) }
+										<BarLayer
+											chartId={ chartId }
+											overlapSlots={ overlapSlots }
+											selectedBar={ selectedBar }
+											primaryEntries={ primaryEntries }
+											primaryKeys={ primaryKeys }
+											getBarBackground={ getBarBackground }
+											barClassName={ barClassName }
+											groupPadding={ groupPadding }
+											horizontal={ horizontal }
+											xAccessor={ chartOptions.accessors.xAccessor }
+											yAccessor={ chartOptions.accessors.yAccessor }
+										/>
 										{ /* Do not reorder: for one key the last showTooltip wins, so this must run after the primary series. */ }
 										{ ( withTooltips || onPointerDown || onPointerUp ) && (
 											<BandTooltip
-												keys={ primaryKeys }
+												keys={ overlapSlots?.keys ?? primaryKeys }
+												slots={ overlapBandSlots }
 												groupPadding={ groupPadding }
 												withTooltips={ withTooltips }
 												onPointerDown={ onPointerDown }
@@ -796,6 +783,12 @@ const BarChartInternal: FC< BarChartProps > = ( {
 											</WholeNumberTicks>
 										) }
 
+										{ withTooltips && selectedSlot && (
+											<SlotTooltipMembers
+												members={ selectedSlot.members }
+												index={ selectedSlot.index }
+											/>
+										) }
 										{ withTooltips && (
 											<XYChartTooltip
 												tooltipPlacement={ tooltipPlacement }
@@ -804,13 +797,16 @@ const BarChartInternal: FC< BarChartProps > = ( {
 												detectBounds
 												snapTooltipToDatumX
 												snapTooltipToDatumY
-												renderTooltip={ renderTooltip || renderDefaultTooltip }
+												renderTooltip={
+													renderTooltip ||
+													( isOverlap ? renderOverlapTooltip : renderDefaultTooltip )
+												}
 												selectedIndex={ selectedIndex }
 												tooltipRef={ tooltipRef }
 												keyboardFocusedClassName={
 													styles[ 'bar-chart__tooltip--keyboard-focused' ]
 												}
-												series={ primarySeries }
+												series={ stops.series }
 												mode="individual"
 											/>
 										) }

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

@@ -1,2 +1,5 @@
 export { default as BarChart, BarChartUnresponsive } from './bar-chart';
+export { useBarColors } from './use-bar-colors';
+export { useBarLegendItems } from './use-bar-legend-items';
+export type { BarLegendOptions } from './use-bar-legend-items';
 export type { BarChartProps, BandHighlightSelection } from './types';

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

@@ -40,7 +40,8 @@ export function nearestBandIndex< Datum >(
 /**
  * Correct visx's range-based band inversion, which omits outer padding.
  * @param root0               - Registered series selection.
- * @param root0.keys          - Visible series keys.
+ * @param root0.keys          - Visible series keys, back to front where bars overlap.
+ * @param root0.slots         - Where series share slots: the slots of a category, in the order the band lays them out, and the slot each series sits in.
  * @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.
@@ -50,6 +51,7 @@ export function nearestBandIndex< Datum >(
  */
 export function BandTooltip( {
 	keys,
+	slots,
 	groupPadding,
 	withTooltips,
 	onPointerDown,
@@ -57,16 +59,17 @@ export function BandTooltip( {
 	onPointerMove,
 }: {
 	keys: string[];
+	slots?: { keys: string[]; slotOf: ( key: string ) => string };
 	groupPadding: number;
 	onPointerMove?: ( selection: PointerSelection ) => void;
 } & Pick< BarChartProps, 'withTooltips' | 'onPointerDown' | 'onPointerUp' > ) {
 	const { xScale, yScale, dataRegistry, horizontal } = useContext( DataContext );
-	const { showTooltip } = useContext( TooltipContext );
+	const { showTooltip, hideTooltip, updateTooltip } = 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 ]
+		() => createGroupScale( slots?.keys ?? keys, bandwidth, groupPadding ),
+		[ slots, keys, bandwidth, groupPadding ]
 	);
 	const getSelections = useCallback(
 		( params: Parameters< PointerHandler >[ 0 ] ) => {
@@ -74,28 +77,26 @@ export function BandTooltip( {
 			if ( ! point || ! scale?.bandwidth ) {
 				return [];
 			}
+			const position = horizontal ? point.y : point.x;
 			const selections: PointerSelection[] = [];
+			const bands: number[] = [];
 			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
-				);
+				const index = nearestBandIndex( entry.data, accessor, scale, position );
 				if ( index < 0 ) {
 					continue;
 				}
 				const datum = entry.data[ index ];
-				const start = Number( scale( accessor( datum ) ) ) + Number( groupScale( key ) );
+				const band = Number( scale( accessor( datum ) ) );
+				const start = band + Number( groupScale( slots ? slots.slotOf( key ) : 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 );
+				bands.push( band );
 				selections.push( {
 					event: params.event,
 					key,
@@ -106,9 +107,19 @@ export function BandTooltip( {
 					distanceY: horizontal ? distance : 0,
 				} );
 			}
-			return selections;
+			if ( ! slots ) {
+				return selections;
+			}
+			// A series without a datum at the hovered category must not lend the tooltip a neighbor's.
+			const bandDistance = ( band: number ) => Math.abs( band + scale.bandwidth() / 2 - position );
+			const hoveredBand = bands.reduce< number | undefined >(
+				( best, band ) =>
+					best === undefined || bandDistance( band ) < bandDistance( best ) ? band : best,
+				undefined
+			);
+			return selections.filter( ( _, index ) => bands[ index ] === hoveredBand );
 		},
-		[ scale, dataRegistry, horizontal, keys, groupScale ]
+		[ scale, dataRegistry, horizontal, keys, slots, groupScale ]
 	);
 	const handlePointer = useCallback< PointerHandler >(
 		params => {
@@ -125,6 +136,10 @@ export function BandTooltip( {
 				onPointerMove?.( nearest );
 			}
 			if ( withTooltips && params?.event.type !== 'pointerup' ) {
+				if ( slots ) {
+					// visx merges each datum into the previous tooltip's, which would keep a bar the pointer has left.
+					updateTooltip( state => ( { ...state, tooltipData: undefined } ) );
+				}
 				selections.forEach( showTooltip );
 			}
 			const callback = params?.event.type === 'pointerdown' ? onPointerDown : onPointerUp;
@@ -135,9 +150,20 @@ export function BandTooltip( {
 				callback( nearest );
 			}
 		},
-		[ getSelections, withTooltips, showTooltip, onPointerDown, onPointerUp, onPointerMove ]
+		[
+			getSelections,
+			withTooltips,
+			slots,
+			showTooltip,
+			updateTooltip,
+			onPointerDown,
+			onPointerUp,
+			onPointerMove,
+		]
 	);
 	useEventEmitter( 'pointermove', withTooltips ? handlePointer : undefined );
+	// Slotted bars subscribe to no events, so nothing else closes the tooltip when the pointer leaves.
+	useEventEmitter( 'pointerout', withTooltips && slots ? hideTooltip : undefined );
 	useEventEmitter( 'pointerdown', handlePointer );
 	useEventEmitter( 'pointerup', onPointerUp ? handlePointer : undefined );
 	return null;