@automattic/charts 0.57.0 → 0.58.0

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

@@ -16,7 +16,7 @@ import {
 	useGlobalChartsTheme,
 } from '../../providers';
 import { formatMetricValue, attachSubComponents } from '../../utils';
-import { useChartChildren } from '../private/chart-composition';
+import { useChartChildren, renderLegendSlot } from '../private/chart-composition';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';
 import { useLeaderboardLegendItems } from './hooks';
@@ -110,31 +110,26 @@ const BarWithLabel = ( {
  * LeaderboardChart component displays a ranked list of data with progress bars
  * and optional comparison values.
  *
- * @param props                   - Component props
- * @param props.data              - Array of leaderboard entries to display
- * @param props.chartId           - Optional unique identifier for the chart
- * @param props.width             - Optional width of the chart container in pixels
- * @param props.height            - Optional height of the chart container in pixels
- * @param props.withComparison    - Whether to show comparison data
- * @param props.withOverlayLabel  - Whether to overlay the label on top of the bar
- * @param props.primaryColor      - Primary color for current period bars
- * @param props.secondaryColor    - Secondary color for comparison period bars
- * @param props.valueFormatter    - Custom formatter for values
- * @param props.deltaFormatter    - Custom formatter for delta values
- * @param props.loading           - Whether the chart is in loading state
- * @param props.animation         - Whether the chart should animate on load
- * @param props.showLegend        - Whether to show legend
- * @param props.legendOrientation - Legend orientation
- * @param props.legendPosition    - Legend position
- * @param props.legendAlignment   - Legend alignment
- * @param props.legendShape       - Legend shape
- * @param props.legendShapeStyles - Styles for legend shapes (width, height, margin)
- * @param props.legendLabels      - Custom labels for legend items
- * @param props.legendInteractive - Whether legend items are interactive (clickable to toggle series visibility)
- * @param props.gap               - Spacing between legend and chart content
- * @param props.children          - Child components for composition API
- * @param props.className         - Additional CSS class name
- * @param props.style             - Custom styling for the chart container
+ * @param props                  - Component props
+ * @param props.data             - Array of leaderboard entries to display
+ * @param props.chartId          - Optional unique identifier for the chart
+ * @param props.width            - Optional width of the chart container in pixels
+ * @param props.height           - Optional height of the chart container in pixels
+ * @param props.withComparison   - Whether to show comparison data
+ * @param props.withOverlayLabel - Whether to overlay the label on top of the bar
+ * @param props.primaryColor     - Primary color for current period bars
+ * @param props.secondaryColor   - Secondary color for comparison period bars
+ * @param props.valueFormatter   - Custom formatter for values
+ * @param props.deltaFormatter   - Custom formatter for delta values
+ * @param props.loading          - Whether the chart is in loading state
+ * @param props.animation        - Whether the chart should animate on load
+ * @param props.showLegend       - Whether to show legend
+ * @param props.legend           - Legend configuration (orientation, position, alignment, shape, shapeStyles, interactive)
+ * @param props.legendLabels     - Custom labels for legend items
+ * @param props.gap              - Spacing between legend and chart content
+ * @param props.children         - Child components for composition API
+ * @param props.className        - Additional CSS class name
+ * @param props.style            - Custom styling for the chart container
  * @return JSX element representing the leaderboard chart
  */
 const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
@@ -151,24 +146,22 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	animation,
 	loading = false,
 	showLegend = false,
-	legendOrientation = 'horizontal',
-	legendPosition = 'bottom',
-	legendAlignment = 'center',
-	legendShape = 'circle',
-	legendShapeStyles: legendShapeStylesProp,
+	legend = {},
 	legendLabels,
-	legendInteractive = false,
 	gap = 'md',
 	className,
 	style,
 	children,
 } ) => {
+	const legendInteractive = legend.interactive ?? false;
+	const legendPosition = legend.position ?? 'bottom';
+
 	const chartId = useChartId( providedChartId );
 	const { leaderboardChart: leaderboardChartSettings } = useGlobalChartsTheme();
-	const legendShapeStyles = { width: 8, height: 8, ...legendShapeStylesProp };
+	const legendShapeStyles = { width: 8, height: 8, ...legend.shapeStyles };
 
 	// Process children to extract compound components
-	const { otherChildren } = useChartChildren( children, 'LeaderboardChart' );
+	const { legendChildren, nonLegendChildren } = useChartChildren( children, 'LeaderboardChart' );
 	const {
 		labelSpacing,
 		rowGap,
@@ -281,8 +274,8 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 							? __( 'Loading…', 'jetpack-charts' )
 							: __( 'No data available', 'jetpack-charts' ) }
 					</div>
-					{ /* Render children from composition API */ }
-					{ otherChildren }
+
+					{ nonLegendChildren }
 				</Stack>
 			</SingleChartContext.Provider>
 		);
