@automattic/charts 4.2.0 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.2.0",
+	"version": "4.3.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {

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

@@ -37,6 +37,7 @@ import { ChartLayout } from '../private/chart-layout';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
 import { getCurveType } from '../private/time-axis';
 import { buildTimeAxisOptions } from '../private/time-axis-options';
+import { hasOnlyWholeNumbers, WholeNumberTicks } from '../private/whole-number-ticks';
 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';
@@ -142,6 +143,15 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 			[ seriesWithVisibility ]
 		);
 
+		// 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 ]
+		);
+
 		const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
 			selectedIndex,
 			setSelectedIndex,
@@ -250,8 +260,9 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 				withGlyph: false,
 				glyphSize: 0,
 				collapseGroups: legend.collapseGroups ?? false,
+				comparisonItem: legend.comparisonItem ?? false,
 			} ),
-			[ legend.collapseGroups ]
+			[ legend.collapseGroups, legend.comparisonItem ]
 		);
 		const legendItems = useChartLegendItems( dataSorted, legendOptions, legendShape );
 
@@ -438,15 +449,36 @@ 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. */ }
-											{ ! allSeriesHidden && gridVisibility !== 'none' && (
-												<Grid columns={ false } numTicks={ 4 } />
-											) }
-											{ ! allSeriesHidden && chartOptions.axis.x.display && (
-												<Axis { ...chartOptions.axis.x } />
-											) }
-											{ ! allSeriesHidden && chartOptions.axis.y.display && (
-												<Axis { ...chartOptions.axis.y } />
-											) }
+											<WholeNumberTicks
+												axis="y"
+												numTicks={ chartOptions.axis.y.numTicks }
+												enabled={
+													hasWholeNumberValues &&
+													! chartOptions.axis.y.tickValues &&
+													! options?.yScale?.domain
+												}
+											>
+												{ tickValues => (
+													<>
+														{ ! allSeriesHidden && gridVisibility !== 'none' && (
+															<Grid
+																columns={ false }
+																numTicks={ chartOptions.axis.y.numTicks }
+																{ ...{ tickValues: tickValues ?? chartOptions.axis.y.tickValues } }
+															/>
+														) }
+														{ ! allSeriesHidden && chartOptions.axis.x.display && (
+															<Axis { ...chartOptions.axis.x } />
+														) }
+														{ ! allSeriesHidden && chartOptions.axis.y.display && (
+															<Axis
+																{ ...chartOptions.axis.y }
+																{ ...( tickValues ? { tickValues } : {} ) }
+															/>
+														) }
+													</>
+												) }
+											</WholeNumberTicks>
 
 											{ allSeriesHidden ? (
 												<SvgEmptyState

package/src/charts/area-chart/private/validate-data.ts

@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import { isInvalidReading } from '../../private/readings';
 import type { DataPoint, DataPointDate, SeriesData } from '../../../types';
 
 /**
@@ -19,9 +20,7 @@ export const validateData = ( data: SeriesData[] ) => {
 	const hasInvalidData = data.some( series =>
 		series.data.some(
 			( point: DataPointDate | DataPoint ) =>
-				isNaN( point.value as number ) ||
-				point.value === null ||
-				point.value === undefined ||
+				isInvalidReading( point.value, { allowMissing: false } ) ||
 				( 'date' in point && point.date && isNaN( point.date.getTime() ) )
 		)
 	);

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

@@ -1,4 +1,4 @@
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, within, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
 import { GlobalChartsProvider } from '../../../providers';
@@ -188,6 +188,77 @@ describe( 'AreaChart', () => {
 		} );
 	} );
 
+	describe( 'Y-Axis Ticks', () => {
+		test( 'labels a whole-number range smaller than the tick count once per whole number', () => {
+			renderWithProvider( {
+				stacked: false,
+				data: [
+					{
+						label: 'Series A',
+						data: [ 0, 1, 1, 0 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+				],
+			} );
+
+			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			const ticks = within( chart )
+				.getAllByText( /^-?[\d.,]+$/ )
+				.map( el => el.textContent );
+			expect( ticks.sort() ).toEqual( [ '0', '1' ] );
+		} );
+
+		test( 'keeps every tick on a y domain the caller pinned', () => {
+			renderWithProvider( {
+				stacked: false,
+				data: [
+					{
+						label: 'Series A',
+						data: [ 0, 0, 0 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+				],
+				options: {
+					yScale: { domain: [ 0, 1 ] },
+					axis: { y: { tickFormat: ( value: number ) => `${ Math.round( value * 100 ) }%` } },
+				},
+			} );
+
+			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			expect( within( chart ).getAllByText( /^\d+%$/ ) ).toHaveLength( 6 );
+		} );
+
+		test( 'keeps fractional ticks for a normalized stack even when the data is whole numbers', () => {
+			renderWithProvider( {
+				stacked: true,
+				stackOffset: 'expand',
+				data: [
+					{
+						label: 'Series A',
+						data: [ 0, 1, 1, 0 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+					{
+						label: 'Series B',
+						data: [ 1, 0, 0, 1 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+				],
+			} );
+
+			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			expect( within( chart ).getAllByText( /^-?[\d.,]+$/ ).length ).toBeGreaterThan( 2 );
+		} );
+	} );
+
 	describe( 'Stacking', () => {
 		test( 'is stacked by default', () => {
 			renderWithProvider();

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

@@ -1,4 +1,3 @@
-import { formatNumber } from '@automattic/number-formatters';
 import { PatternLines, PatternCircles, PatternWaves, PatternHexagons } from '@visx/pattern';
 import { Axis, BarSeries, BarGroup, Grid, XYChart } from '@visx/xychart';
 import { __, sprintf } from '@wordpress/i18n';
@@ -22,10 +21,13 @@ import {
 } from '../../providers';
 import { useDefaultHiddenSeries } from '../../providers/chart-context/hooks/use-default-hidden-series';
 import { attachSubComponents } from '../../utils';
+import { warnOnce } from '../../utils/warn-once';
 import { useChartChildren } from '../private/chart-composition';
 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 { withResponsive } from '../private/with-responsive';
 import plotStyles from '../private/xy-plot/xy-plot.module.scss';
 import styles from './bar-chart.module.scss';
@@ -39,47 +41,17 @@ import {
 	MAX_GROUP_PADDING,
 	COMPARISON_TICK_GAP_FACTOR,
 	BASE_BAND_PADDING_INNER,
+	countRenderedBars,
+	isBarRendered,
 } from './private';
 import type { ComparisonSeriesEntry } from './private';
-import type {
-	BaseChartProps,
-	DataPointDate,
-	SeriesData,
-	SeriesChartLegendConfig,
-	SeriesVisibilityProps,
-	Optional,
-} from '../../types';
+import type { BarChartProps } from './types';
+import type { DataPointDate, SeriesData, Optional } from '../../types';
 import type { RenderTooltipParams } from '../../visx/types';
 import type { ResponsiveConfig } from '../private/with-responsive';
-import type { FC, ReactNode, ComponentType } from 'react';
-
-export type BandHighlightSelection = {
-	datum: DataPointDate;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-};
+import type { FC, ComponentType } from 'react';
 
-export interface BarChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
-	/**
-	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
-	 */
-	legend?: SeriesChartLegendConfig;
-	renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
-	/** Place the tooltip beside its category without vertical flipping. */
-	tooltipPlacement?: 'auto' | 'beside';
-	/** Tooltip top anchor in SVG coordinates; negative offsets are supported. */
-	tooltipAnchorTop?: number;
-	orientation?: 'horizontal' | 'vertical';
-	withPatterns?: boolean;
-	showZeroValues?: boolean;
-	/** Highlight the active band across the plot when tooltips are enabled. */
-	withBandHighlight?: boolean;
-	/** Receive active band bounds in SVG coordinates, or null when dismissed. */
-	onBandHighlightChange?: ( selection: BandHighlightSelection | null ) => void;
-	children?: ReactNode;
-}
+export type { BarChartProps, BandHighlightSelection } from './types';
 
 // Base props type with optional responsive properties
 type BarChartBaseProps = Optional< BarChartProps, 'width' | 'height' | 'size' >;
@@ -95,20 +67,18 @@ type BarChartResponsiveComponent = FC< BarChartBaseProps & ResponsiveConfig > &
 
 // Validation function similar to LineChart
 const validateData = ( data: SeriesData[] ) => {
-	if ( ! data?.length ) return 'No data available';
+	if ( ! data?.length ) return __( 'No data available', 'jetpack-charts' );
 
 	const hasInvalidData = data.some( series =>
 		series.data.some(
 			point =>
-				isNaN( point.value as number ) ||
-				point.value === null ||
-				point.value === undefined ||
+				isInvalidReading( point.value, { allowMissing: true } ) ||
 				( ! point.label &&
 					( ! ( 'date' in point && point.date ) || isNaN( point.date.getTime() ) ) )
 		)
 	);
 
-	if ( hasInvalidData ) return 'Invalid data';
+	if ( hasInvalidData ) return __( 'Invalid data', 'jetpack-charts' );
 	return null;
 };
 
@@ -155,8 +125,16 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	onPointerUp,
 	onDatumActivate,
 } ) => {
+	if ( ! withTooltips && ( withBandHighlight || onBandHighlightChange ) ) {
+		warnOnce(
+			'bar-chart-band-highlight-without-tooltips',
+			'BarChart: withBandHighlight and onBandHighlightChange require withTooltips.'
+		);
+	}
+
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
+	const legendComparisonItem = legend.comparisonItem ?? false;
 	const horizontal = orientation === 'horizontal';
 	const chartId = useChartId( providedChartId );
 	const hiddenSeries = useDefaultHiddenSeries( chartId, defaultHiddenSeries );
@@ -177,8 +155,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 
 	// Create legend items using the reusable hook
 	const legendOptions = useMemo(
-		() => ( { collapseGroups: legendCollapseGroups } ),
-		[ legendCollapseGroups ]
+		() => ( { collapseGroups: legendCollapseGroups, comparisonItem: legendComparisonItem } ),
+		[ legendCollapseGroups, legendComparisonItem ]
 	);
 	const legendItems = useChartLegendItems( dataSorted, legendOptions );
 
@@ -192,12 +170,24 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ isSeriesVisible ]
 	);
 
