@automattic/charts 4.11.1 → 4.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.11.1",
+	"version": "4.13.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -66,7 +66,7 @@
 		"@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/area-chart/area-chart.tsx

@@ -13,6 +13,7 @@ import {
 } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { XYChartTooltip, useKeyboardNavigation } from '../../components/tooltip';
+import { getKeyboardStops } from '../../components/tooltip/private/keyboard-stops';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -144,14 +145,22 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 			[ seriesWithVisibility ]
 		);
 
+		const visibleDataSeries = useMemo(
+			() => dataSorted.filter( series => isSeriesVisible( series.label ) ),
+			[ dataSorted, isSeriesVisible ]
+		);
+
 		// A normalized stack (expand/wiggle/silhouette) turns whole-number data into
 		// fractions, so the filter is skipped for every offset but 'none'.
 		const hasWholeNumberValues = useMemo(
-			() =>
-				( ! stacked || stackOffset === 'none' ) &&
-				hasOnlyWholeNumbers( dataSorted.filter( series => isSeriesVisible( series.label ) ) ),
-			[ dataSorted, isSeriesVisible, stacked, stackOffset ]
+			() => ( ! stacked || stackOffset === 'none' ) && hasOnlyWholeNumbers( visibleDataSeries ),
+			[ visibleDataSeries, stacked, stackOffset ]
+		);
+		const visibleSeriesKey = useMemo(
+			() => JSON.stringify( visibleDataSeries.map( series => series.label ) ),
+			[ visibleDataSeries ]
 		);
+		const stops = useMemo( () => getKeyboardStops( visibleDataSeries ), [ visibleDataSeries ] );
 
 		const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
 			selectedIndex,
@@ -159,7 +168,8 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 			isNavigating,
 			setIsNavigating,
 			chartRef,
-			totalPoints: dataSorted[ 0 ]?.data.length || 0,
+			totalPoints: stops.count,
+			visibleSeriesKey,
 		} );
 
 		// Computed from the full data set (ignoring legend visibility) so the y-axis stays
@@ -526,7 +536,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 														keyboardFocusedClassName={
 															styles[ 'area-chart__tooltip--keyboard-focused' ]
 														}
-														series={ dataSorted }
+														series={ visibleDataSeries }
 													/>
 													<HoverGlyphs
 														visibleSeries={ visibleSeries }

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

@@ -879,12 +879,6 @@ describe( 'AreaChart', () => {
 		} );
 
 		test( 'renders glyphs only for series with a datum at the hovered x (mismatched x-domains)', async () => {
-			// Each series' data[0] is a different date. Keyboard nav fires
-			// showTooltip for every series at its own data[selectedIndex];
-			// the LAST one wins as the nearestDatum, so the resolved hover
-			// date is Series B's. HoverGlyphs should:
-			//   - Skip Series A (no datum at Series B's date) — cumulative += 0
-			//   - Render a glyph for Series B
 			renderWithProvider( {
 				data: [
 					{
@@ -901,9 +895,8 @@ describe( 'AreaChart', () => {
 
 			const glyphs = screen.getAllByTestId( /^area-chart-hover-glyph-/ );
 			expect( glyphs ).toHaveLength( 1 );
-			// Only Series B (index 1) has a datum at the hovered date.
-			expect( screen.getByTestId( 'area-chart-hover-glyph-1' ) ).toBeInTheDocument();
-			expect( screen.queryByTestId( 'area-chart-hover-glyph-0' ) ).not.toBeInTheDocument();
+			expect( screen.getByTestId( 'area-chart-hover-glyph-0' ) ).toBeInTheDocument();
+			expect( screen.queryByTestId( 'area-chart-hover-glyph-1' ) ).not.toBeInTheDocument();
 		} );
 	} );
 
@@ -1055,4 +1048,44 @@ describe( 'AreaChart', () => {
 			expect( screen.getAllByRole( 'button' )[ 1 ] ).toHaveAttribute( 'aria-pressed', 'true' );
 		} );
 	} );
+
+	it( 'gives no keyboard stop to a date only a hidden series has', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<GlobalChartsProvider>
+				<AreaChartUnresponsive
+					width={ 500 }
+					height={ 300 }
+					stacked={ false }
+					defaultHiddenSeries={ [ 'Series B' ] }
+					chartId="test-hidden-only-date-area"
+					data={ [
+						{
+							label: 'Series A',
+							data: [
+								{ date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' },
+								{ date: new Date( '2024-01-02' ), value: 20, label: 'Jan 2' },
+							],
+						},
+						{
+							label: 'Series B',
+							data: [
+								{ date: new Date( '2024-01-01' ), value: 5, label: 'Jan 1' },
+								{ date: new Date( '2024-01-03' ), value: 15, label: 'Jan 3' },
+							],
+						},
+					] }
+				/>
+			</GlobalChartsProvider>
+		);
+
+		screen.getByRole( 'application', { name: /area chart/i } ).focus();
+		await user.keyboard( '{ArrowRight}{ArrowRight}{ArrowRight}' );
+
+		await expect( screen.findByRole( 'tooltip' ) ).resolves.toHaveAttribute(
+			'data-testid',
+			'chart-tooltip-1'
+		);
+	} );
 } );

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,24 @@ 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,
+	isSameCategory,
+	membersAt,
 } 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 +124,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	barClassName,
 	options = {},
 	orientation = 'vertical',
