@automattic/charts 4.13.0 → 4.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.13.0",
+	"version": "4.15.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,8 +63,8 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.2.12",
-		"@babel/runtime": "7.29.7",
+		"@automattic/number-formatters": "^1.3.0",
+		"@babel/runtime": "7.29.10",
 		"@date-fns/tz": "1.5.0",
 		"@react-spring/web": "10.1.2",
 		"@visx/annotation": "^4.0.0",
@@ -83,10 +83,10 @@
 		"@visx/tooltip": "^4.0.0",
 		"@visx/vendor": "^4.0.0",
 		"@visx/xychart": "^4.0.0",
-		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/icons": "^18.0.0",
-		"@wordpress/theme": "2.3.0",
-		"@wordpress/ui": "0.24.0",
+		"@wordpress/i18n": "^7.0.0",
+		"@wordpress/icons": "^20.0.0",
+		"@wordpress/theme": "4.0.0",
+		"@wordpress/ui": "0.26.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -111,9 +111,10 @@
 		"@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",
-		"@wordpress/element": "9.0.0",
-		"@wordpress/private-apis": "2.0.0",
+		"@wordpress/components": "44.0.0",
+		"@wordpress/element": "10.1.0",
+		"@wordpress/private-apis": "3.1.0",
+		"@wordpress/theme-build-tools": "1.0.0",
 		"babel-jest": "30.5.2",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.5.2",

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

@@ -36,9 +36,10 @@ import { useChartChildren } from '../private/chart-composition';
 import { ChartInstanceContext, type ChartInstanceRef } from '../private/chart-instance-context';
 import { ChartLayout } from '../private/chart-layout';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
+import { hasOnlyWholeNumbers, TickDecimals } from '../private/tick-decimals';
 import { getCurveType } from '../private/time-axis';
 import { buildTimeAxisOptions } from '../private/time-axis-options';
-import { hasOnlyWholeNumbers, WholeNumberTicks } from '../private/whole-number-ticks';
+import { useCompactWhenShort } from '../private/use-compact-when-short';
 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';
@@ -82,6 +83,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 			children,
 			gridVisibility,
 			gap = 'md',
+			compactWhenShort = false,
 		},
 		ref
 	) => {
@@ -109,6 +111,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 		} );
 
 		const { legendChildren, nonLegendChildren } = useChartChildren( children, 'AreaChart' );
+		const { isCompact, compactMargin } = useCompactWhenShort( compactWhenShort, height );
 		const [ measuredChartHeight, setMeasuredChartHeight ] = useState< number | undefined >();
 
 		const handleContentHeightChange = useCallback(
@@ -227,22 +230,26 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 		const chartOptions = useMemo( () => {
 			return {
 				axis: {
-					x: buildTimeAxisOptions( {
-						dataSorted,
-						width,
-						axisOptions: options?.axis?.x,
-						scaleDomain: options?.xScale?.domain,
-						zoomDomain: zoom.domain,
-						formatting,
-						// No `isSeriesRendered`: a hidden area stays mounted with a zeroed
-						// yAccessor, so it still contributes to the x domain.
-					} ),
+					x: {
+						...buildTimeAxisOptions( {
+							dataSorted,
+							width,
+							axisOptions: options?.axis?.x,
+							scaleDomain: options?.xScale?.domain,
+							zoomDomain: zoom.domain,
+							formatting,
+							// No `isSeriesRendered`: a hidden area stays mounted with a zeroed
+							// yAccessor, so it still contributes to the x domain.
+						} ),
+						...( isCompact && { display: false } ),
+					},
 					y: {
 						orientation: 'left' as const,
 						numTicks: 4,
 						tickFormat: formatNumberCompact as TickFormatter< number >,
 						display: true,
 						...options?.axis?.y,
+						...( isCompact && { display: false } ),
 					},
 				},
 				xScale: {
@@ -259,7 +266,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 					...options?.yScale,
 				},
 			};
-		}, [ options, dataSorted, width, stacked, fixedYDomain, zoom.domain, formatting ] );
+		}, [ options, dataSorted, width, stacked, fixedYDomain, zoom.domain, formatting, isCompact ] );
 
 		const defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme );
 
@@ -357,7 +364,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 			return <div className={ clsx( 'area-chart', styles[ 'area-chart' ] ) }>{ error }</div>;
 		}
 
