@automattic/charts 4.13.0 → 4.15.0

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

@@ -1,7 +1,10 @@
 import { DataContext, TooltipContext, useEventEmitter } from '@visx/xychart';
 import { useCallback, useContext, useMemo } from 'react';
 import { createGroupScale } from './band-scale';
+import { getValueScalePosition } from './comparison-bars-geometry';
 import type { BandScale } from './band-scale';
+import type { ValueScale } from './comparison-bars-geometry';
+import type { StackLayout, StackSegment } from './stack-layout';
 import type { BarChartProps } from '../types';
 
 type PointerHandler = NonNullable< Parameters< typeof useEventEmitter >[ 1 ] >;
@@ -37,11 +40,33 @@ export function nearestBandIndex< Datum >(
 	return nearest;
 }
 
+/**
+ * How far a pointer sits from a stacked segment along the value axis.
+ *
+ * @param segment  - The segment, or undefined when its series has no reading there.
+ * @param scale    - The value scale.
+ * @param position - Pointer coordinate on the value axis.
+ * @return 0 inside the segment, Infinity without one, otherwise the gap to its nearer end.
+ */
+function distanceToSegment(
+	segment: StackSegment | undefined,
+	scale: ValueScale,
+	position: number
+): number {
+	if ( ! segment ) {
+		return Infinity;
+	}
+	const [ low, high ] = [ segment.start, segment.end ]
+		.map( value => getValueScalePosition( scale, value ) )
+		.sort( ( a, b ) => a - b );
+	return Math.max( low - position, 0, position - high );
+}
+
 /**
  * Correct visx's range-based band inversion, which omits outer padding.
  * @param root0               - Registered series selection.
  * @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.slots         - Where series share slots: the slots of a category, in the order the band lays them out, the slot each series sits in, and for a stack where each segment runs.
  * @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.
@@ -59,13 +84,14 @@ export function BandTooltip( {
 	onPointerMove,
 }: {
 	keys: string[];
-	slots?: { keys: string[]; slotOf: ( key: string ) => string };
+	slots?: { keys: string[]; slotOf: ( key: string ) => string; stack?: StackLayout };
 	groupPadding: number;
 	onPointerMove?: ( selection: PointerSelection ) => void;
 } & Pick< BarChartProps, 'withTooltips' | 'onPointerDown' | 'onPointerUp' > ) {
 	const { xScale, yScale, dataRegistry, horizontal } = useContext( DataContext );
 	const { showTooltip, hideTooltip, updateTooltip } = useContext( TooltipContext );
 	const scale = ( horizontal ? yScale : xScale ) as BandScale | undefined;
+	const valueScale = ( horizontal ? xScale : yScale ) as ValueScale | undefined;
 	const bandwidth = scale?.bandwidth?.() ?? 0;
 	const groupScale = useMemo(
 		() => createGroupScale( slots?.keys ?? keys, bandwidth, groupPadding ),
@@ -96,6 +122,15 @@ export function BandTooltip( {
 				const end = start + groupScale.step();
 				const distance =
 					position >= start && position <= end ? 0 : Math.abs( position - ( start + end ) / 2 );
+				// Stacked segments share a slot, so the value axis tells them apart; one with no reading loses to any that has one.
+				const valueDistance =
+					slots?.stack && valueScale
+						? distanceToSegment(
+								slots.stack.segmentOf( key, datum ),
+								valueScale,
+								horizontal ? point.x : point.y
+							)
+						: 0;
 				bands.push( band );
 				selections.push( {
 					event: params.event,
@@ -103,8 +138,8 @@ export function BandTooltip( {
 					datum,
 					index,
 					svgPoint: point,
-					distanceX: horizontal ? 0 : distance,
-					distanceY: horizontal ? distance : 0,
+					distanceX: horizontal ? valueDistance : distance,
+					distanceY: horizontal ? distance : valueDistance,
 				} );
 			}
 			if ( ! slots ) {
@@ -119,7 +154,7 @@ export function BandTooltip( {
 			);
 			return selections.filter( ( _, index ) => bands[ index ] === hoveredBand );
 		},
-		[ scale, dataRegistry, horizontal, keys, slots, groupScale ]
+		[ scale, valueScale, dataRegistry, horizontal, keys, slots, groupScale ]
 	);
 	const handlePointer = useCallback< PointerHandler >(
 		params => {

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

@@ -1,14 +1,18 @@
-import { BarGroup, BarSeries } from '@visx/xychart';
+import { BarGroup, BarSeries, DataContext } from '@visx/xychart';
+import { useContext } from 'react';
 import ClassifiedBarSeries from './classified-bar-series';
+import { getValueScalePosition } from './comparison-bars-geometry';
 import { SelectedBarRing } from './selected-bar-ring';
 import SlottedBarSeries from './slotted-bar-series';
+import StackedBarSeries from './stacked-bar-series';
+import type { ValueScale } from './comparison-bars-geometry';
 import type { SelectedBar } from './selected-bar-ring';
-import type { OverlapSlots } from './use-overlap-slots';
+import type { BarSlots } from './use-bar-slots';
 import type { DataPointDate, SeriesData } from '../../../types';
 import type { BarChartProps } from '../types';
 import type { AxisScale } from '@visx/axis';
 import type { SeriesProps } from '@visx/xychart';
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 
 type Accessors = Pick<
 	SeriesProps< AxisScale, AxisScale, DataPointDate >,
@@ -17,7 +21,7 @@ type Accessors = Pick<
 
 type Props = Accessors & {
 	chartId: string;
-	overlapSlots: OverlapSlots | undefined;
+	barSlots: BarSlots | undefined;
 	selectedBar: SelectedBar | undefined;
 	primaryEntries: { series: SeriesData; index: number }[];
 	primaryKeys: string[];
@@ -28,11 +32,40 @@ type Props = Accessors & {
 };
 
 /**
- * Draws the bars in front of any comparison shadows, slotted for an overlap layout and grouped by visx otherwise, then the selected bar's ring.
+ * Wraps the stacked bars so the entrance animation grows them from the zero line.
+ *
+ * Reading the scales here, not in `BarLayer`, keeps the series' own data registration from re-rendering it in a loop.
+ *
+ * @param props            - Component props.
+ * @param props.horizontal - Whether the bars run horizontally.
+ * @param props.children   - The stacked series.
+ * @return The group.
+ */
+const StackedBarGroup: FC< { horizontal: boolean; children: ReactNode } > = ( {
+	horizontal,
+	children,
+} ) => {
+	const { xScale, yScale } = useContext( DataContext );
+	const valueScale = ( horizontal ? xScale : yScale ) as ValueScale | undefined;
+	const zero = valueScale ? getValueScalePosition( valueScale, 0 ) : 0;
+
+	return (
+		<g
+			className="visx-bar-group"
+			data-testid="bar-chart-stack-group"
+			style={ { transformOrigin: horizontal ? `${ zero }px 0` : `0 ${ zero }px` } }
+		>
+			{ children }
+		</g>
+	);
+};
+
+/**
+ * Draws the bars in front of any comparison shadows, stacked or slotted in the layout's slots and grouped by visx otherwise, then the selected bar's ring.
  *
  * @param props                  - Component props.
  * @param props.chartId          - The chart's id, which keeps the ring's clip path unique on a page with several charts.
- * @param props.overlapSlots     - The overlap layout, or undefined for a grouped one.
+ * @param props.barSlots         - The overlap or stacked slots, or undefined for a grouped layout.
  * @param props.selectedBar      - The bar or slot the keyboard has selected.
  * @param props.primaryEntries   - The visible primary series, for a grouped layout.
  * @param props.primaryKeys      - Their labels, in group order.
@@ -46,7 +79,7 @@ type Props = Accessors & {
  */
 export const BarLayer: FC< Props > = ( {
 	chartId,
-	overlapSlots,
+	barSlots,
 	selectedBar,
 	primaryEntries,
 	primaryKeys,
@@ -58,10 +91,30 @@ export const BarLayer: FC< Props > = ( {
 	yAccessor,
 } ) => {
 	let bars;
-	if ( overlapSlots ) {
+	if ( barSlots?.kind === 'stacked' ) {
+		bars = (
+			<StackedBarGroup horizontal={ horizontal }>
+				{ barSlots.entries.map( ( { series, index } ) => (
+					<StackedBarSeries
+						key={ series.label }
+						dataKey={ series.label }
+						data={ series.data as DataPointDate[] }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						colorAccessor={ getBarBackground( index ) }
+						barClassName={ barClassName }
+						slotKeys={ barSlots.slotKeys }
+						slotKey={ barSlots.slotOf( series.label ) }
+						groupPadding={ groupPadding }
+						stack={ barSlots.stack }
+					/>
+				) ) }
+			</StackedBarGroup>
+		);
+	} else if ( barSlots ) {
 		bars = (
 			<g className="visx-bar-group">
-				{ overlapSlots.entries.map( ( { series, index } ) => (
+				{ barSlots.entries.map( ( { series, index } ) => (
 					<SlottedBarSeries
 						key={ series.label }
 						dataKey={ series.label }
@@ -70,9 +123,9 @@ export const BarLayer: FC< Props > = ( {
 						yAccessor={ yAccessor }
 						colorAccessor={ getBarBackground( index ) }
 						barClassName={ barClassName }
-						slotKeys={ overlapSlots.slotKeys }
-						slotKey={ overlapSlots.slotOf( series.label ) }
-						thickness={ overlapSlots.thicknessOf( series.label ) }
+						slotKeys={ barSlots.slotKeys }
+						slotKey={ barSlots.slotOf( series.label ) }
+						thickness={ barSlots.thicknessOf( series.label ) }
 						groupPadding={ groupPadding }
 					/>
 				) ) }
@@ -120,7 +173,7 @@ export const BarLayer: FC< Props > = ( {
 				<SelectedBarRing
 					chartId={ chartId }
 					selected={ selectedBar }
-					slotKeys={ overlapSlots?.slotKeys ?? primaryKeys }
+					slotKeys={ barSlots?.slotKeys ?? primaryKeys }
 					groupPadding={ groupPadding }
 					horizontal={ horizontal }
 					xAccessor={ xAccessor }

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

@@ -0,0 +1,25 @@
+import type { DataPointDate } from '../../../types';
+
+/**
+ * Whether two data points sit at the same category: the same label, or the same date.
+ *
+ * @param point    - A data point.
+ * @param category - The data point naming the category.
+ * @return Whether `point` is at `category`.
+ */
+export function isSameCategory( point: DataPointDate, category: DataPointDate ): boolean {
+	// An empty label falls back to the date, as the band axis's accessor does.
+	return category.label
+		? point.label === category.label
+		: !! category.date && !! point.date && point.date.getTime() === category.date.getTime();
+}
+
+/**
+ * The category a data point sits at, as a key two points share when `isSameCategory` holds.
+ *
+ * @param point - A data point.
+ * @return The category key.
+ */
+export function categoryKey( point: DataPointDate ): string {
+	return point.label ? `label:${ point.label }` : `date:${ point.date?.getTime() }`;
+}

package/src/charts/bar-chart/private/comparison-bars-geometry.ts

@@ -1,6 +1,6 @@
 export type SlotRect = { x: number; y: number; width: number; height: number };
 
-type ValueScale = ( ( v: number ) => number ) & { range: () => unknown[] };
+export type ValueScale = ( ( v: number ) => number ) & { range: () => unknown[] };
 
 /**
  * Mirrors visx's getScaleBaseline so bars drawn outside visx share the baseline of its bars, including out-of-domain zero values.
@@ -21,6 +21,18 @@ export function getValueScaleBaseline( scale: ValueScale ): number {
 	return Number.isFinite( maybeZero ) ? Math.max( maybeZero, minOutput ) : minOutput;
 }
 
+/**
+ * A value's position on a continuous scale, held inside its range so a domain that leaves the value out cannot push a bar off the plot.
+ *
+ * @param {ValueScale} scale - The continuous value scale.
+ * @param {number}     value - The value to place.
+ * @return {number} The position in pixels.
+ */
+export function getValueScalePosition( scale: ValueScale, value: number ): number {
+	const [ a, b ] = scale.range().map( r => Number( r ) || 0 );
+	return Math.min( Math.max( scale( value ), Math.min( a, b ) ), Math.max( a, b ) );
+}
+
 /**
  * Compute the rect that spans `valuePositions` along the value axis, centered on a slot and scaled by `widthFactor` across it.
  *

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

@@ -5,7 +5,9 @@ export { default as SlottedBarSeries } from './slotted-bar-series';
 export { BarLayer } from './bar-layer';
 export { SelectedBarRing, type SelectedBar } from './selected-bar-ring';
 export { SlotTooltipMembers, type SlotMember } from './slot-tooltip-members';
-export { useOverlapSlots, getSelectedSlot, isSameCategory, membersAt } from './use-overlap-slots';
+export { useBarSlots, getSelectedSlot, membersAt } from './use-bar-slots';
+export { isSameCategory } from './category';
+export { getDrawnSeries } from './stack-layout';
 export { useBarStops } from './use-bar-stops';
 export { ComparisonBars } from './comparison-bars';
 export type { ComparisonSeriesEntry } from './comparison-bars';

package/src/charts/bar-chart/private/selected-bar-ring.tsx

@@ -2,19 +2,25 @@ import { DataContext } from '@visx/xychart';
 import { useContext } from 'react';
 import { SelectedRing } from '../../private/selected-ring/selected-ring';
 import { createGroupScale } from './band-scale';
-import { computeSlotRect, getValueScaleBaseline } from './comparison-bars-geometry';
+import {
+	computeSlotRect,
+	getValueScaleBaseline,
+	getValueScalePosition,
+} from './comparison-bars-geometry';
 import type { BandScale } from './band-scale';
 import type { DataPointDate } from '../../../types';
 import type { FC } from 'react';
 
 /** The slot the keyboard has selected. */
 export type SelectedBar = {
-	/** The data of the bars the slot draws at the selected category, which the ring encloses; only bars the chart draws (a finite value). */
+	/** The data of the bars the slot draws at the selected category, which the ring encloses unless `valueExtent` is set; only bars the chart draws (a finite value). */
 	data: DataPointDate[];
 	/** The selected slot. */
 	slotKey: string;
 	/** The thickness of the slot's widest bar, as a share of the slot. */
 	thickness: number;
+	/** The values the ring spans instead of the baseline and each bar's value, for a stack. */
+	valueExtent?: [ number, number ];
 };
 
 type AnyScale = ( ( input: unknown ) => number ) &
@@ -61,16 +67,21 @@ export const SelectedBarRing: FC< {
 		return null;
 	}
 
-	const valuePositions = selected.data.map( datum =>
-		Number( valueScale( Number( ( horizontal ? xAccessor : yAccessor )( datum ) ) as never ) )
-	);
+	const valuePositions = selected.valueExtent
+		? selected.valueExtent.map( value => getValueScalePosition( valueScale, value ) )
+		: [
+				getValueScaleBaseline( valueScale ),
+				...selected.data.map( datum =>
+					Number( valueScale( Number( ( horizontal ? xAccessor : yAccessor )( datum ) ) as never ) )
+				),
+			];
 
 	const rect = computeSlotRect( {
 		horizontal,
 		bandPosition,
 		slotOffset,
 		slotThickness: groupScale.bandwidth(),
-		valuePositions: [ getValueScaleBaseline( valueScale ), ...valuePositions ],
+		valuePositions,
 		widthFactor: selected.thickness,
 	} );
 	return (

package/src/charts/bar-chart/private/stack-layout.ts

@@ -0,0 +1,99 @@
+import { getTickDecimalsDomain } from '../../private/tick-decimals';
+import { categoryKey } from './category';
+import { EMPTY_DOMAIN, getBarValue } from './value-domain';
+import type { BarChartLayout, DataPointDate, SeriesData } from '../../../types';
+
+/** Where a bar runs along the value axis: from where the stack reached before it, to where it ends. */
+export type StackSegment = { start: number; end: number };
+
+/** The one source of a stacked layout's value-axis positions, for its bars, ring, tooltip and domain. */
+export type StackLayout = {
+	/** Where a series' bar runs at a datum's category; undefined when that datum has no reading. */
+	segmentOf: ( key: string, datum: DataPointDate ) => StackSegment | undefined;
+	/** The lowest negative sum and highest positive sum at the datum's category, both including 0. */
+	extentAt: ( category: DataPointDate ) => [ number, number ];
+	/** The widest `extentAt` over every category, or null without a finite value. */
+	extent: [ number, number ] | null;
+};
+
+/**
+ * The series a layout draws: a stacked layout leaves comparison series out for now.
+ *
+ * @param series - The chart's series.
+ * @param layout - The layout the bars are drawn in.
+ * @return The drawn series.
+ */
+export function getDrawnSeries< T extends SeriesData >(
+	series: T[],
+	layout?: BarChartLayout
+): T[] {
+	return layout === 'stacked'
+		? series.filter( item => item.options?.type !== 'comparison' )
+		: series;
+}
+
+/**
+ * Stacks the series in order at each category: positives upward and negatives downward from zero.
+ *
+ * @param series - The series to stack, bottom first.
+ * @return The stack layout.
+ */
+export function getStackLayout( series: SeriesData[] ): StackLayout {
+	const segments = new Map< string, Map< string, StackSegment > >();
+	const extents = new Map< string, [ number, number ] >();
+
+	for ( const { label, data } of series ) {
+		const byCategory = new Map< string, StackSegment >();
+		segments.set( label, byCategory );
+		for ( const point of data as DataPointDate[] ) {
+			const value = getBarValue( point );
+			if ( ! Number.isFinite( value ) ) {
+				continue;
+			}
+			const key = categoryKey( point );
+			// A repeated category is invalid data; skipping it keeps the bars, total and tooltip in step.
+			if ( byCategory.has( key ) ) {
+				continue;
+			}
+			const extent = extents.get( key ) ?? [ 0, 0 ];
+			const side = value < 0 ? 0 : 1;
+			const start = extent[ side ];
+			extent[ side ] = start + value;
+			extents.set( key, extent );
+			byCategory.set( key, { start, end: start + value } );
+		}
+	}
+
+	let extent: [ number, number ] | null = null;
+	for ( const [ low, high ] of extents.values() ) {
+		extent = extent
+			? [ Math.min( extent[ 0 ], low ), Math.max( extent[ 1 ], high ) ]
+			: [ low, high ];
+	}
+
+	return {
+		segmentOf: ( key, datum ) => segments.get( key )?.get( categoryKey( datum ) ),
+		extentAt: category => {
+			const [ low, high ] = extents.get( categoryKey( category ) ) ?? [ 0, 0 ];
+			return [ low, high ];
+		},
+		extent,
+	};
+}
+
+/**
+ * The value domain of a computed stack, falling back to an empty chart's domain.
+ *
+ * @param stack        - The precomputed stack.
+ * @param tickDecimals - The value axis precision, when set.
+ * @return The extent widened for tick precision, or the empty chart domain.
+ */
+export function getStackedValueDomain(
+	stack: StackLayout,
+	tickDecimals?: number
+): [ number, number ] {
+	const { extent } = stack;
+	const domain: [ number, number ] =
+		! extent || extent[ 0 ] === extent[ 1 ] ? [ ...EMPTY_DOMAIN ] : extent;
+	return getTickDecimalsDomain( domain, tickDecimals ) ?? domain;
+}

package/src/charts/bar-chart/private/stacked-bar-series.tsx

@@ -0,0 +1,145 @@
+import { DataContext, GlyphSeries } from '@visx/xychart';
+import clsx from 'clsx';
+import { useCallback, useContext, useMemo } from 'react';
+import { createGroupScale } from './band-scale';
+import { computeSlotRect, getValueScalePosition } from './comparison-bars-geometry';
+import type { BandScale } from './band-scale';
+import type { ValueScale } from './comparison-bars-geometry';
+import type { StackLayout, StackSegment } from './stack-layout';
+import type { DataPointDate } from '../../../types';
+import type { BarChartProps } from '../types';
+import type { AxisScale } from '@visx/axis';
+import type { GlyphProps, SeriesProps } from '@visx/xychart';
+
+type Props = Pick<
+	SeriesProps< AxisScale, AxisScale, DataPointDate >,
+	'xAccessor' | 'yAccessor'
+> & {
+	dataKey: string;
+	data: DataPointDate[];
+	colorAccessor: ( datum: DataPointDate ) => string;
+	barClassName?: BarChartProps[ 'barClassName' ];
+	/** The slots of a category, in the order the band lays them out. */
+	slotKeys: string[];
+	/** The slot the stack sits in. */
+	slotKey: string;
+	groupPadding: number;
+	stack: StackLayout;
+};
+
+/**
+ * The side a segment rounds when it ends its drawn stack: the far end of the positives or of the negatives.
+ *
+ * @param stack      - The stack layout.
+ * @param segment    - The segment.
+ * @param category   - A datum at the segment's category.
+ * @param horizontal - Whether the bars run horizontally.
+ * @param clamp      - Holds a value inside the value domain, where the bars are cut off.
+ * @return The side to round, or undefined for a segment inside its stack or drawn with no length.
+ */
+function getStackEnd(
+	stack: StackLayout,
+	segment: StackSegment,
+	category: DataPointDate,
+	horizontal: boolean,
+	clamp: ( value: number ) => number
+): 'top' | 'bottom' | 'left' | 'right' | undefined {
+	const [ start, end ] = [ segment.start, segment.end ].map( clamp );
+	if ( start === end ) {
+		return undefined;
+	}
+	const extent = stack.extentAt( category ).map( clamp );
+	if ( segment.end > 0 && end === extent[ 1 ] ) {
+		return horizontal ? 'right' : 'top';
+	}
+	if ( segment.end < 0 && end === extent[ 0 ] ) {
+		return horizontal ? 'left' : 'bottom';
+	}
+	return undefined;
+}
+
+const StackedBarSeries = ( {
+	barClassName,
+	slotKeys,
+	slotKey,
+	groupPadding,
+	stack,
+	...props
+}: Props ) => {
+	const { xScale, yScale, horizontal } = useContext( DataContext );
+	const bandScale = ( horizontal ? yScale : xScale ) as BandScale | undefined;
+	const valueScale = ( horizontal ? xScale : yScale ) as ValueScale | undefined;
+	const groupScale = useMemo(
+		() => createGroupScale( slotKeys, bandScale?.bandwidth?.() ?? 0, groupPadding ),
+		[ slotKeys, bandScale, groupPadding ]
+	);
+	const { dataKey, xAccessor, yAccessor } = props;
+	const [ domainStart, domainEnd ] = ( horizontal ? xScale : yScale )?.domain() ?? [
+		-Infinity,
+		Infinity,
+	];
+	const domainMin = Math.min( Number( domainStart ), Number( domainEnd ) );
+	const domainMax = Math.max( Number( domainStart ), Number( domainEnd ) );
+	const clamp = useCallback(
+		( value: number ) => Math.min( domainMax, Math.max( domainMin, value ) ),
+		[ domainMin, domainMax ]
+	);
+	// The positive end, or the negative end when nothing is positive; clamped so a caller domain keeps it on the drawn bar.
+	const stackEnd = useCallback(
+		( datum: DataPointDate ) => {
+			const [ low, high ] = stack.extentAt( datum );
+			return clamp( high > 0 ? high : low );
+		},
+		[ stack, clamp ]
+	);
+	const renderGlyph = useCallback(
+		( { datum, color }: GlyphProps< DataPointDate > ) => {
+			const segment = stack.segmentOf( dataKey, datum );
+			if ( ! segment || ! bandScale?.bandwidth || ! valueScale ) return null;
+			const rect = computeSlotRect( {
+				horizontal: !! horizontal,
+				bandPosition: Number( bandScale( ( horizontal ? yAccessor : xAccessor )( datum ) ) ),
+				slotOffset: groupScale( slotKey ) ?? 0,
+				slotThickness: groupScale.bandwidth(),
+				valuePositions: [ segment.start, segment.end ].map( value =>
+					getValueScalePosition( valueScale, value )
+				),
+				widthFactor: 1,
+			} );
+			return (
+				<rect
+					{ ...rect }
+					data-testid="bar-chart-stacked-bar"
+					data-stack-end={ getStackEnd( stack, segment, datum, !! horizontal, clamp ) }
+					className={ clsx( 'visx-bar', barClassName?.( datum ) ) }
+					fill={ color }
+				/>
+			);
+		},
+		[
+			stack,
+			clamp,
+			dataKey,
+			bandScale,
+			valueScale,
+			horizontal,
+			groupScale,
+			slotKey,
+			xAccessor,
+			yAccessor,
+			barClassName,
+		]
+	);
+	// BandTooltip owns pointer selection, as for slotted bars.
+	return (
+		<GlyphSeries
+			{ ...props }
+			xAccessor={ horizontal ? stackEnd : xAccessor }
+			yAccessor={ horizontal ? yAccessor : stackEnd }
+			enableEvents={ false }
+			renderGlyph={ renderGlyph }
+		/>
+	);
+};
+
+export default StackedBarSeries;

package/src/charts/bar-chart/private/test/stack-layout.test.ts

@@ -0,0 +1,81 @@
+import { getStackLayout, getStackedValueDomain } from '../stack-layout';
+import type { DataPointDate, SeriesData } from '../../../../types';
+
+const s = (
+	label: string,
+	values: Array< number | null >,
+	days = [ 'Mon', 'Tue' ]
+): SeriesData => ( {
+	label,
+	data: values.map( ( value, index ) => ( { label: days[ index ], value } ) ),
+} );
+
+const at = ( label: string ): DataPointDate => ( { label, value: 0 } );
+
+const SERIES = [
+	s( 'Desktop', [ 100, 50 ] ),
+	s( 'Mobile', [ 60, null ] ),
+	s( 'Tablet', [ 20, 10 ] ),
+];
+
+describe( 'getStackLayout', () => {
+	it( 'runs each series from the top of the series before it at the same category', () => {
+		const { segmentOf } = getStackLayout( SERIES );
+		expect( [ 'Desktop', 'Mobile', 'Tablet' ].map( key => segmentOf( key, at( 'Mon' ) ) ) ).toEqual(
+			[
+				{ start: 0, end: 100 },
+				{ start: 100, end: 160 },
+				{ start: 160, end: 180 },
+			]
+		);
+	} );
+
+	it( 'gives a missing reading no segment and stacks past it', () => {
+		const { segmentOf } = getStackLayout( SERIES );
+		expect( segmentOf( 'Mobile', at( 'Tue' ) ) ).toBeUndefined();
+		expect( segmentOf( 'Tablet', at( 'Tue' ) ) ).toEqual( { start: 50, end: 60 } );
+	} );
+
+	it( 'stacks negatives downward apart from positives', () => {
+		const layout = getStackLayout( [
+			s( 'A', [ 10 ] ),
+			s( 'B', [ -5 ] ),
+			s( 'C', [ -3 ] ),
+			s( 'D', [ 4 ] ),
+		] );
+		expect( layout.segmentOf( 'C', at( 'Mon' ) ) ).toEqual( { start: -5, end: -8 } );
+		expect( layout.segmentOf( 'D', at( 'Mon' ) ) ).toEqual( { start: 10, end: 14 } );
+		expect( layout.extentAt( at( 'Mon' ) ) ).toEqual( [ -8, 14 ] );
+	} );
+
+	it( 'keeps the first reading of a category a series repeats', () => {
+		const layout = getStackLayout( [ s( 'A', [ 50, 30 ], [ 'Mon', 'Mon' ] ), s( 'B', [ 20 ] ) ] );
+		expect( layout.segmentOf( 'A', at( 'Mon' ) ) ).toEqual( { start: 0, end: 50 } );
+		expect( layout.segmentOf( 'B', at( 'Mon' ) ) ).toEqual( { start: 50, end: 70 } );
+		expect( layout.extentAt( at( 'Mon' ) ) ).toEqual( [ 0, 70 ] );
+	} );
+
+	it( 'matches dated points by time', () => {
+		const dated = ( label: string, value: number ): SeriesData => ( {
+			label,
+			data: [ { date: new Date( 2026, 4, 13 ), value } ],
+		} );
+		const { segmentOf } = getStackLayout( [ dated( 'A', 30 ), dated( 'B', 12 ) ] );
+		expect( segmentOf( 'B', { date: new Date( 2026, 4, 13 ), value: 12 } ) ).toEqual( {
+			start: 30,
+			end: 42,
+		} );
+	} );
+
+	it( 'spans the widest category, or nothing without a reading', () => {
+		expect( getStackLayout( SERIES ).extent ).toEqual( [ 0, 180 ] );
+		expect( getStackLayout( [ s( 'A', [ null ] ) ] ).extent ).toBeNull();
+	} );
+} );
+
+describe( 'getStackedValueDomain', () => {
+	it( 'reads 0 to 1 with nothing to stack', () => {
+		expect( getStackedValueDomain( getStackLayout( [ s( 'A', [ null ] ) ] ) ) ).toEqual( [ 0, 1 ] );
+		expect( getStackedValueDomain( getStackLayout( [ s( 'A', [ 0 ] ) ] ) ) ).toEqual( [ 0, 1 ] );
+	} );
+} );