+	layout = 'grouped',
 	withPatterns = false,
 	showZeroValues = false,
 	withBandHighlight = false,
@@ -141,6 +149,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 +173,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 +261,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 +289,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 +330,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 +385,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(
@@ -405,12 +444,9 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			// Find the comparison value paired with the hovered primary series (same group)
 			// at the same category, so the tooltip can show both periods at once.
 			const comparisonEntry = comparisonEntries.find( entry => entry.primaryKey === primaryKey );
-			const comparisonDatum = comparisonEntry?.series.data.find( point => {
-				const p = point as DataPointDate;
-				return nearestDatum.label != null
-					? p.label === nearestDatum.label
-					: !! nearestDatum.date && !! p.date && p.date.getTime() === nearestDatum.date.getTime();
-			} ) as DataPointDate | undefined;
+			const comparisonDatum = comparisonEntry?.series.data.find( point =>
+				isSameCategory( point as DataPointDate, nearestDatum )
+			) as DataPointDate | undefined;
 
 			// With a paired comparison value, show the category as the header and one row
 			// per period (primary + comparison).
@@ -489,44 +525,35 @@ 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 selectedGroup = useMemo( () => {
+		const stop = overlapSlots || selectedIndex === undefined ? undefined : barAt( selectedIndex );
+		if ( ! stop ) {
+			return undefined;
 		}
+		return membersAt( primaryEntries, stop.datum, stop.key );
+	}, [ overlapSlots, selectedIndex, barAt, primaryEntries ] );
 
-		// 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;
-			}
-		`;
+	const selectedMembers = selectedSlot?.members ?? selectedGroup;
 
-		return generatedStyles;
-	}, [ selectedIndex, primaryEntries, chartId ] );
+	const selectedBar = useMemo( (): SelectedBar | undefined => {
+		if ( overlapSlots ) {
+			return selectedSlot;
+		}
+		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 +584,6 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	}
 
 	const gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;
-	const highlightedBarStyle = createKeyboardHighlightStyle();
 
 	const legendPosition = legend.position ?? 'bottom';
 	const legendElement = showLegend && (
@@ -676,30 +702,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 +738,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 +792,9 @@ const BarChartInternal: FC< BarChartProps > = ( {
 											</WholeNumberTicks>
 										) }
 
+										{ withTooltips && selectedMembers && (
+											<SlotTooltipMembers members={ selectedMembers } />
+										) }
 										{ withTooltips && (
 											<XYChartTooltip
 												tooltipPlacement={ tooltipPlacement }
@@ -804,13 +803,15 @@ 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 }
 												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';