-		const legendElement = showLegend && (
+		const legendElement = showLegend && ! isCompact && (
 			<Legend
 				orientation={ legend.orientation ?? 'horizontal' }
 				alignment={ legend.alignment ?? 'center' }
@@ -416,7 +423,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 				<ChartLayout
 					legendPosition={ legendPosition }
 					legendElement={ legendElement }
-					legendChildren={ legendChildren }
+					legendChildren={ isCompact ? [] : legendChildren }
 					gap={ gap }
 					className={ clsx(
 						'area-chart',
@@ -451,7 +458,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 											theme={ theme }
 											width={ width }
 											height={ chartHeight }
-											margin={ { ...defaultMargin, ...margin } }
+											margin={ { ...defaultMargin, ...compactMargin, ...margin } }
 											xScale={ chartOptions.xScale }
 											yScale={ chartOptions.yScale }
 											onPointerDown={ zoom.handlers.onPointerDown }
@@ -463,18 +470,20 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 											{ /* With every series hidden the value scale collapses, so the grid and axes
 											     are dropped while the empty state stands in — otherwise they render
 											     squished at the top. */ }
-											<WholeNumberTicks
+											<TickDecimals
 												axis="y"
 												numTicks={ chartOptions.axis.y.numTicks }
-												enabled={
+												decimals={
 													hasWholeNumberValues &&
 													! chartOptions.axis.y.tickValues &&
 													! options?.yScale?.domain
+														? 0
+														: undefined
 												}
 											>
 												{ tickValues => (
 													<>
-														{ ! allSeriesHidden && gridVisibility !== 'none' && (
+														{ ! allSeriesHidden && gridVisibility !== 'none' && ! isCompact && (
 															<Grid
 																columns={ false }
 																numTicks={ chartOptions.axis.y.numTicks }
@@ -492,7 +501,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 														) }
 													</>
 												) }
-											</WholeNumberTicks>
+											</TickDecimals>
 
 											{ allSeriesHidden ? (
 												<SvgEmptyState
@@ -501,7 +510,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 													width={ width }
 													height={ chartHeight }
 												>
-													{ getAllHiddenMessage( legendInteractive, 'series' ) }
+													{ getAllHiddenMessage( legendInteractive && ! isCompact, 'series' ) }
 												</SvgEmptyState>
 											) : null }
 

package/src/charts/area-chart/types.ts

@@ -5,12 +5,14 @@ import type {
 	SeriesData,
 	SeriesChartLegendConfig,
 	SeriesVisibilityProps,
+	CompactWhenShortProps,
 } from '../../types';
 import type { RenderTooltipParams } from '../../visx/types';
 import type { CurveType } from '../line-chart/types';
 import type { ReactNode } from 'react';
 
-export interface AreaChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
+export interface AreaChartProps
+	extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps, CompactWhenShortProps {
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */

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

@@ -50,4 +50,42 @@
 			transform: scaleX(1);
 		}
 	}
+
+	// A stack rises as one bar and rounds only its outer end, keeping seams flush.
+	&--stacked :global(.visx-bar-group) rect {
+		rx: 0;
+		animation: none;
+	}
+
+	&--stacked :global(.visx-bar-group) rect[data-stack-end="top"] {
+		clip-path: inset(0 round var(--a8c-charts-border-radius-bar-chart) var(--a8c-charts-border-radius-bar-chart) 0 0);
+	}
+
+	&--stacked :global(.visx-bar-group) rect[data-stack-end="right"] {
+		clip-path: inset(0 round 0 var(--a8c-charts-border-radius-bar-chart) var(--a8c-charts-border-radius-bar-chart) 0);
+	}
+
+	&--stacked :global(.visx-bar-group) rect[data-stack-end="bottom"] {
+		clip-path: inset(0 round 0 0 var(--a8c-charts-border-radius-bar-chart) var(--a8c-charts-border-radius-bar-chart));
+	}
+
+	&--stacked :global(.visx-bar-group) rect[data-stack-end="left"] {
+		clip-path: inset(0 round var(--a8c-charts-border-radius-bar-chart) 0 0 var(--a8c-charts-border-radius-bar-chart));
+	}
+
+	// A stack grows from the zero line, set inline as `transform-origin`;
+	// with negatives, the group box's own edge is not that line.
+	&--stacked#{&}--animated :global(.visx-bar-group) {
+		transform-box: view-box;
+		animation:
+			rise var(--a8c-charts-motion-duration-entrance)
+			var(--a8c-charts-motion-easing-entrance) both;
+	}
+
+	&--stacked#{&}--animated-horizontal :global(.visx-bar-group) {
+		transform-box: view-box;
+		animation:
+			stretch var(--a8c-charts-motion-duration-entrance)
+			var(--a8c-charts-motion-easing-entrance) both;
+	}
 }

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

@@ -27,7 +27,8 @@ import { ChartInstanceContext } from '../private/chart-instance-context';
 import { ChartLayout } from '../private/chart-layout';
 import { formatReading, isInvalidReading } from '../private/readings';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
-import { hasOnlyWholeNumbers, WholeNumberTicks } from '../private/whole-number-ticks';
+import { getTickDecimals, hasOnlyWholeNumbers, TickDecimals } from '../private/tick-decimals';
+import { useCompactWhenShort } from '../private/use-compact-when-short';
 import { withResponsive } from '../private/with-responsive';
 import plotStyles from '../private/xy-plot/xy-plot.module.scss';
 import styles from './bar-chart.module.scss';
@@ -45,10 +46,11 @@ import {
 	isBarRendered,
 	SlotTooltipMembers,
 	useBarStops,
-	useOverlapSlots,
+	useBarSlots,
 	getSelectedSlot,
 	isSameCategory,
 	membersAt,
+	getDrawnSeries,
 } from './private';
 import { useBarColors } from './use-bar-colors';
 import { useBarLegendItems } from './use-bar-legend-items';
@@ -133,10 +135,37 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	animation,
 	children,
 	gap = 'md',
+	compactWhenShort = false,
 	onPointerDown,
 	onPointerUp,
 	onDatumActivate,
 } ) => {
+	if ( layout === 'stacked' && showZeroValues ) {
+		warnOnce(
+			'bar-chart-stacked-zero-values',
+			'BarChart: showZeroValues has no effect in a stacked layout.'
+		);
+	}
+	if ( layout === 'stacked' && data?.some( series => series.options?.type === 'comparison' ) ) {
+		warnOnce(
+			'bar-chart-stacked-comparison',
+			'BarChart: a stacked layout does not draw comparison series yet.'
+		);
+	}
+	const valueScaleOptions = orientation === 'horizontal' ? options.xScale : options.yScale;
+	if ( layout === 'stacked' && valueScaleOptions?.type && valueScaleOptions.type !== 'linear' ) {
+		warnOnce(
+			`bar-chart-stacked-${ valueScaleOptions.type }-scale`,
+			`BarChart: a stacked layout draws on a linear value scale, so the ${ valueScaleOptions.type } scale is ignored.`
+		);
+	}
+	if ( layout === 'stacked' && valueScaleOptions?.zero === false && ! valueScaleOptions.domain ) {
+		warnOnce(
+			'bar-chart-stacked-zero',
+			'BarChart: every stack starts at zero, so zero: false has no effect in a stacked layout.'
+		);
+	}
+
 	if ( ! withTooltips && ( withBandHighlight || onBandHighlightChange ) ) {
 		warnOnce(
 			'bar-chart-band-highlight-without-tooltips',
@@ -150,6 +179,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const legendComparisonSeriesItems = legend.comparisonSeriesItems;
 	const horizontal = orientation === 'horizontal';
 	const isOverlap = layout === 'overlap';
+	const isStacked = layout === 'stacked';
 	const chartId = useChartId( providedChartId );
 	const hiddenSeries = useDefaultHiddenSeries( chartId, defaultHiddenSeries );
 	const isSeriesVisible = useCallback(
@@ -158,12 +188,17 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	);
 	const theme = useXYChartTheme( data );
 
-	const dataSorted = useChartDataTransform( data );
+	const transformedData = useChartDataTransform( data );
+	// A stacked layout does not draw comparisons yet, so they must not shade a primary's color or join the legend either.
+	const dataSorted = useMemo(
+		() => getDrawnSeries( transformedData, layout ),
+		[ layout, transformedData ]
+	);
 
 	// Transform data to add a small value for zero bars to make them visible
 	// For vertical bars, height determines bar pixel height; for horizontal bars, width does
 	const dataWithVisibleZeros = useZeroValueDisplay( dataSorted, {
-		enabled: showZeroValues,
+		enabled: showZeroValues && ! isStacked,
 		valueAxisLength: horizontal ? width : height,
 	} );
 
@@ -206,35 +241,24 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ dataSorted, isSeriesRendered ]
 	);
 
-	const chartOptions = useBarChartOptions(
-		dataWithVisibleZeros,
-		horizontal,
-		options,
-		isSeriesRendered
+	const { isCompact, compactMargin } = useCompactWhenShort(
+		compactWhenShort && ! horizontal,
+		height
 	);
-	const valueAxis = horizontal ? chartOptions.axis.x : chartOptions.axis.y;
-	const callerValueDomain = horizontal ? options.xScale?.domain : options.yScale?.domain;
-	const wholeNumberTicksProps = {
-		axis: horizontal ? ( 'x' as const ) : ( 'y' as const ),
-		numTicks: valueAxis.numTicks,
-		enabled: hasWholeNumberValues && ! valueAxis.tickValues && ! callerValueDomain,
-	};
-	const defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );
-	const chartRef = useRef< HTMLDivElement >( null );
-
-	// Process children for composition API (Legend, etc.)
-	const { legendChildren, nonLegendChildren } = useChartChildren( children, 'BarChart' );
-	const [ measuredChartHeight, setMeasuredChartHeight ] = useState< number | undefined >();
-
-	const handleContentHeightChange = useCallback(
-		( contentHeight: number ) => {
-			const chartHeight = contentHeight > 0 ? contentHeight : height;
-			setMeasuredChartHeight( chartHeight );
-		},
-		[ height ]
+	const resolvedOptions = useMemo(
+		() =>
+			isCompact
+				? {
+						...options,
+						axis: {
+							...options.axis,
+							x: { ...options.axis?.x, display: false },
+							y: { ...options.axis?.y, display: false },
+						},
+					}
+				: options,
+		[ isCompact, options ]
 	);
-	const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );
-	const [ isNavigating, setIsNavigating ] = useState( false );
 
 	// Add visibility information from the shared legend state.
 	const seriesWithVisibility = useMemo(
@@ -261,7 +285,39 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ seriesWithVisibility ]
 	);
 
-	const overlapSlots = useOverlapSlots( isOverlap, seriesWithVisibility );
+	const barSlots = useBarSlots( layout, seriesWithVisibility );
+
+	const chartOptions = useBarChartOptions(
+		dataWithVisibleZeros,
+		horizontal,
+		resolvedOptions,
+		isSeriesRendered,
+		barSlots?.kind === 'stacked' ? barSlots.stack : undefined
+	);
+	const valueAxis = horizontal ? chartOptions.axis.x : chartOptions.axis.y;
+	const callerValueDomain = horizontal ? options.xScale?.domain : options.yScale?.domain;
+	const valueTickDecimals = getTickDecimals( hasWholeNumberValues, chartOptions.valueTickDecimals );
+	const tickDecimalsProps = {
+		axis: horizontal ? ( 'x' as const ) : ( 'y' as const ),
+		numTicks: valueAxis.numTicks,
+		decimals: ! valueAxis.tickValues && ! callerValueDomain ? valueTickDecimals : undefined,
+	};
+	const defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );
+	const chartRef = useRef< HTMLDivElement >( null );
+
+	// Process children for composition API (Legend, etc.)
+	const { legendChildren, nonLegendChildren } = useChartChildren( children, 'BarChart' );
+	const [ measuredChartHeight, setMeasuredChartHeight ] = useState< number | undefined >();
+
+	const handleContentHeightChange = useCallback(
+		( contentHeight: number ) => {
+			const chartHeight = contentHeight > 0 ? contentHeight : height;
+			setMeasuredChartHeight( chartHeight );
+		},
+		[ height ]
+	);
+	const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );
+	const [ isNavigating, setIsNavigating ] = useState( false );
 
 	const primaryKeys = useMemo(
 		() => primaryEntries.map( ( { series } ) => series.label ),
@@ -269,7 +325,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	);
 
 	// 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 stops = useBarStops( barSlots, primaryEntries );
 	const { barAt, stopOf } = stops;
 
 	const activateSelectedBar = useCallback(
@@ -305,8 +361,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	);
 
 	const comparisonEntries = useMemo( () => {
-		// An overlap layout draws its comparisons as slotted bars, not as shadows.
-		if ( isOverlap ) {
+		// An overlap layout draws its comparisons as slotted bars, and a stacked one does not draw them yet.
+		if ( barSlots ) {
 			return [];
 		}
 
@@ -333,7 +389,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			entries.push( { series, index, primaryKey: primary.label } );
 		} );
 		return entries;
-	}, [ isOverlap, seriesWithVisibility, primaryEntries, primaryKeys ] );
+	}, [ barSlots, 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.
@@ -429,6 +485,45 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ chartOptions.tooltip, dataSorted ]
 	);
 
