@automattic/charts 3.2.0 → 4.1.0

package/src/charts/line-chart/test/zoned-date-string.test.tsx

@@ -0,0 +1,37 @@
+/**
+ * @jest-environment <rootDir>/tests/environment-auckland.mjs
+ */
+import { render, screen } from '@testing-library/react';
+import { GlobalChartsProvider } from '../../../providers';
+import LineChart from '../line-chart';
+
+const mockRefCallback = jest.fn();
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
+} ) );
+
+// Naive day strings, the shape the Stats payload gives for day buckets.
+const data = [
+	{
+		label: 'Series A',
+		data: [
+			{ dateString: '2026-08-02', value: 1 },
+			{ dateString: '2026-08-03', value: 2 },
+			{ dateString: '2026-08-04', value: 3 },
+		],
+		options: {},
+	},
+];
+
+describe( 'dateString under a host time zone', () => {
+	it( 'dates a naive string in the host zone, not the viewer browser zone', () => {
+		render(
+			<GlobalChartsProvider locale="en-US" timeZone="Asia/Tokyo">
+				<LineChart width={ 500 } height={ 300 } withGradientFill={ false } data={ data } />
+			</GlobalChartsProvider>
+		);
+
+		const ticks = screen.getAllByText( /^[A-Z][a-z]{2} \d{1,2}$/ );
+		expect( ticks.map( tick => tick.textContent ) ).toEqual( [ 'Aug 2', 'Aug 3', 'Aug 4' ] );
+	} );
+} );

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