+	const hasWholeNumberValues = useMemo(
+		() => hasOnlyWholeNumbers( dataSorted.filter( isSeriesRendered ) ),
+		[ dataSorted, isSeriesRendered ]
+	);
+
 	const chartOptions = useBarChartOptions(
 		dataWithVisibleZeros,
 		horizontal,
 		options,
 		isSeriesRendered
 	);
+	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 );
 
@@ -404,14 +394,14 @@ const BarChartInternal: FC< BarChartProps > = ( {
 
 			// With a paired comparison value, show the category as the header and one row
 			// per period (primary + comparison).
-			if ( comparisonEntry && comparisonDatum && comparisonDatum.value != null ) {
+			if ( comparisonEntry && comparisonDatum ) {
 				return (
 					<div className={ styles[ 'bar-chart__tooltip' ] }>
 						<div className={ styles[ 'bar-chart__tooltip-header' ] }>{ categoryLabel }</div>
-						{ renderTooltipRow( primaryKey, formatNumber( nearestDatum.value as number ) ) }
+						{ renderTooltipRow( primaryKey, formatReading( nearestDatum.value ) ) }
 						{ renderTooltipRow(
 							comparisonEntry.series.label,
-							formatNumber( comparisonDatum.value as number )
+							formatReading( comparisonDatum.value )
 						) }
 					</div>
 				);
@@ -420,7 +410,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			return (
 				<div className={ styles[ 'bar-chart__tooltip' ] }>
 					<div className={ styles[ 'bar-chart__tooltip-header' ] }>{ primaryKey }</div>
-					{ renderTooltipRow( categoryLabel, formatNumber( nearestDatum.value as number ) ) }
+					{ renderTooltipRow( categoryLabel, formatReading( nearestDatum.value ) ) }
 				</div>
 			);
 		},
@@ -482,34 +472,33 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const createKeyboardHighlightStyle = useCallback( () => {
 		if ( selectedIndex === undefined ) return '';
 
-		// Use only primary entries — comparison series have no .visx-bar elements so
+		// 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;
-		const maxDataPoints = Math.max( ...primaryEntries.map( e => e.series.data.length ) );
-		const dataPointIndex = Math.floor( selectedIndex / primaryCount );
-		const seriesIndex = selectedIndex % primaryCount;
-
-		// Only highlight if we're within valid bounds
-		if ( dataPointIndex >= maxDataPoints || seriesIndex >= primaryCount ) {
+		if ( ! primaryCount ) {
 			return '';
 		}
-
+		const dataPointIndex = Math.floor( selectedIndex / primaryCount );
+		const seriesIndex = selectedIndex % primaryCount;
 		const seriesData = primaryEntries[ seriesIndex ]?.series;
-		if ( ! seriesData || dataPointIndex >= seriesData.data.length ) {
+		const datum = seriesData?.data[ dataPointIndex ];
+
+		if ( ! seriesData || ! datum || ! isBarRendered( datum ) ) {
 			return '';
 		}
 
-		// Based on the DOM structure analysis:
-		// - All bars are in a single .visx-bar-group
-		// - Bars are ordered as: [series1[0], series1[1], series2[0], series2[1], ...]
-		// - So we need to calculate the actual bar index in the DOM
-		const actualBarIndex = seriesIndex * maxDataPoints + dataPointIndex;
+		// 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(${
-				actualBarIndex + 1
+				domBarIndex + 1
 			}) {
 				stroke: #005fcc;
 				stroke-width: 2px;
@@ -633,21 +622,33 @@ const BarChartInternal: FC< BarChartProps > = ( {
 										) }
 
 										{ ! allSeriesHidden && (
-											<>
-												{ /* Visx forwards tickValues to its grid primitives but omits it from GridProps. */ }
-												<Grid
-													columns={ gridVisibility.includes( 'y' ) }
-													rows={ false }
-													numTicks={ 4 }
-													{ ...{ tickValues: chartOptions.axis.x.tickValues } }
-												/>
-												<Grid
-													columns={ false }
-													rows={ gridVisibility.includes( 'x' ) }
-													numTicks={ 4 }
-													{ ...{ tickValues: chartOptions.axis.y.tickValues } }
-												/>
-											</>
+											<WholeNumberTicks { ...wholeNumberTicksProps }>
+												{ valueTicks => (
+													<>
+														{ /* Visx forwards tickValues to its grid primitives but omits it from GridProps. */ }
+														<Grid
+															columns={ gridVisibility.includes( 'y' ) }
+															rows={ false }
+															numTicks={ chartOptions.axis.x.numTicks }
+															{ ...{
+																tickValues:
+																	( horizontal ? valueTicks : undefined ) ??
+																	chartOptions.axis.x.tickValues,
+															} }
+														/>
+														<Grid
+															columns={ false }
+															rows={ gridVisibility.includes( 'x' ) }
+															numTicks={ chartOptions.axis.y.numTicks }
+															{ ...{
+																tickValues:
+																	( horizontal ? undefined : valueTicks ) ??
+																	chartOptions.axis.y.tickValues,
+															} }
+														/>
+													</>
+												) }
+											</WholeNumberTicks>
 										) }
 
 										{ withPatterns && (
@@ -671,7 +672,11 @@ const BarChartInternal: FC< BarChartProps > = ( {
 											</>
 										) }
 
-										{ highlightedBarStyle && <style>{ highlightedBarStyle }</style> }
+										{ highlightedBarStyle && (
+											<style data-testid="bar-chart-keyboard-highlight">
+												{ highlightedBarStyle }
+											</style>
+										) }
 
 										{ allSeriesHidden ? (
 											<SvgEmptyState
@@ -726,10 +731,22 @@ 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 && (
-											<>
-												<Axis { ...chartOptions.axis.x } />
-												<Axis { ...chartOptions.axis.y } />
-											</>
+											<WholeNumberTicks { ...wholeNumberTicksProps }>
+												{ valueTicks => (
+													<>
+														<Axis
+															{ ...chartOptions.axis.x }
+															{ ...( horizontal && valueTicks ? { tickValues: valueTicks } : {} ) }
+														/>
+														<Axis
+															{ ...chartOptions.axis.y }
+															{ ...( ! horizontal && valueTicks
+																? { tickValues: valueTicks }
+																: {} ) }
+														/>
+													</>
+												) }
+											</WholeNumberTicks>
 										) }
 
 										{ withTooltips && (

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

@@ -1,2 +1,2 @@
 export { default as BarChart, BarChartUnresponsive } from './bar-chart';
-export type { BarChartProps, BandHighlightSelection } from './bar-chart';
+export type { BarChartProps, BandHighlightSelection } from './types';

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

@@ -4,7 +4,7 @@ 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 '../bar-chart';
+import type { BandHighlightSelection } from '../types';
 
 type Props = {
 	visible: boolean;
@@ -41,6 +41,8 @@ export function BandHighlight( { visible, horizontal, onChange }: Props ) {
 		}
 		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(),

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

@@ -2,7 +2,7 @@ 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 '../bar-chart';
+import type { BarChartProps } from '../types';
 
 type PointerHandler = NonNullable< Parameters< typeof useEventEmitter >[ 1 ] >;
 type PointerSelection = Parameters< NonNullable< BarChartProps[ 'onPointerUp' ] > >[ 0 ];

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

@@ -9,5 +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

@@ -7,7 +7,7 @@ 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 '../../bar-chart';
+import type { BandHighlightSelection } from '../../types';
 
 const xScale = scaleBand( { domain: [ 'Jan', 'Feb' ], range: [ 10, 210 ] } );
 const dataContext = {
@@ -25,7 +25,7 @@ const Fixture = ( { label = 'Jan', onChange } ) => {
 				value={
 					{
 						tooltipOpen: true,
-						tooltipData: { nearestDatum: { key: 'scores', datum: { label, value: 50 } } },
+						tooltipData: { nearestDatum: { key: 'scores', index: 0, datum: { label, value: 50 } } },
 					} as never
 				}
 			>
@@ -38,6 +38,20 @@ const Fixture = ( { label = 'Jan', onChange } ) => {
 };
 
 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(
@@ -79,6 +93,7 @@ describe( 'BandHighlight', () => {
 	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 = {
@@ -103,6 +118,17 @@ describe( 'BandHighlight', () => {
 					<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 );
 		}
 	);