@automattic/charts 4.1.1 → 4.3.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/charts/bar-chart/private/test/value-domain.test.ts

@@ -0,0 +1,100 @@
+import { getValueScaleDomain } from '../value-domain';
+import type { DataPointDate, SeriesData } from '../../../../types';
+
+const series = (
+	values: Array< number | null >,
+	options?: SeriesData[ 'options' ],
+	label = 'Series'
+): SeriesData => ( {
+	label,
+	data: values.map( ( value, index ) => ( {
+		date: new Date( 2026, index, 1 ),
+		value,
+	} ) ),
+	options,
+} );
+
+const allRendered = () => true;
+
+describe( 'getValueScaleDomain', () => {
+	test( 'anchors a varying series at zero', () => {
+		expect( getValueScaleDomain( [ series( [ 10, 20, 30 ] ) ], true, allRendered ) ).toEqual( [
+			0, 30,
+		] );
+	} );
+
+	test( 'spans zero for a varying negative series', () => {
+		expect( getValueScaleDomain( [ series( [ -10, -20 ] ) ], true, allRendered ) ).toEqual( [
+			-20, 0,
+		] );
+	} );
+
+	test( 'leaves a varying series to visx when zero is opted out', () => {
+		expect( getValueScaleDomain( [ series( [ 10, 20, 30 ] ) ], false, allRendered ) ).toBeNull();
+	} );
+
+	test( 'anchors a flat series at zero so its bars have height', () => {
+		expect( getValueScaleDomain( [ series( [ 500, 500, 500 ] ) ], false, allRendered ) ).toEqual( [
+			0, 500,
+		] );
+	} );
+
+	test( 'anchors a single-bucket window at zero', () => {
+		expect( getValueScaleDomain( [ series( [ 42 ] ) ], false, allRendered ) ).toEqual( [ 0, 42 ] );
+	} );
+
+	test( 'spans zero for a flat negative series', () => {
+		expect( getValueScaleDomain( [ series( [ -5, -5 ] ) ], false, allRendered ) ).toEqual( [
+			-5, 0,
+		] );
+	} );
+
+	test( 'falls back to a unit domain when every value is zero', () => {
+		expect( getValueScaleDomain( [ series( [ 0, 0 ] ) ], false, allRendered ) ).toEqual( [ 0, 1 ] );
+	} );
+
+	test( 'falls back to a unit domain when every value is zero in comparison mode', () => {
+		const data = [ series( [ 0, 0 ] ), series( [ 0, 0 ], { type: 'comparison' } ) ];
+		expect( getValueScaleDomain( data, true, allRendered ) ).toEqual( [ 0, 1 ] );
+	} );
+
+	test( 'falls back to a unit domain when no bucket has a reading', () => {
+		expect( getValueScaleDomain( [ series( [ null, null ] ) ], false, allRendered ) ).toEqual( [
+			0, 1,
+		] );
+	} );
+
+	test( 'ignores buckets with no reading when fitting a varying series', () => {
+		expect( getValueScaleDomain( [ series( [ null, 10, 20 ] ) ], false, allRendered ) ).toBeNull();
+	} );
+
+	test( 'keeps zero in the domain across every series in comparison mode', () => {
+		const data = [ series( [ 10, 20 ] ), series( [ 5, 40 ], { type: 'comparison' } ) ];
+		expect( getValueScaleDomain( data, true, allRendered ) ).toEqual( [ 0, 40 ] );
+	} );
+
+	test( 'anchors a flat series at zero when the varying series beside it is hidden', () => {
+		const data = [
+			series( [ 500, 500 ], undefined, 'Flat' ),
+			series( [ 10, 900 ], undefined, 'Varying' ),
+		];
+		const isSeriesRendered = ( s: SeriesData ) => s.label !== 'Varying';
+		expect( getValueScaleDomain( data, false, isSeriesRendered ) ).toEqual( [ 0, 500 ] );
+	} );
+
+	test( 'anchors the remaining varying series at zero when a sibling is hidden', () => {
+		const data = [ series( [ 10, 50 ], undefined, 'A' ), series( [ 15, 25 ], undefined, 'B' ) ];
+		const isSeriesRendered = ( s: SeriesData ) => s.label !== 'A';
+		expect( getValueScaleDomain( data, true, isSeriesRendered ) ).toEqual( [ 0, 25 ] );
+	} );
+
+	test( 'reads visualValue in preference to value', () => {
+		const data: SeriesData[] = [
+			{
+				label: 'Series',
+				data: [ { date: new Date( 2026, 0, 1 ), value: 0, visualValue: 2 } as DataPointDate ],
+			},
+		];
+		expect( getValueScaleDomain( data, false, allRendered ) ).toEqual( [ 0, 2 ] );
+	} );
+} );

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

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

package/src/charts/bar-chart/private/use-bar-chart-options.ts

@@ -7,7 +7,7 @@ import { getBucketResolution } from '../../../utils/bucket-info';
 import { createDateFormatter } from '../../../utils/date-formatting';
 import { getBandTickValues, getFormatter } from '../../private/time-axis';
 import { TruncatedXTickComponent, TruncatedYTickComponent } from './truncated-tick-component';