@@ -290,10 +283,13 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 
 	const legendElement = showLegend && (
 		<Legend
-			orientation={ legendOrientation }
+			orientation={ legend.orientation ?? 'horizontal' }
 			position={ legendPosition }
-			alignment={ legendAlignment }
-			shape={ legendShape }
+			alignment={ legend.alignment ?? 'center' }
+			labelStyles={ legend.labelStyles }
+			itemClassName={ legend.itemClassName }
+			itemStyles={ legend.itemStyles }
+			shape={ legend.shape ?? 'circle' }
 			shapeStyles={ legendShapeStyles }
 			chartId={ chartId }
 			interactive={ legendInteractive }
@@ -327,6 +323,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 				} }
 			>
 				{ legendPosition === 'top' && legendElement }
+				{ renderLegendSlot( legendChildren, 'top' ) }
 
 				<div className={ styles.leaderboardChart__content }>
 					{ allSeriesHidden ? (
@@ -377,9 +374,9 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 				</div>
 
 				{ legendPosition === 'bottom' && legendElement }
+				{ renderLegendSlot( legendChildren, 'bottom' ) }
 
-				{ /* Render children from composition API */ }
-				{ otherChildren }
+				{ nonLegendChildren }
 			</Stack>
 		</SingleChartContext.Provider>
 	);

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

@@ -169,8 +169,7 @@ describe( 'LeaderboardChart', () => {
 					data={ mockData }
 					withComparison={ true }
 					showLegend={ true }
-					legendShape="rect"
-					legendShapeStyles={ { width: 10, height: 6 } }
+					legend={ { shape: 'rect', shapeStyles: { width: 10, height: 6 } } }
 				/>
 			);
 
@@ -306,7 +305,7 @@ describe( 'LeaderboardChart', () => {
 					data={ mockData }
 					withComparison={ true }
 					showLegend={ true }
-					legendInteractive={ true }
+					legend={ { interactive: true } }
 				/>
 			);
 
@@ -320,7 +319,7 @@ describe( 'LeaderboardChart', () => {
 					data={ mockData }
 					withComparison={ true }
 					showLegend={ true }
-					legendInteractive={ false }
+					legend={ { interactive: false } }
 				/>
 			);
 
@@ -335,7 +334,7 @@ describe( 'LeaderboardChart', () => {
 					data={ mockData }
 					withComparison={ true }
 					showLegend={ true }
-					legendInteractive={ true }
+					legend={ { interactive: true } }
 				/>
 			);
 

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

@@ -1,6 +1,5 @@
 import { type ReactNode } from 'react';
 import { BaseChartProps, LeaderboardEntry } from '../../types';
-import type { LegendShapeStyles } from '../../components/legend';
 
 export interface LeaderboardChartProps
 	extends Pick<
@@ -8,16 +7,12 @@ export interface LeaderboardChartProps
 		| 'className'
 		| 'data'
 		| 'showLegend'
-		| 'legendOrientation'
-		| 'legendPosition'
-		| 'legendAlignment'
-		| 'legendShape'
+		| 'legend'
 		| 'chartId'
 		| 'width'
 		| 'height'
 		| 'size'
 		| 'gap'
-		| 'legendInteractive'
 		| 'animation'
 	> {
 	/**
@@ -62,11 +57,6 @@ export interface LeaderboardChartProps
 		'--a8c--charts--leaderboard--bar--border-radius'?: string;
 	};
 
-	/**
-	 * Styles for legend shapes (width, height, margin).
-	 */
-	legendShapeStyles?: LegendShapeStyles;
-
 	/**
 	 * Custom labels for legend items
 	 */

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

@@ -15,7 +15,6 @@ import {
 	useChartDataTransform,
 	useChartMargin,
 	useElementSize,
-	useHasLegendChild,
 	usePrefersReducedMotion,
 } from '../../hooks';
 import {
@@ -27,6 +26,7 @@ import {
 	useGlobalChartsTheme,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
+import { useChartChildren, renderLegendSlot } from '../private/chart-composition';
 import { DefaultGlyph } from '../private/default-glyph';
 import { SingleChartContext, type SingleChartRef } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';
@@ -256,15 +256,9 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 			withTooltips = true,
 			withTooltipCrosshairs,
 			showLegend = false,
-			legendOrientation = 'horizontal',
-			legendAlignment = 'center',
-			legendPosition = 'bottom',
-			legendMaxWidth,
-			legendTextOverflow = 'wrap',
-			legendItemClassName,
+			legend = {},
 			renderGlyph = defaultRenderGlyph,
 			glyphStyle = {},
-			legendShape = 'line',
 			withLegendGlyph = false,
 			withGradientFill = false,
 			smoothing = true,
@@ -272,7 +266,6 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 			renderTooltip = renderDefaultTooltip,
 			withStartGlyphs = false,
 			withEndGlyphs = false,
-			legendInteractive = false,
 			animation,
 			options = {},
 			onPointerDown = undefined,
@@ -285,6 +278,10 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		},
 		ref
 	) => {
+		const legendInteractive = legend.interactive ?? false;
+		const legendShape = legend.shape ?? 'line';
+		const legendPosition = legend.position ?? 'bottom';
+
 		const providerTheme = useGlobalChartsTheme();
 		const theme = useXYChartTheme( data );
 		const chartId = useChartId( providedChartId );
@@ -294,8 +291,9 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		const [ isNavigating, setIsNavigating ] = useState( false );
 		const internalChartRef = useRef< SingleChartRef >( null );
 
-		// Check if children contain a Legend component (composition pattern)
-		const hasLegendChild = useHasLegendChild( children );
+		// Process children for composition API (Legend, etc.)
+		const { legendChildren, nonLegendChildren } = useChartChildren( children, 'LineChart' );
+		const hasLegendChild = legendChildren.length > 0;
 
 		// Use the measured SVG wrapper height, falling back to the passed height if provided.
 		// When there's a legend (via prop or composition), we must wait for measurement because
@@ -454,11 +452,13 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 
 		const legendElement = showLegend && (
 			<Legend
-				orientation={ legendOrientation }
-				alignment={ legendAlignment }
+				orientation={ legend.orientation ?? 'horizontal' }
+				alignment={ legend.alignment ?? 'center' }
 				position={ legendPosition }
-				labelStyles={ { maxWidth: legendMaxWidth, textOverflow: legendTextOverflow } }
-				itemClassName={ legendItemClassName }
+				labelStyles={ legend.labelStyles }
+				itemClassName={ legend.itemClassName }
+				itemStyles={ legend.itemStyles }
+				shapeStyles={ legend.shapeStyles }
 				className={ styles[ 'line-chart__legend' ] }
 				shape={ legendShape }
 				chartId={ chartId }
@@ -492,6 +492,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 					} }
 				>
 					{ legendPosition === 'top' && legendElement }
+					{ renderLegendSlot( legendChildren, 'top' ) }
 
 					<div
 						className={ styles[ 'line-chart__svg-wrapper' ] }
@@ -654,8 +655,9 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 					</div>
 
 					{ legendPosition === 'bottom' && legendElement }
+					{ renderLegendSlot( legendChildren, 'bottom' ) }
 
-					{ children }
+					{ nonLegendChildren }
 				</Stack>
 			</SingleChartContext.Provider>
 		);

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

@@ -53,13 +53,15 @@ describe( 'LineChart', () => {
 		],
 	};
 
-	const renderWithTheme = ( props = {}, themeName = 'default' ) => {
+	const renderWithTheme = ( props = {}, themeName = 'default', children = undefined ) => {
 		const theme = THEME_MAP[ themeName ];
 
 		return render(
 			<GlobalChartsProvider theme={ theme }>
 				{ /* @ts-expect-error TODO Fix the missing props */ }
-				<LineChart { ...defaultProps } { ...props } />
+				<LineChart { ...defaultProps } { ...props }>
+					{ children }
+				</LineChart>
 			</GlobalChartsProvider>
 		);
 	};
@@ -130,36 +132,56 @@ describe( 'LineChart', () => {
 	} );
 
 	describe( 'Legend', () => {
+		const multiSeriesData = [
+			{
+				label: 'Series A',
+				data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+			},
+			{
+				label: 'Series B',
+				data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
+			},
+		];
+
 		test( 'shows legend when showLegend is true', () => {
-			renderWithTheme( {
-				showLegend: true,
-				data: [
-					{
-						label: 'Series A',
-						data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
-					},
-					{
-						label: 'Series B',
-						data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
-					},
-				],
-			} );
+			renderWithTheme( { showLegend: true, data: multiSeriesData } );
 			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
 			expect( screen.getByText( 'Series B' ) ).toBeInTheDocument();
 		} );
 
 		test( 'hides legend when showLegend is false', () => {
-			renderWithTheme( {
-				showLegend: false,
-				data: [
-					{
-						label: 'Series A',
-						data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
-					},
-				],
-			} );
+			renderWithTheme( { showLegend: false, data: multiSeriesData } );
 			expect( screen.queryByText( 'Series A' ) ).not.toBeInTheDocument();
 		} );
+
+		test( 'renders composition legend as child component', () => {
+			renderWithTheme( { data: multiSeriesData }, 'default', <LineChart.Legend /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Series B' ) ).toBeInTheDocument();
+		} );
+
+		test( 'renders composition legend regardless of showLegend value', () => {
+			renderWithTheme(
+				{ data: multiSeriesData, showLegend: false },
+				'default',
+				<LineChart.Legend />
+			);
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+		} );
+
+		test( 'renders composition legend in top position', () => {
+			renderWithTheme( { data: multiSeriesData }, 'default', <LineChart.Legend position="top" /> );
+
+			// Legend should appear before the chart content in DOM order
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+			const html = document.body.innerHTML;
+			expect( html.indexOf( 'data-testid="legend-horizontal"' ) ).toBeLessThan(
+				html.indexOf( 'role="grid"' )
+			);
+		} );
 	} );
 
 	describe( 'Gradient Fill', () => {
@@ -1178,7 +1200,7 @@ describe( 'LineChart', () => {
 						{ ...defaultProps }
 						withGradientFill={ false }
 						showLegend={ true }
-						legendInteractive={ true }
+						legend={ { interactive: true } }
 						chartId="test-interactive-chart"
 					/>
 				</GlobalChartsProvider>
@@ -1200,7 +1222,7 @@ describe( 'LineChart', () => {
 						{ ...defaultProps }
 						withGradientFill={ false }
 						showLegend={ true }
-						legendInteractive={ false }
+						legend={ { interactive: false } }
 						chartId="test-non-interactive-chart"
 					/>
 				</GlobalChartsProvider>
@@ -1218,7 +1240,7 @@ describe( 'LineChart', () => {
 						{ ...defaultProps }
 						withGradientFill={ false }
 						showLegend={ true }
-						legendInteractive={ true }
+						legend={ { interactive: true } }
 						// No chartId provided
 					/>
 				</GlobalChartsProvider>

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

@@ -41,7 +41,6 @@ export interface LineChartProps extends BaseChartProps< SeriesData[] > {
 		showVertical?: boolean;
 		showHorizontal?: boolean;
 	};
-	legendInteractive?: boolean;
 	children?: ReactNode;
 }
 

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

@@ -18,7 +18,12 @@ import {
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
 import { getStringWidth } from '../../visx/text';
-import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
+import {
+	ChartSVG,
+	ChartHTML,
+	useChartChildren,
+	renderLegendSlot,
+} from '../private/chart-composition';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation/';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive, ResponsiveConfig } from '../private/with-responsive';
@@ -93,13 +98,6 @@ export interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {
 	 */
 	legendValueDisplay?: LegendValueDisplay;
 
-	/**
-	 * Enable interactive legend items that can toggle segment visibility.
-	 * Requires chartId and GlobalChartsProvider.
-	 * When segments are hidden, percentages are recalculated so visible segments total 100%.
-	 */
-	legendInteractive?: boolean;
-
 	/**
 	 * Use the children prop to render additional elements on the chart.
 	 */
@@ -169,13 +167,7 @@ const PieChartInternal = ( {
 	withTooltips = false,
 	className,
 	showLegend = false,
-	legendOrientation = 'horizontal',
-	legendPosition = 'bottom',
-	legendAlignment = 'center',
-	legendMaxWidth,
-	legendTextOverflow = 'wrap',
-	legendItemClassName,
-	legendShape = 'circle',
+	legend = {},
 	width: propWidth,
 	height: propHeight,
 	size,
@@ -186,13 +178,15 @@ const PieChartInternal = ( {
 	cornerScale = 0,
 	showLabels = true,
 	legendValueDisplay = 'percentage',
-	legendInteractive = false,
 	children = null,
 	tooltipOffsetX = 0,
 	tooltipOffsetY = -15,
 	renderTooltip = renderDefaultPieTooltip,
 	gap = 'md',
 }: PieChartProps ) => {
+	const legendInteractive = legend.interactive ?? false;
+	const legendPosition = legend.position ?? 'bottom';
+
 	const providerTheme = useGlobalChartsTheme();
 	const chartId = useChartId( providedChartId );
 	const [ svgWrapperRef, svgWrapperWidth, svgWrapperHeight ] = useElementSize< HTMLDivElement >();
@@ -236,7 +230,10 @@ const PieChartInternal = ( {
 	const { isValid, message } = validateData( data );
 
 	// Process children to extract compound components
-	const { svgChildren, htmlChildren, otherChildren } = useChartChildren( children, 'PieChart' );
+	const { svgChildren, htmlChildren, legendChildren, otherChildren } = useChartChildren(
+		children,
+		'PieChart'
+	);
 
 	// Memoize metadata to prevent unnecessary re-registration
 	const chartMetadata = useMemo(
@@ -314,12 +311,14 @@ const PieChartInternal = ( {
 
 	const legendElement = showLegend && (
 		<Legend
-			orientation={ legendOrientation }
+			orientation={ legend.orientation ?? 'horizontal' }
 			position={ legendPosition }
-			alignment={ legendAlignment }
-			labelStyles={ { maxWidth: legendMaxWidth, textOverflow: legendTextOverflow } }
-			itemClassName={ legendItemClassName }
-			shape={ legendShape }
+			alignment={ legend.alignment ?? 'center' }
+			labelStyles={ legend.labelStyles }
+			itemClassName={ legend.itemClassName }
+			itemStyles={ legend.itemStyles }
+			shapeStyles={ legend.shapeStyles }
+			shape={ legend.shape ?? 'circle' }
 			chartId={ chartId }
 			interactive={ legendInteractive }
 		/>
@@ -350,6 +349,7 @@ const PieChartInternal = ( {
 				} }
 			>
 				{ legendPosition === 'top' && legendElement }
+				{ renderLegendSlot( legendChildren, 'top' ) }
 
 				<div className={ styles[ 'pie-chart__svg-wrapper' ] } ref={ svgWrapperRef }>
 					<svg
@@ -482,6 +482,7 @@ const PieChartInternal = ( {
 				</div>
 
 				{ legendPosition === 'bottom' && legendElement }
+				{ renderLegendSlot( legendChildren, 'bottom' ) }
 
 				{ withTooltips && tooltipOpen && tooltipData && (
 					<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { Group } from '@visx/group';
 import '@testing-library/jest-dom';
+import { GlobalChartsProvider } from '../../../providers';
 import { PieChartUnresponsive as PieChart } from '../index';
 
 describe( 'PieChart Composition API', () => {
@@ -10,6 +11,16 @@ describe( 'PieChart Composition API', () => {
 		{ label: 'C', value: 30, percentage: 30 },
 	];
 
+	const renderWithChildren = ( props = {}, children = undefined ) => {
+		return render(
+			<GlobalChartsProvider>
+				<PieChart data={ mockData } size={ 400 } { ...props }>
+					{ children }
+				</PieChart>
+			</GlobalChartsProvider>
+		);
+	};
+
 	describe( 'Compound Components', () => {
 		it( 'renders PieChart.SVG children inside the SVG element', () => {
 			render(
@@ -148,4 +159,34 @@ describe( 'PieChart Composition API', () => {
 			expect( svg!.contains( newHtml ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'Composition Legend', () => {
+		test( 'renders composition legend as child component', () => {
+			renderWithChildren( {}, <PieChart.Legend /> );
+
+			const legendItems = screen.getAllByTestId( 'legend-item' );
+			expect( legendItems ).toHaveLength( 3 );
+			expect( legendItems[ 0 ] ).toHaveTextContent( 'A' );
+			expect( legendItems[ 1 ] ).toHaveTextContent( 'B' );
+			expect( legendItems[ 2 ] ).toHaveTextContent( 'C' );
+		} );
+
+		test( 'renders composition legend regardless of showLegend value', () => {
+			renderWithChildren( { showLegend: false }, <PieChart.Legend /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 3 );
+		} );
+
+		test( 'renders composition legend in top position', () => {
+			renderWithChildren( {}, <PieChart.Legend position="top" /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 3 );
+
+			// Legend should appear before the chart SVG in DOM order
+			const html = document.body.innerHTML;
+			expect( html.indexOf( 'data-testid="legend-horizontal"' ) ).toBeLessThan(
+				html.indexOf( 'data-testid="pie-segment"' )
+			);
+		} );
+	} );
 } );