+	// Lists the stack last series first, a null reading as "No data", then the total.
+	const renderStackedTooltip = useCallback(
+		( { tooltipData }: RenderTooltipParams< DataPointDate > ) => {
+			const nearestDatum = tooltipData?.nearestDatum?.datum;
+			if ( ! nearestDatum || barSlots?.kind !== 'stacked' ) return null;
+
+			const datumByKey = tooltipData?.datumByKey ?? {};
+			const categoryLabel = chartOptions.tooltip.labelFormatter(
+				nearestDatum.label || ( nearestDatum.date ? nearestDatum.date.getTime() : 0 ),
+				0,
+				[]
+			);
+
+			const rows = [ ...barSlots.entries ].reverse().flatMap( ( { series } ) => {
+				const datum = datumByKey[ series.label ]?.datum;
+				return datum ? [ { label: series.label, datum } ] : [];
+			} );
+			const readings = rows.filter( ( { datum } ) => isBarRendered( datum ) ).length;
+			const [ negative, positive ] = barSlots.stack.extentAt( nearestDatum );
+
+			return (
+				<div className={ styles[ 'bar-chart__tooltip' ] }>
+					<div className={ styles[ 'bar-chart__tooltip-header' ] }>{ categoryLabel }</div>
+					{ rows.map( ( { label, datum } ) => (
+						<Fragment key={ label }>
+							{ renderTooltipRow( label, formatReading( datum.value ) ) }
+						</Fragment>
+					) ) }
+					{ readings > 1 &&
+						renderTooltipRow(
+							__( 'Total', 'jetpack-charts' ),
+							formatReading( negative + positive )
+						) }
+				</div>
+			);
+		},
+		[ chartOptions.tooltip, barSlots ]
+	);
+
 	const renderDefaultTooltip = useCallback(
 		( { tooltipData }: RenderTooltipParams< DataPointDate > ) => {
 			const nearestDatum = tooltipData?.nearestDatum?.datum;
@@ -525,35 +620,40 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ chartId ]
 	);
 