@@ -1,5 +1,6 @@
 import type {
 	BaseChartProps,
+	BucketInfo,
 	DataPointDate,
 	SeriesData,
 	SeriesChartLegendConfig,
@@ -7,9 +8,9 @@ import type {
 	AnnotationStyles,
 	DataPoint,
 } from '../../types';
-import type { RenderTooltipParams } from '../../visx/types';
+import type { CrosshairStyle, RenderTooltipParams, XyChartTooltipProps } from '../../visx/types';
 import type { GlyphProps } from '@visx/xychart';
-import type { ReactNode, SVGProps, FC } from 'react';
+import type { ReactNode, SVGProps, FC, CSSProperties } from 'react';
 
 export type LineChartAnnotationProps = {
 	datum: DataPointDate;
@@ -37,7 +38,18 @@ export interface LineChartProps extends BaseChartProps< SeriesData[] >, SeriesVi
 	withGradientFill: boolean;
 	smoothing?: boolean;
 	curveType?: CurveType;
-	renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
+	renderTooltip?: (
+		params: RenderTooltipParams< DataPointDate > & { bucketInfo?: BucketInfo }
+	) => ReactNode;
+	/**
+	 * Place the panel below the x-axis tick labels with a pointer at the datum x; horizontal bounds still apply.
+	 * @default 'auto'
+	 */
+	tooltipPlacement?: XyChartTooltipProps< DataPointDate >[ 'tooltipPlacement' ];
+	/**
+	 * Inline container styles; see Below-Axis Tooltips in stories/index.docs.mdx for content color overrides.
+	 */
+	tooltipStyle?: CSSProperties;
 	withStartGlyphs?: boolean;
 	withEndGlyphs?: boolean;
 	renderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode;
@@ -46,6 +58,8 @@ export interface LineChartProps extends BaseChartProps< SeriesData[] >, SeriesVi
 	withTooltipCrosshairs?: {
 		showVertical?: boolean;
 		showHorizontal?: boolean;
+		verticalStyle?: CrosshairStyle;
+		horizontalStyle?: CrosshairStyle;
 	};
 	/**
 	 * Enable drag-to-zoom on the X axis. The user drags horizontally to

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

@@ -1,5 +1,8 @@
 .pie-chart {
-	overflow: hidden;
+	// Anchors the tooltip, which renders next to the SVG in here.
+	&__plot {
+		position: relative;
+	}
 
 	// Fill parent when no explicit width/height provided
 	&--responsive {
@@ -7,4 +10,13 @@
 		width: 100%;
 	}
 
+	// Both literals are load-bearing: an undeclared role makes the
+	// `fill` invalid, and `fill` starts at black.
+	&__label-plate {
+		fill: var(--a8c-charts-color-label-background, transparent);
+	}
+
+	&__label-text {
+		fill: var(--a8c-charts-color-label-inverse, #f0f0f0);
+	}
 }

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

@@ -1,10 +1,11 @@
 import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
-import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { useTooltip } from '@visx/tooltip';
 import clsx from 'clsx';
-import { useCallback, useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo, useRef } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { BaseTooltip } from '../../components/tooltip';
+import { BoundedTooltip } from '../../components/tooltip/private/bounded-tooltip';
 import {
 	useDataWithPercentages,
 	useLegendVisibilityData,
@@ -18,7 +19,7 @@ import {
 	useGlobalChartsTheme,
 	GlobalChartsContext,
 } from '../../providers';
-import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
+import { useStandaloneScopeClass } from '../../providers/chart-scope';
 import { attachSubComponents, resolveFontSize } from '../../utils';
 import { getStringWidth } from '../../visx/text';
 import { Center } from '../private/center';
@@ -196,14 +197,10 @@ const PieChartInternal = ( {
 	const chartId = useChartId( providedChartId );
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
 		useTooltip< DataPointPercentageCalculated >();
+	const standaloneScopeClass = useStandaloneScopeClass();
 
-	// Set up portal tooltip for better z-index handling
-	// We get containerBounds to cancel out stale offsets in the position calculation
-	const { containerRef, TooltipInPortal, containerBounds } = useTooltipInPortal( {
-		detectBounds: true,
-		scroll: true,
-		debounce: 0,
-	} );
+	// The tooltip renders inside this element, so pointer coordinates are taken relative to it.
+	const containerRef = useRef< HTMLDivElement >( null );
 
 	const onMouseLeave = useCallback( () => {
 		if ( ! withTooltips ) {
@@ -325,13 +322,6 @@ const PieChartInternal = ( {
 				} }
 				trailingContent={
 					<>
-						{ withTooltips && tooltipOpen && tooltipData && (
-							<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
-								<div className={ CHART_SCOPE_CLASS } role="tooltip">
-									{ renderTooltip( { tooltipData } ) }
-								</div>
-							</TooltipInPortal>
-						) }
 						{ htmlChildren }
 						{ otherChildren }
 					</>
@@ -359,7 +349,7 @@ const PieChartInternal = ( {
 						: 0;
 
 					return (
-						<Center ref={ containerRef }>
+						<Center ref={ containerRef } className={ styles[ 'pie-chart__plot' ] }>
 							<svg
 								viewBox={ `0 0 ${ width } ${ height }` }
 								preserveAspectRatio="xMidYMid meet"
@@ -403,20 +393,15 @@ const PieChartInternal = ( {
 															return;
 														}
 
-														// Don't show tooltip until container bounds are measured
-														if ( containerBounds.width === 0 || containerBounds.height === 0 ) {
+														const bounds = containerRef.current?.getBoundingClientRect();
+														if ( ! bounds ) {
 															return;
 														}
 
-														// Use clientX/Y and subtract containerBounds to cancel out any stale offset.
-														// TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX
-														// By passing (clientX - containerBounds.left), we get:
-														// (clientX - containerBounds.left) + containerBounds.left + scrollX = clientX + scrollX
-														// This gives correct page coordinates regardless of stale bounds.
 														showTooltip( {
 															tooltipData: arc.data,
-															tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
-															tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY,
+															tooltipLeft: event.clientX - bounds.left + tooltipOffsetX,
+															tooltipTop: event.clientY - bounds.top + tooltipOffsetY,
 														} );
 													};
 
@@ -450,23 +435,21 @@ const PieChartInternal = ( {
 															<path { ...pathProps } />
 															{ showLabels && hasSpaceForLabel && (
 																<g>
-																	{ providerTheme.labelBackgroundColor && (
-																		<rect
-																			x={ centroidX - backgroundWidth / 2 }
-																			y={ centroidY - backgroundHeight / 2 }
-																			width={ backgroundWidth }
-																			height={ backgroundHeight }
-																			fill={ providerTheme.labelBackgroundColor }
-																			rx={ 4 }
-																			ry={ 4 }
-																			pointerEvents="none"
-																		/>
-																	) }
+																	<rect
+																		className={ styles[ 'pie-chart__label-plate' ] }
+																		x={ centroidX - backgroundWidth / 2 }
+																		y={ centroidY - backgroundHeight / 2 }
+																		width={ backgroundWidth }
+																		height={ backgroundHeight }
+																		rx={ 4 }
+																		ry={ 4 }
+																		pointerEvents="none"
+																	/>
 																	<text
+																		className={ styles[ 'pie-chart__label-text' ] }
 																		x={ centroidX }
 																		y={ centroidY }
 																		dy=".33em"
-																		fill={ providerTheme.labelTextColor || '#333' }
 																		fontSize={ fontSize }
 																		textAnchor="middle"
 																		pointerEvents="none"
@@ -486,6 +469,13 @@ const PieChartInternal = ( {
 									{ ! allSegmentsHidden && svgChildren }
 								</Group>
 							</svg>
+							{ withTooltips && tooltipOpen && tooltipData && (
+								<BoundedTooltip top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
+									<div className={ standaloneScopeClass } role="tooltip">
+										{ renderTooltip( { tooltipData } ) }
+									</div>
+								</BoundedTooltip>
+							) }
 						</Center>
 					);
 				} }

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

@@ -123,18 +123,9 @@ describe( 'PieChart', () => {
 		test( 'hides labels when showLabels is false', () => {
 			renderWithTheme( { showLabels: false } );
 
-			// When showLabels is false, the chart should not display the data labels
-			// We filter out measurement elements by checking that text is not inside measurement element
-			const labelElements = screen.queryAllByText( ( content, element ) => {
-				// Check if this text element is not the measurement element
-				return (
-					( content === 'A' || content === 'B' ) &&
-					element?.id !== '__react_svg_text_measurement_id'
-				);
-			} );
-
-			// Labels should not be present in the rendered output (excluding measurement text)
-			expect( labelElements ).toHaveLength( 0 );
+			// A plain query, so this also fails if the measurement node stops being
+			// ignored — see tests/setup-text-measurement.js.
+			expect( screen.queryAllByText( /^[AB]$/ ) ).toHaveLength( 0 );
 		} );
 
 		test( 'shows labels when showLabels is explicitly true', () => {
@@ -621,3 +612,59 @@ describe( 'PieChart', () => {
 		} );
 	} );
 } );
+
+// Chart container at (100, 50); the tooltip box measures 120x40. Everything
+// else the charts measure (wrapper, clipping lookups) reports the container.
+const mockRects = () =>
+	jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+		this: Element
+	) {
+		const box = this.classList.contains( 'visx-tooltip' );
+		return {
+			left: box ? 0 : 100,
+			top: box ? 0 : 50,
+			width: box ? 120 : 400,
+			height: box ? 40 : 300,
+			right: box ? 120 : 500,
+			bottom: box ? 40 : 350,
+			x: box ? 0 : 100,
+			y: box ? 0 : 50,
+			toJSON: () => ( {} ),
+		} as DOMRect;
+	} );
+
+describe( 'PieChart tooltip position', () => {
+	afterEach( () => {
+		jest.restoreAllMocks();
+	} );
+
+	test( 'places the box relative to the chart container, at the pointer plus the offsets', async () => {
+		mockRects();
+		const user = userEvent.setup();
+		render(
+			<GlobalChartsProvider>
+				<PieChart
+					data={ [
+						{ label: 'A', value: 60, valueDisplay: '60' },
+						{ label: 'B', value: 40, valueDisplay: '40' },
+					] }
+					width={ 400 }
+					height={ 300 }
+					withTooltips
+				/>
+			</GlobalChartsProvider>
+		);
+
+		await user.pointer( {
+			target: screen.getAllByTestId( 'pie-segment' )[ 0 ],
+			coords: { clientX: 150, clientY: 120 },
+		} );
+
+		// Pointer at (150, 120) is (50, 70) inside the container; the default
+		// -15px vertical offset makes that (50, 55), and the box adds 10px each way.
+		await expect( screen.findByRole( 'tooltip' ) ).resolves.toBeInTheDocument();
+		expect( screen.getByTestId( 'bounded-tooltip' ) ).toHaveStyle( {
+			transform: 'translate(60px, 65px)',
+		} );
+	} );
+} );

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss

@@ -1,4 +1,9 @@
 .pie-semi-circle-chart {
+	// Anchors the tooltip, which renders next to the SVG in here.
+	&__plot {
+		position: relative;
+	}
+
 	// Fill parent when no explicit width/height provided
 	&--responsive {
 		height: 100%;
@@ -6,11 +11,11 @@
 	}
 
 	.label {
-		font-weight: var(--wpds-typography-font-weight-emphasis, 600);
-		font-size: var(--wpds-typography-font-size-lg, 15px);
+		font-weight: var(--wpds-typography-font-weight-emphasis);
+		font-size: var(--wpds-typography-font-size-lg);
 	}
 
 	.note {
-		font-size: var(--wpds-typography-font-size-md, 13px);
+		font-size: var(--wpds-typography-font-size-md);
 	}
 }

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -1,11 +1,12 @@
 import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import { Text } from '@visx/text';
-import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { useTooltip } from '@visx/tooltip';
 import clsx from 'clsx';
-import { useCallback, useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo, useRef } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { BaseTooltip } from '../../components/tooltip';
+import { BoundedTooltip } from '../../components/tooltip/private/bounded-tooltip';
 import {
 	useDataWithPercentages,
 	useLegendVisibilityData,
@@ -18,7 +19,7 @@ import {
 	useGlobalChartsContext,
 	GlobalChartsContext,
 } from '../../providers';
-import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
+import { useStandaloneScopeClass } from '../../providers/chart-scope';
 import { attachSubComponents } from '../../utils';
 import { Center } from '../private/center';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
@@ -189,42 +190,25 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	const chartId = useChartId( providedChartId );
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
 		useTooltip< DataPointPercentageCalculated >();
+	const standaloneScopeClass = useStandaloneScopeClass();
 
-	// Set up portal tooltip for better z-index handling
-	// We get containerBounds to cancel out stale offsets in the position calculation
-	const { containerRef, TooltipInPortal, containerBounds } = useTooltipInPortal( {
-		detectBounds: true,
-		scroll: true,
-		debounce: 0,
-	} );
+	// The tooltip renders inside this element, so pointer coordinates are taken relative to it.
+	const containerRef = useRef< HTMLDivElement >( null );
 
 	const handleMouseMove = useCallback(
 		( event: MouseEvent< SVGElement >, arc: ArcData ) => {
-			// Don't show tooltip until container bounds are measured
-			if ( containerBounds.width === 0 || containerBounds.height === 0 ) {
+			const bounds = containerRef.current?.getBoundingClientRect();
+			if ( ! bounds ) {
 				return;
 			}
 
-			// Use clientX/Y and subtract containerBounds to cancel out any stale offset.
-			// TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX
-			// By passing (clientX - containerBounds.left), we get:
-			// (clientX - containerBounds.left) + containerBounds.left + scrollX = clientX + scrollX
-			// This gives correct page coordinates regardless of stale bounds.
 			showTooltip( {
 				tooltipData: arc.data,
-				tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
-				tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY,
+				tooltipLeft: event.clientX - bounds.left + tooltipOffsetX,
+				tooltipTop: event.clientY - bounds.top + tooltipOffsetY,
 			} );
 		},
-		[
-			containerBounds.width,
-			containerBounds.height,
-			containerBounds.left,
-			containerBounds.top,
-			showTooltip,
-			tooltipOffsetX,
-			tooltipOffsetY,
-		]
+		[ showTooltip, tooltipOffsetX, tooltipOffsetY ]
 	);
 
 	const handleMouseLeave = useCallback( () => {
@@ -311,7 +295,9 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 		const errorHeight = errorWidth / 2;
 
 		return (
-			<div className={ styles[ 'pie-semi-circle-chart' ] }>
+			<div
+				className={ clsx( 'pie-semi-circle-chart', styles[ 'pie-semi-circle-chart' ], className ) }
+			>
 				<svg width={ errorWidth } height={ errorHeight } data-testid="pie-chart-svg">
 					<text x="50%" y="50%" textAnchor="middle" className={ styles.error }>
 						{ message }
@@ -372,13 +358,6 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 				data-testid="pie-chart-container"
 				trailingContent={
 					<>
-						{ withTooltips && tooltipOpen && tooltipData && (
-							<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
-								<div className={ CHART_SCOPE_CLASS } role="tooltip">
-									{ renderTooltip( { tooltipData } ) }
-								</div>
-							</TooltipInPortal>
-						) }
 						{ htmlChildren }
 						{ otherChildren }
 					</>
@@ -398,7 +377,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 					const innerRadius = radius * ( 1 - thickness );
 
 					return (
-						<Center ref={ containerRef }>
+						<Center ref={ containerRef } className={ styles[ 'pie-semi-circle-chart__plot' ] }>
 							<svg
 								width={ width }
 								height={ height }
@@ -484,6 +463,13 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 									) }
 								</Group>
 							</svg>
+							{ withTooltips && tooltipOpen && tooltipData && (
+								<BoundedTooltip top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
+									<div className={ standaloneScopeClass } role="tooltip">
+										{ renderTooltip( { tooltipData } ) }
+									</div>
+								</BoundedTooltip>
+							) }
 						</Center>
 					);
 				} }

package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx

@@ -362,3 +362,53 @@ describe( 'PieSemiCircleChart', () => {
 		} );
 	} );
 } );
+
+// Chart container at (100, 50); the tooltip box measures 120x40. Everything
+// else the charts measure (wrapper, clipping lookups) reports the container.
+const mockRects = () =>
+	jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+		this: Element
+	) {
+		const box = this.classList.contains( 'visx-tooltip' );
+		return {
+			left: box ? 0 : 100,
+			top: box ? 0 : 50,
+			width: box ? 120 : 400,
+			height: box ? 40 : 300,
+			right: box ? 120 : 500,
+			bottom: box ? 40 : 350,
+			x: box ? 0 : 100,
+			y: box ? 0 : 50,
+			toJSON: () => ( {} ),
+		} as DOMRect;
+	} );
+
+describe( 'PieSemiCircleChart tooltip position', () => {
+	afterEach( () => {
+		jest.restoreAllMocks();
+	} );
+
+	it( 'places the box relative to the chart container, at the pointer plus the offsets', async () => {
+		mockRects();
+		const user = userEvent.setup();
+		renderPieChart( {
+			data: [
+				{ label: 'A', value: 60, valueDisplay: '60' },
+				{ label: 'B', value: 40, valueDisplay: '40' },
+			],
+			withTooltips: true,
+			width: 400,
+		} );
+
+		await user.pointer( {
+			target: screen.getAllByTestId( 'pie-segment' )[ 0 ],
+			coords: { clientX: 150, clientY: 120 },
+		} );
+
+		// (150, 120) is (50, 70) inside the container; the default -15px vertical
+		// offset makes that (50, 55), and the box adds 10px each way.
+		expect( screen.getByTestId( 'bounded-tooltip' ) ).toHaveStyle( {
+			transform: 'translate(60px, 65px)',
+		} );
+	} );
+} );

package/src/charts/private/chart-layout/chart-layout.module.scss

@@ -8,8 +8,9 @@
 	// The svg displaying inline includes a few px for descenders, which
 	// confuses some browser environments (e.g. headless Chrome) into
 	// constantly growing the container. Setting it to display as block avoids
-	// that.
-	svg {
+	// that. The tooltip renders in here too, and an inline icon in its rows
+	// must stay inline.
+	svg:not(:global(.visx-tooltip) svg) {
 		display: block;
 	}
 }

package/src/charts/private/svg-empty-state/svg-empty-state.module.scss

@@ -1,5 +1,5 @@
 .svg-empty-state {
 	text-align: center;
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md);
 	color: var(--a8c-charts-color-label-secondary);
 }

package/src/charts/private/test/axis-formatting.test.tsx

@@ -0,0 +1,85 @@
+/**
+ * @jest-environment <rootDir>/tests/environment-los-angeles.mjs
+ */
+import { render, screen } from '@testing-library/react';
+import { GlobalChartsProvider } from '../../../providers';
+import AreaChart from '../../area-chart/area-chart';
+import BarChart from '../../bar-chart/bar-chart';
+import LineChart from '../../line-chart/line-chart';
+import type { ReactNode } from 'react';
+
+const mockRefCallback = jest.fn();
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
+} ) );
+
+// 15:30 UTC is Aug 2 in the runtime zone and Aug 3 in Tokyo.
+const START = Date.parse( '2026-08-02T15:30:00Z' );
+
+const data = [
+	{
+		label: 'Series A',
+		data: Array.from( { length: 14 }, ( _, i ) => ( {
+			date: new Date( START + i * 24 * 60 * 60 * 1000 ),
+			value: 10 + i,
+		} ) ),
+		options: {},
+	},
+];
+
+const size = { width: 500, height: 300 };
+
+// Every axis labels the data's own buckets, so the fallback names the first
+// point's runtime-zone day rather than a round-numbered instant near it.
+const RUNTIME_TICK = 'Aug 2';
+
+const charts: [ string, ReactNode ][] = [
+	[ 'AreaChart', <AreaChart key="a" { ...size } data={ data } /> ],
+	[ 'BarChart', <BarChart key="b" { ...size } data={ data } /> ],
+	[ 'LineChart', <LineChart key="l" { ...size } data={ data } withGradientFill={ false } /> ],
+];
+
+describe.each( charts )( '%s x axis', ( _name, chart ) => {
+	const renderIn = ( props: { locale?: string; timeZone?: string } ) =>
+		render( <GlobalChartsProvider { ...props }>{ chart }</GlobalChartsProvider> );
+
+	it( "labels ticks in the provider's locale", () => {
+		renderIn( { locale: 'de-DE', timeZone: 'Asia/Tokyo' } );
+
+		expect( screen.getByText( '3. Aug.' ) ).toBeInTheDocument();
+	} );
+
+	it( 'falls back to the runtime locale and zone when the provider supplies none', () => {
+		renderIn( {} );
+
+		expect( screen.getByText( RUNTIME_TICK ) ).toBeInTheDocument();
+	} );
+
+	it( 'relabels when the provider swaps time zone', () => {
+		const { rerender } = render(
+			<GlobalChartsProvider timeZone="Asia/Tokyo">{ chart }</GlobalChartsProvider>
+		);
+
+		expect( screen.getByText( 'Aug 3' ) ).toBeInTheDocument();
+
+		rerender( <GlobalChartsProvider timeZone="Pacific/Honolulu">{ chart }</GlobalChartsProvider> );
+
+		expect( screen.getByText( 'Aug 2' ) ).toBeInTheDocument();
+	} );
+} );
+
+// The values WordPress hands out: `get_locale()` is `en_US`, and `timezone_string`
+// is empty on a site set to a raw UTC offset. Unsanitized, `Intl` throws during
+// render and React unmounts the host tree rather than one chart.
+describe( 'a host locale and zone Intl cannot use', () => {
+	it( 'still renders, in the runtime zone, and warns', () => {
+		render(
+			<GlobalChartsProvider locale="en_US" timeZone="">
+				<BarChart { ...size } data={ data } />
+			</GlobalChartsProvider>
+		);
+
+		expect( screen.getByText( 'Aug 2' ) ).toBeInTheDocument();
+		expect( console ).toHaveWarned();
+	} );
+} );