@automattic/charts 3.2.0 → 4.1.0

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

@@ -2,10 +2,19 @@ import { formatNumberCompact } from '@automattic/number-formatters';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import { useDeepMemo } from '../../../hooks';
-import { getBandTickValues, getBucketResolution, getFormatter } from '../../private/time-axis';
+import { useChartFormatting } from '../../../providers';
+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 type { DataPointDate, BaseChartProps, SeriesData, TickResolution } from '../../../types';
+import type {
+	DataPointDate,
+	BaseChartProps,
+	ChartFormatting,
+	SeriesData,
+	TickResolution,
+} from '../../../types';
 import type { TickFormatter } from '@visx/axis';
 
 /** Outer padding of the category band scale (space at the chart edges). */
@@ -24,7 +33,7 @@ const TOOLTIP_FORMAT_BY_RESOLUTION: Record<
 	Exclude< TickResolution, 'week' >,
 	Intl.DateTimeFormatOptions
 > = {
-	hour: { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', hour12: true },
+	hour: { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric' },
 	day: { year: 'numeric', month: 'long', day: 'numeric' },
 	month: { year: 'numeric', month: 'long' },
 	year: { year: 'numeric' },
@@ -36,31 +45,33 @@ const TOOLTIP_FORMAT_BY_RESOLUTION: Record<
  *
  * @param data           - Date-based series, already parsed and sorted by `useChartDataTransform`.
  * @param tickResolution - Caller-declared bucket resolution, when known.
+ * @param formatting     - Host locale and time zone.
  * @return Tooltip label formatter.
  */
-const getTooltipFormatter = ( data: SeriesData[], tickResolution?: TickResolution ) => {
+const getTooltipFormatter = (
+	data: SeriesData[],
+	tickResolution: TickResolution | undefined,
+	formatting: ChartFormatting
+) => {
 	// Only a declared 'week' reaches this branch: seven-day spacing is
 	// indistinguishable from sparse daily data, so inference reports 'day'.
 	if ( tickResolution === 'week' ) {
+		const formatDay = createDateFormatter( TOOLTIP_FORMAT_BY_RESOLUTION.day, formatting );
 		return ( timestamp: number ) =>
 			sprintf(
 				/* translators: %s is the first day of the week the bar covers. */
 				__( 'Week of %s', 'jetpack-charts' ),
-				new Date( timestamp ).toLocaleDateString( undefined, {
-					year: 'numeric',
-					month: 'long',
-					day: 'numeric',
-				} )
+				formatDay( timestamp )
 			);
 	}
 
-	// Fall back to the day format rather than `undefined` options, which would
-	// print a full locale date-time for an unrecognised `tickResolution`.
+	// Fall back to the day format rather than empty options, which would print a
+	// bare numeric date for an unrecognized `tickResolution`.
 	const format =
 		TOOLTIP_FORMAT_BY_RESOLUTION[ getBucketResolution( data, tickResolution ) ] ??
 		TOOLTIP_FORMAT_BY_RESOLUTION.day;
 
-	return ( timestamp: number ) => new Date( timestamp ).toLocaleString( undefined, format );
+	return createDateFormatter( format, formatting );
 };
 
 const identity = ( label: string ) => label;
@@ -152,6 +163,7 @@ export function useBarChartOptions(
 	// Callers reasonably pass an object literal, which is a fresh reference every
 	// render and would defeat every memo below.
 	const stableOptions = useDeepMemo( options );
+	const formatting = useChartFormatting();
 
 	// `labelOverflow` and `tickResolution` are consumed by this hook rather than
 	// forwarded — visx has an axis prop for neither — and `tickFormat` is merged
@@ -202,11 +214,11 @@ export function useBarChartOptions(
 		// formatter, which narrows with the overall span as well as the bucket
 		// size; the tooltip stays at the bucket's own granularity.
 		const hasLabels = Boolean( data?.[ 0 ]?.data?.[ 0 ]?.label );
-		const timeTickFormatter = hasLabels ? null : getFormatter( data, tickResolution );
+		const timeTickFormatter = hasLabels ? null : getFormatter( data, tickResolution, formatting );
 		const labelFormatter = timeTickFormatter ? byBucket( timeTickFormatter ) : identity;
 		const tooltipDatumFormatter = hasLabels
 			? labelFormatter
-			: byBucket( getTooltipFormatter( data, tickResolution ) );
+			: byBucket( getTooltipFormatter( data, tickResolution, formatting ) );
 		const valueFormatter = formatNumberCompact as TickFormatter< unknown >;
 
 		const bandDomain = timeTickFormatter ? getBandDomain( data, isSeriesRendered ) : null;
@@ -244,7 +256,7 @@ export function useBarChartOptions(
 				yScale: bandScale,
 			},
 		};
-	}, [ data, tickResolution, isSeriesRendered ] );
+	}, [ data, tickResolution, isSeriesRendered, formatting ] );
 
 	return useMemo( () => {
 		const orientationKey = horizontal ? 'horizontal' : 'vertical';

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

@@ -2,6 +2,7 @@ import { formatNumberCompact } from '@automattic/number-formatters';
 import { Group } from '@visx/group';
 import { createScale, scaleBand } from '@visx/scale';
 import { Text, type TextProps } from '@visx/text';
+import clsx from 'clsx';
 import { useContext, useMemo } from 'react';
 import { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } from '../../providers';
 import { isValidHexColor, lightenHexColor } from '../../utils';
@@ -231,6 +232,7 @@ const BarListChartInternal: FC< BarListChartProps > = ( {
 		bottom: 0,
 		top: 0,
 	},
+	className,
 	...rest
 } ) => {
 	const { getElementStyles } = useGlobalChartsContext();
@@ -298,6 +300,9 @@ const BarListChartInternal: FC< BarListChartProps > = ( {
 		<BarChartUnresponsive
 			orientation="horizontal"
 			gridVisibility={ 'none' }
+			// The root carries `bar-chart` too, since a bar list renders through one. This class is
+			// how a consumer reaches a bar list without reaching every bar chart.
+			className={ clsx( 'bar-list-chart', className ) }
 			data={ tintedData }
 			width={ width }
 			height={ height }

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -1,4 +1,5 @@
 .conversion-funnel-chart {
+	position: relative;
 
 	&--loading {
 		opacity: 0.6;
@@ -14,21 +15,29 @@
 	overflow: hidden;
 	color: var(--a8c-charts-color-label);
 	text-overflow: ellipsis;
-	font-size: var(--wpds-typography-font-size-xl, 20px);
+	font-size: var(--wpds-typography-font-size-xl);
 	font-style: normal;
-	font-weight: var(--wpds-typography-font-weight-emphasis, 600);
-	line-height: var(--wpds-typography-line-height-sm, 20px);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: var(--wpds-typography-line-height-sm);
 	margin: 0;
 }
 
 .change-indicator {
 	overflow: hidden;
 	text-overflow: ellipsis;
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md);
 	font-style: normal;
-	font-weight: var(--wpds-typography-font-weight-emphasis, 600);
-	line-height: var(--wpds-typography-line-height-sm, 20px);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: var(--wpds-typography-line-height-sm);
 	margin: 0;
+
+	&--positive {
+		color: var(--a8c-charts-color-trend-up);
+	}
+
+	&--negative {
+		color: var(--a8c-charts-color-trend-down);
+	}
 }
 
 .funnel-container {
@@ -44,8 +53,8 @@
 
 	&--animated {
 		transition:
-			opacity var(--wpds-motion-duration-lg, 300ms)
-			var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
+			opacity var(--wpds-motion-duration-lg)
+			var(--wpds-motion-easing-subtle);
 	}
 
 	&--blurred {
@@ -55,9 +64,9 @@
 
 .step-label {
 	color: var(--a8c-charts-color-label-secondary);
-	font-size: var(--wpds-typography-font-size-sm, 12px);
-	font-weight: var(--wpds-typography-font-weight-default, 400);
-	line-height: var(--wpds-typography-line-height-xs, 16px);
+	font-size: var(--wpds-typography-font-size-sm);
+	font-weight: var(--wpds-typography-font-weight-default);
+	line-height: var(--wpds-typography-line-height-xs);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -65,14 +74,15 @@
 
 .step-rate {
 	color: var(--a8c-charts-color-label);
-	font-size: var(--wpds-typography-font-size-md, 13px);
-	font-weight: var(--wpds-typography-font-weight-emphasis, 600);
-	line-height: var(--wpds-typography-line-height-xs, 16px);
+	font-size: var(--wpds-typography-font-size-md);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: var(--wpds-typography-line-height-xs);
 }
 
 .bar-container {
 	flex: 1;
 	border-radius: var(--a8c-charts-border-radius-bar);
+	background-color: var(--a8c-charts-color-surface-secondary);
 	position: relative;
 	cursor: pointer;
 }
@@ -108,30 +118,30 @@
 	background: var(--a8c-charts-color-surface);
 
 	// Override .visx-tooltip inline styles.
-	border-radius: var(--wpds-border-radius-md, 4px) !important;
-	padding: var(--wpds-dimension-padding-md, 12px) !important;
+	border-radius: var(--wpds-border-radius-md) !important;
+	padding: var(--wpds-dimension-padding-md) !important;
 	box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
 
 }
 
 .tooltip-title {
 	color: var(--a8c-charts-color-label);
-	font-size: var(--wpds-typography-font-size-sm, 12px);
+	font-size: var(--wpds-typography-font-size-sm);
 	font-style: normal;
-	font-weight: var(--wpds-typography-font-weight-default, 400);
-	line-height: var(--wpds-typography-line-height-xs, 16px);
+	font-weight: var(--wpds-typography-font-weight-default);
+	line-height: var(--wpds-typography-line-height-xs);
 }
 
 .tooltip-content {
 	color: var(--a8c-charts-color-label);
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md);
 	font-style: normal;
-	font-weight: var(--wpds-typography-font-weight-emphasis, 600);
-	line-height: var(--wpds-typography-line-height-sm, 20px);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: var(--wpds-typography-line-height-sm);
 }
 
 .empty-state {
 	text-align: center;
 	color: var(--a8c-charts-color-label-secondary);
-	font-size: var(--wpds-typography-font-size-lg, 15px);
+	font-size: var(--wpds-typography-font-size-lg);
 }

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx

@@ -1,7 +1,8 @@
-import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { useTooltip } from '@visx/tooltip';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { type FC, useRef, useMemo, useEffect, useState, useCallback, useContext } from 'react';
+import { BoundedTooltip } from '../../components/tooltip/private/bounded-tooltip';
 import { usePrefersReducedMotion } from '../../hooks';
 import {
 	GlobalChartsProvider,
@@ -9,11 +10,11 @@ import {
 	ChartScopeContext,
 	useChartId,
 	useChartRegistration,
-	useGlobalChartsTheme,
 	useGlobalChartsContext,
 } from '../../providers';
-import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
-import { formatPercentage, hexToRgba } from '../../utils';
+import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
+import { useStandaloneScopeClass } from '../../providers/chart-scope';
+import { formatPercentage } from '../../utils';
 import styles from './conversion-funnel-chart.module.scss';
 import { useFunnelSelection } from './private';
 import type { FunnelStep, ConversionFunnelChartProps } from './types';
@@ -53,7 +54,6 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	renderTooltip,
 } ) => {
 	const chartId = useChartId( providedChartId );
-	const { conversionFunnelChart: conversionFunnelChartSettings } = useGlobalChartsTheme();
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef< HTMLDivElement >( null );
 	const selectedBarRef = useRef< HTMLDivElement | null >( null );
@@ -66,27 +66,9 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	// Use custom hook for selection management
 	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } =
 		useFunnelSelection( hideTooltip );
-	const {
-		containerRef: portalContainerRef,
-		TooltipInPortal,
-		containerBounds,
-	} = useTooltipInPortal( {
-		// use TooltipWithBounds for boundary detection
-		detectBounds: true,
-		// when tooltip containers are scrolled, this will correctly update the Tooltip position
-		scroll: true,
-	} );
-
-	// `useTooltipInPortal` returns a fresh `containerRef` closure on every render, so depending on it directly would give this callback a new identity every render — React then detaches and reattaches the ref on every commit, flushing the scope context to null and back. Reading it through a ref keeps the callback's identity genuinely stable.
-	const portalContainerRefRef = useRef( portalContainerRef );
-	useEffect( () => {
-		portalContainerRefRef.current = portalContainerRef;
-	}, [ portalContainerRef ] );
-
-	// Stable identity so React doesn't detach/reattach (and re-render the scope context) on every commit. Keep all three assignments, in the same order, and keep it firing on unmount (node === null).
+	const standaloneScopeClass = useStandaloneScopeClass();
+	// Stable identity so React doesn't detach/reattach (and re-render the scope context) on every commit. Keep it firing on unmount (node === null).
 	const setChartRef = useCallback( ( node: HTMLDivElement | null ) => {
-		// Set containerRef for @visx coordinate system
-		portalContainerRefRef.current( node );
 		chartRef.current = node;
 		setScopeNode( node );
 	}, [] );
@@ -110,43 +92,32 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 		[ showTooltip ]
 	);
 
-	// Helper function to get tooltip coordinates for mouse events
-	// 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 correct page coordinates
-	// regardless of whether bounds are stale (e.g., after dashboard customization).
-	const getMouseTooltipCoords = useCallback(
-		( event: React.MouseEvent ) => {
-			// Don't return coords until container bounds are measured
-			if ( containerBounds.width === 0 || containerBounds.height === 0 ) {
-				return null;
-			}
+	// The chart root positions the tooltip, so coordinates are taken relative to it.
+	const getMouseTooltipCoords = useCallback( ( event: React.MouseEvent ) => {
+		const bounds = chartRef.current?.getBoundingClientRect();
+		if ( ! bounds ) {
+			return null;
+		}
 
-			return {
-				x: event.clientX - containerBounds.left,
-				y: event.clientY - containerBounds.top,
-			};
-		},
-		[ containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top ]
-	);
-
-	// Helper function to get tooltip coordinates for keyboard events
-	// Use fresh getBoundingClientRect() and subtract containerBounds to cancel out stale offset.
-	const getKeyboardTooltipCoords = useCallback(
-		( event: React.KeyboardEvent ) => {
-			// Don't return coords until container bounds are measured
-			if ( containerBounds.width === 0 || containerBounds.height === 0 ) {
-				return null;
-			}
+		return {
+			x: event.clientX - bounds.left,
+			y: event.clientY - bounds.top,
+		};
+	}, [] );
 
-			const rect = event.currentTarget.getBoundingClientRect();
-			// Calculate center of element in viewport coordinates, then subtract containerBounds
-			const x = rect.left + rect.width / 2 - containerBounds.left;
-			const y = rect.top - containerBounds.top;
-			return { x, y };
-		},
-		[ containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top ]
-	);
+	// Keyboard interaction anchors the tooltip at the top centre of the focused step.
+	const getKeyboardTooltipCoords = useCallback( ( event: React.KeyboardEvent ) => {
+		const bounds = chartRef.current?.getBoundingClientRect();
+		if ( ! bounds ) {
+			return null;
+		}
+
+		const rect = event.currentTarget.getBoundingClientRect();
+		return {
+			x: rect.left + rect.width / 2 - bounds.left,
+			y: rect.top - bounds.top,
+		};
+	}, [] );
 
 	// Helper function to handle step interaction (both click and keyboard)
 	const handleStepInteraction = useCallback(
@@ -246,32 +217,26 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	// Resolve height: explicit height prop > style.height > default 100%
 	const resolvedHeight = height ?? style?.height ?? '100%';
 
-	// Get component settings from theme with fallbacks
-	const { primaryColor, backgroundColor, positiveChangeColor, negativeChangeColor } =
-		conversionFunnelChartSettings;
-
-	// Resolve bar color using getElementStyles with primaryColor as override
+	// The bar takes the first palette slot; move `--a8c-charts-color-series-1` to change it.
 	const { color: barColor } = getElementStyles
-		? getElementStyles( {
-				index: 0,
-				overrideColor: primaryColor,
-		  } )
-		: { color: primaryColor || '#000000' };
+		? getElementStyles( { index: 0 } )
+		: { color: '#000000' };
 
-	// Determine change indicator color
 	const isPositiveChange = changeIndicator?.startsWith( '+' );
-	const changeColor = isPositiveChange ? positiveChangeColor : negativeChangeColor;
-
-	// Create light background version of primary color if not set
-	const barBackgroundColor =
-		backgroundColor || hexToRgba( barColor, 0.08 ) || 'rgba(0, 0, 0, 0.08)';
+	// Only for `renderMainMetric`, which hands a consumer's own markup something to paint with.
+	const changeColor = isPositiveChange ? CATALOG_POINTERS.trendUp : CATALOG_POINTERS.trendDown;
 
 	// Default main metric rendering function
 	const renderDefaultMainMetric = () => (
 		<>
 			<span className={ styles[ 'main-rate' ] }>{ formatPercentage( mainRate ) }</span>
 			{ changeIndicator && (
-				<span className={ styles[ 'change-indicator' ] } style={ { color: changeColor } }>
+				<span
+					className={ clsx(
+						styles[ 'change-indicator' ],
+						styles[ isPositiveChange ? 'change-indicator--positive' : 'change-indicator--negative' ]
+					) }
+				>
 					{ changeIndicator }
 				</span>
 			) }
@@ -322,6 +287,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 				data-testid="conversion-funnel-chart"
 				ref={ setScopeNode }
 				className={ clsx(
+					'conversion-funnel-chart',
 					styles[ 'conversion-funnel-chart' ],
 					loading && styles[ 'conversion-funnel-chart--loading' ],
 					className
@@ -339,112 +305,104 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	const maxRate = Math.max( ...steps.map( step => step.rate ) );
 
 	return (
-		<>
-			<Stack
-				direction="column"
-				gap="xl"
-				data-testid="conversion-funnel-chart"
-				ref={ setChartRef }
-				className={ clsx(
-					styles[ 'conversion-funnel-chart' ],
-					loading && styles[ 'conversion-funnel-chart--loading' ],
-					className
+		<Stack
+			direction="column"
+			gap="xl"
+			data-testid="conversion-funnel-chart"
+			ref={ setChartRef }
+			className={ clsx(
+				'conversion-funnel-chart',
+				styles[ 'conversion-funnel-chart' ],
+				loading && styles[ 'conversion-funnel-chart--loading' ],
+				className
+			) }
+			style={ { ...style, height: resolvedHeight } }
+		>
+			<ChartScopeContext.Provider value={ scopeNode }>
+				{ /* Main Metric */ }
+				{ renderMainMetric ? (
+					renderMainMetric( {
+						mainRate,
+						changeIndicator,
+						className: styles[ 'main-metric' ],
+						changeColor,
+					} )
+				) : (
+					<Stack direction="row" align="baseline" gap="sm" className={ styles[ 'main-metric' ] }>
+						{ renderDefaultMainMetric() }
+					</Stack>
 				) }
-				style={ { ...style, height: resolvedHeight } }
-			>
-				<ChartScopeContext.Provider value={ scopeNode }>
-					{ /* Main Metric */ }
-					{ renderMainMetric ? (
-						renderMainMetric( {
-							mainRate,
-							changeIndicator,
-							className: styles[ 'main-metric' ],
-							changeColor,
-						} )
-					) : (
-						<Stack direction="row" align="baseline" gap="sm" className={ styles[ 'main-metric' ] }>
-							{ renderDefaultMainMetric() }
-						</Stack>
-					) }
 
-					{ /* Funnel Steps */ }
-					<Stack
-						direction="row"
-						align="flex-end"
-						gap="lg"
-						className={ styles[ 'funnel-container' ] }
-					>
-						{ steps.map( ( step, index ) => {
-							const barHeight = ( step.rate / maxRate ) * 100;
-							const { isBlurred } = getStepState( step.id );
-
-							return (
+				{ /* Funnel Steps */ }
+				<Stack direction="row" align="flex-end" gap="lg" className={ styles[ 'funnel-container' ] }>
+					{ steps.map( ( step, index ) => {
+						const barHeight = ( step.rate / maxRate ) * 100;
+						const { isBlurred } = getStepState( step.id );
+
+						return (
+							<Stack
+								key={ step.id }
+								direction="column"
+								data-testid="funnel-step"
+								className={ clsx(
+									styles[ 'funnel-step' ],
+									isColorPaletteResolved && styles[ 'funnel-step--animated' ],
+									isBlurred && styles[ 'funnel-step--blurred' ]
+								) }
+								gap="xl"
+							>
+								{ /* Step Label and Rate */ }
+								<Stack direction="column" gap="xs">
+									{ renderStepLabel ? (
+										renderStepLabel( {
+											step,
+											index,
+											className: styles[ 'step-label' ],
+										} )
+									) : (
+										<span className={ styles[ 'step-label' ] }>{ step.label }</span>
+									) }
+									{ renderStepRate ? (
+										renderStepRate( {
+											step,
+											index,
+											className: styles[ 'step-rate' ],
+										} )
+									) : (
+										<span className={ styles[ 'step-rate' ] }>
+											{ formatPercentage( step.rate ) }
+										</span>
+									) }
+								</Stack>
+
+								{ /* Funnel Bar */ }
 								<Stack
-									key={ step.id }
 									direction="column"
-									data-testid="funnel-step"
-									className={ clsx(
-										styles[ 'funnel-step' ],
-										isColorPaletteResolved && styles[ 'funnel-step--animated' ],
-										isBlurred && styles[ 'funnel-step--blurred' ]
-									) }
-									gap="xl"
+									justify="flex-end"
+									className={ styles[ 'bar-container' ] }
+									onClick={ stepHandlers.get( step.id )?.onClick }
+									onKeyDown={ stepHandlers.get( step.id )?.onKeyDown }
+									role="button"
+									tabIndex={ isBlurred ? -1 : 0 }
+									aria-label={ step.label }
 								>
-									{ /* Step Label and Rate */ }
-									<Stack direction="column" gap="xs">
-										{ renderStepLabel ? (
-											renderStepLabel( {
-												step,
-												index,
-												className: styles[ 'step-label' ],
-											} )
-										) : (
-											<span className={ styles[ 'step-label' ] }>{ step.label }</span>
-										) }
-										{ renderStepRate ? (
-											renderStepRate( {
-												step,
-												index,
-												className: styles[ 'step-rate' ],
-											} )
-										) : (
-											<span className={ styles[ 'step-rate' ] }>
-												{ formatPercentage( step.rate ) }
-											</span>
-										) }
-									</Stack>
-
-									{ /* Funnel Bar */ }
-									<Stack
-										direction="column"
-										justify="flex-end"
-										className={ styles[ 'bar-container' ] }
-										onClick={ stepHandlers.get( step.id )?.onClick }
-										onKeyDown={ stepHandlers.get( step.id )?.onKeyDown }
-										role="button"
-										tabIndex={ isBlurred ? -1 : 0 }
-										aria-label={ step.label }
-										style={ { backgroundColor: barBackgroundColor } }
-									>
-										<div
-											className={ clsx( styles[ 'funnel-bar' ], {
-												[ styles[ 'funnel-bar--animated' ] ]:
-													animation && ! loading && ! prefersReducedMotion,
-											} ) }
-											style={ {
-												height: `${ barHeight }%`,
-												backgroundColor: barColor,
-											} }
-										/>
-									</Stack>
+									<div
+										className={ clsx( styles[ 'funnel-bar' ], {
+											[ styles[ 'funnel-bar--animated' ] ]:
+												animation && ! loading && ! prefersReducedMotion,
+										} ) }
+										style={ {
+											height: `${ barHeight }%`,
+											backgroundColor: barColor,
+										} }
+									/>
 								</Stack>
-							);
-						} ) }
-					</Stack>
-				</ChartScopeContext.Provider>
-			</Stack>
+							</Stack>
+						);
+					} ) }
+				</Stack>
+			</ChartScopeContext.Provider>
 
-			{ /* Tooltip Portal */ }
 			{ tooltipOpen &&
 				tooltipData &&
 				( () => {
@@ -462,18 +420,16 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 					if ( ! tooltipContent ) return null;
 
 					return (
-						<TooltipInPortal
-							// set this to random so it correctly updates with parent bounds
-							key={ Math.random() }
+						<BoundedTooltip
 							top={ tooltipTop }
 							left={ tooltipLeft }
-							className={ clsx( CHART_SCOPE_CLASS, styles[ 'tooltip-wrapper' ] ) }
+							className={ clsx( standaloneScopeClass, styles[ 'tooltip-wrapper' ] ) }
 						>
 							{ tooltipContent }
-						</TooltipInPortal>
+						</BoundedTooltip>
 					);
 				} )() }
-		</>
+		</Stack>
 	);
 };