-	const overlapBandSlots = useMemo(
-		() => overlapSlots && { keys: overlapSlots.slotKeys, slotOf: overlapSlots.slotOf },
-		[ overlapSlots ]
+	const barBandSlots = useMemo(
+		() =>
+			barSlots && {
+				keys: barSlots.slotKeys,
+				slotOf: barSlots.slotOf,
+				stack: barSlots.kind === 'stacked' ? barSlots.stack : undefined,
+			},
+		[ barSlots ]
 	);
 
 	const selectedSlot = useMemo(
-		() => getSelectedSlot( overlapSlots, selectedIndex ),
-		[ overlapSlots, selectedIndex ]
+		() => getSelectedSlot( barSlots, selectedIndex ),
+		[ barSlots, selectedIndex ]
 	);
 
 	const selectedGroup = useMemo( () => {
-		const stop = overlapSlots || selectedIndex === undefined ? undefined : barAt( selectedIndex );
+		const stop = barSlots || selectedIndex === undefined ? undefined : barAt( selectedIndex );
 		if ( ! stop ) {
 			return undefined;
 		}
 		return membersAt( primaryEntries, stop.datum, stop.key );
-	}, [ overlapSlots, selectedIndex, barAt, primaryEntries ] );
+	}, [ barSlots, selectedIndex, barAt, primaryEntries ] );
 
 	const selectedMembers = selectedSlot?.members ?? selectedGroup;
 
 	const selectedBar = useMemo( (): SelectedBar | undefined => {
-		if ( overlapSlots ) {
+		if ( barSlots ) {
 			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 ] );
+	}, [ barSlots, selectedSlot, selectedIndex, barAt ] );
 
 	// Validate data first
 	const error = validateData( dataSorted );