-import type { EnhancedDataPoint } from '../../../hooks/use-zero-value-display';
+import { getBarValue, getValueScaleDomain } from './value-domain';
 import type {
 	DataPointDate,
 	BaseChartProps,
@@ -207,6 +207,7 @@ export function useBarChartOptions(
 		const linearScale = {
 			type: 'linear' as const,
 			nice: true,
+			// XYChart defaults `zero` to true, which would stretch a caller's domain to 0.
 			zero: false,
 		};
 
@@ -223,12 +224,6 @@ export function useBarChartOptions(
 
 		const bandDomain = timeTickFormatter ? getBandDomain( data, isSeriesRendered ) : null;
 
-		const valueAccessor = ( d: DataPointDate | EnhancedDataPoint ) => {
-			// Use visualValue for bar rendering if available (for zero values), otherwise use value
-			const enhancedPoint = d as EnhancedDataPoint;
-			return enhancedPoint?.visualValue !== undefined ? enhancedPoint.visualValue : d?.value;
-		};
-
 		return {
 			timeAxis: bandDomain &&
 				timeTickFormatter && {
@@ -240,7 +235,7 @@ export function useBarChartOptions(
 				yTickFormat: valueFormatter,
 				tooltipLabelFormatter: tooltipDatumFormatter,
 				xAccessor: bucketAccessor,
-				yAccessor: valueAccessor,
+				yAccessor: getBarValue,
 				gridVisibility: 'x',
 				xScale: bandScale,
 				yScale: linearScale,
@@ -249,7 +244,7 @@ export function useBarChartOptions(
 				xTickFormat: valueFormatter,
 				yTickFormat: labelFormatter,
 				tooltipLabelFormatter: tooltipDatumFormatter,
-				xAccessor: valueAccessor,
+				xAccessor: getBarValue,
 				yAccessor: bucketAccessor,
 				gridVisibility: 'y',
 				xScale: linearScale,
@@ -271,36 +266,14 @@ export function useBarChartOptions(
 			yScale: baseYScale,
 		} = defaultOptions[ orientationKey ];
 
-		// When comparison series are present, visx only sees primary BarSeries and computes
-		// a too-narrow domain. Compute an explicit domain spanning all series so comparison
-		// shadows aren't clipped. Skip when the user has already provided an explicit domain.
-		let valueScaleDomainOverride: { domain?: [ number, number ] } = {};
+		const valueScaleOptions = horizontal ? stableOptions.xScale : stableOptions.yScale;
 		const hasComparisonSeries = data.some( s => s.options?.type === 'comparison' );
-		if ( hasComparisonSeries ) {
-			const valueAxisIsY = ! horizontal;
-			const userDomain = valueAxisIsY ? stableOptions.yScale?.domain : stableOptions.xScale?.domain;
-			if ( ! userDomain ) {
-				const allValues: number[] = [];
-				data.forEach( series => {
-					series.data.forEach( d => {
-						const enhanced = d as { visualValue?: number };
-						const v =
-							enhanced.visualValue !== undefined ? enhanced.visualValue : ( d.value as number );
-						if ( typeof v === 'number' && Number.isFinite( v ) ) {
-							allValues.push( v );
-						}
-					} );
-				} );
-				if ( allValues.length > 0 ) {
-					// Keep zero in the domain so bar length stays proportional to value — a
-					// non-zero baseline would exaggerate differences between periods. Math.max
-					// keeps zero on the far side too, so charts with negative values still span 0.
-					valueScaleDomainOverride = {
-						domain: [ Math.min( 0, ...allValues ), Math.max( 0, ...allValues ) ],
-					};
-				}
-			}
-		}
+		// Comparison shadows share the primary bars' scale, so they force zero even when the caller opted out.
+		const includeZero = hasComparisonSeries || valueScaleOptions?.zero !== false;
+		const domain = valueScaleOptions?.domain
+			? null
+			: getValueScaleDomain( data, includeZero, isSeriesRendered );
+		const valueScaleDomainOverride: { domain?: [ number, number ] } = domain ? { domain } : {};
 
 		const xScale = {
 			...baseXScale,
@@ -330,7 +303,7 @@ export function useBarChartOptions(
 						timeAxis.domain,
 						timeAxis.tickFormatter,
 						dateAxisOptions.numTicks ?? DEFAULT_NUM_TICKS
-				  )
+					)
 				: null;
 		const dateAxisTickValues = bandTickValues ? { tickValues: bandTickValues } : {};
 
@@ -367,5 +340,5 @@ export function useBarChartOptions(
 				labelFormatter: dateAxisTickFormat || defaultTooltipLabelFormatter,
 			},
 		};
-	}, [ defaultOptions, axisConfig, stableOptions, horizontal, data ] );
+	}, [ defaultOptions, axisConfig, stableOptions, horizontal, data, isSeriesRendered ] );
 }