@@ -583,10 +683,10 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		return <div className={ clsx( 'bar-chart', styles[ 'bar-chart' ] ) }>{ error }</div>;
 	}
 
-	const gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;
+	const gridVisibility = isCompact ? 'none' : ( gridVisibilityProp ?? chartOptions.gridVisibility );
 
 	const legendPosition = legend.position ?? 'bottom';
-	const legendElement = showLegend && (
+	const legendElement = showLegend && ! isCompact && (
 		<Legend
 			orientation={ legend.orientation ?? 'horizontal' }
 			position={ legendPosition }
@@ -614,12 +714,13 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			<ChartLayout
 				legendPosition={ legendPosition }
 				legendElement={ legendElement }
-				legendChildren={ legendChildren }
+				legendChildren={ isCompact ? [] : legendChildren }
 				gap={ gap }
 				className={ clsx(
 					'bar-chart',
 					styles[ 'bar-chart' ],
 					{
+						[ styles[ 'bar-chart--stacked' ] ]: isStacked,
 						[ styles[ `bar-chart--animated${ horizontal ? '-horizontal' : '' }` ] ]:
 							animation && ! prefersReducedMotion,
 					},
@@ -654,6 +755,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 										height={ chartHeight }
 										margin={ {
 											...defaultMargin,
+											...compactMargin,
 											...margin,
 										} }
 										xScale={ xScale }
@@ -670,7 +772,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 										) }
 
 										{ ! allSeriesHidden && (
-											<WholeNumberTicks { ...wholeNumberTicksProps }>
+											<TickDecimals { ...tickDecimalsProps }>
 												{ valueTicks => (
 													<>
 														{ /* Visx forwards tickValues to its grid primitives but omits it from GridProps. */ }
@@ -696,7 +798,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 														/>
 													</>
 												) }
-											</WholeNumberTicks>
+											</TickDecimals>
 										) }
 
 										{ withPatterns && (
@@ -719,7 +821,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 												width={ width }
 												height={ chartHeight }
 											>
-												{ getAllHiddenMessage( legendInteractive, 'series' ) }
+												{ getAllHiddenMessage( legendInteractive && ! isCompact, 'series' ) }
 											</SvgEmptyState>
 										) : null }
 
@@ -740,7 +842,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 
 										<BarLayer
 											chartId={ chartId }
-											overlapSlots={ overlapSlots }
+											barSlots={ barSlots }
 											selectedBar={ selectedBar }
 											primaryEntries={ primaryEntries }
 											primaryKeys={ primaryKeys }
@@ -754,8 +856,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 										{ /* Do not reorder: for one key the last showTooltip wins, so this must run after the primary series. */ }
 										{ ( withTooltips || onPointerDown || onPointerUp ) && (
 											<BandTooltip
-												keys={ overlapSlots?.keys ?? primaryKeys }
-												slots={ overlapBandSlots }
+												keys={ barSlots?.keys ?? primaryKeys }
+												slots={ barBandSlots }
 												groupPadding={ groupPadding }
 												withTooltips={ withTooltips }
 												onPointerDown={ onPointerDown }
@@ -768,7 +870,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 										     visx collapses the domain and the axes render squished at the top. Drop them
 										     while the empty state stands in. */ }
 										{ ! allSeriesHidden && (
-											<WholeNumberTicks { ...wholeNumberTicksProps }>
+											<TickDecimals { ...tickDecimalsProps }>
 												{ valueTicks => (
 													<>
 														{ chartOptions.axis.x.display !== false && (
@@ -789,7 +891,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 														) }
 													</>
 												) }
-											</WholeNumberTicks>
+											</TickDecimals>
 										) }
 
 										{ withTooltips && selectedMembers && (
@@ -805,6 +907,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 												snapTooltipToDatumY
 												renderTooltip={
 													renderTooltip ||
+													( isStacked && renderStackedTooltip ) ||
 													( isOverlap ? renderOverlapTooltip : renderDefaultTooltip )
 												}
 												selectedIndex={ selectedIndex }