@automattic/charts 0.56.7 → 0.58.0

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

@@ -1,11 +1,8 @@
 /* eslint-disable @wordpress/no-unsafe-wp-apis */
-import {
-	__experimentalVStack as VStack,
-	__experimentalGrid as Grid,
-	__experimentalText as Text,
-} from '@wordpress/components';
+import { __experimentalGrid as Grid, __experimentalText as Text } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useContext, useMemo, type FC } from 'react';
 import { Legend } from '../../components/legend';
@@ -19,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';
@@ -113,34 +110,33 @@ 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.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.legendShapeWidth  - Width of legend shapes in pixels
- * @param props.legendShapeHeight - Height of legend shapes in pixels
- * @param props.legendLabels      - Custom labels for legend items
- * @param props.legendInteractive - Whether legend items are interactive (clickable to toggle series visibility)
- * @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 > = ( {
 	data,
 	chartId: providedChartId,
+	width: propWidth,
+	height: propHeight,
 	withComparison = false,
 	withOverlayLabel = false,
 	primaryColor,
@@ -150,23 +146,22 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	animation,
 	loading = false,
 	showLegend = false,
-	legendOrientation = 'horizontal',
-	legendPosition = 'bottom',
-	legendAlignment = 'center',
-	legendShape = 'circle',
-	legendShapeWidth = 8,
-	legendShapeHeight = 8,
+	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, ...legend.shapeStyles };
 
 	// Process children to extract compound components
-	const { otherChildren } = useChartChildren( children, 'LeaderboardChart' );
+	const { legendChildren, nonLegendChildren } = useChartChildren( children, 'LeaderboardChart' );
 	const {
 		labelSpacing,
 		rowGap,
@@ -258,26 +253,49 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					chartHeight: 0,
 				} }
 			>
-				<div
+				<Stack
+					direction="column"
+					data-testid="leaderboard-chart-container"
 					className={ clsx(
 						styles.leaderboardChart,
+						{ [ styles[ 'leaderboardChart--responsive' ] ]: ! propWidth && ! propHeight },
 						{ [ styles[ 'leaderboardChart--loading' ] ]: loading },
 						className
 					) }
-					style={ style }
+					gap={ gap }
+					style={ {
+						...style,
+						width: propWidth || undefined,
+						height: propHeight || undefined,
+					} }
 				>
 					<div className={ styles.emptyState }>
 						{ loading
 							? __( 'Loading…', 'jetpack-charts' )
 							: __( 'No data available', 'jetpack-charts' ) }
 					</div>
-					{ /* Render children from composition API */ }
-					{ otherChildren }
-				</div>
+
+					{ nonLegendChildren }
+				</Stack>
 			</SingleChartContext.Provider>
 		);
 	}
 
+	const legendElement = showLegend && (
+		<Legend
+			orientation={ legend.orientation ?? 'horizontal' }
+			position={ legendPosition }
+			alignment={ legend.alignment ?? 'center' }
+			labelStyles={ legend.labelStyles }
+			itemClassName={ legend.itemClassName }
+			itemStyles={ legend.itemStyles }
+			shape={ legend.shape ?? 'circle' }
+			shapeStyles={ legendShapeStyles }
+			chartId={ chartId }
+			interactive={ legendInteractive }
+		/>
+	);
+
 	return (
 		<SingleChartContext.Provider
 			value={ {
@@ -286,76 +304,80 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 				chartHeight: 0,
 			} }
 		>
-			<div
+			<Stack
+				direction="column"
+				data-testid="leaderboard-chart-container"
 				className={ clsx(
 					styles.leaderboardChart,
 					{
+						[ styles[ 'leaderboardChart--responsive' ] ]: ! propWidth && ! propHeight,
 						[ styles[ 'leaderboardChart--loading' ] ]: loading,
-						[ styles[ 'leaderboardChart--with-legend' ] ]: showLegend,
-						[ styles[ 'leaderboardChart--legend-top' ] ]: showLegend && legendPosition === 'top',
 					},
 					className
 				) }
-				style={ style }
+				gap={ gap }
+				style={ {
+					...style,
+					width: propWidth || undefined,
+					height: propHeight || undefined,
+				} }
 			>
-				{ allSeriesHidden ? (
-					<div className={ styles.emptyState }>
-						{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }
-					</div>
-				) : (
-					<Grid templateColumns="minmax(0, 1fr) auto" rowGap={ rowGap } columnGap={ columnGap }>
-						{ data.map( entry => {
-							const colorIndex = Math.sign( entry.delta ) + 1;
-							const deltaColor = deltaColors[ colorIndex ];
-
-							return (
-								<Fragment key={ entry.id }>
-									<VStack spacing={ labelSpacing }>
-										<BarWithLabel
-											entry={ entry }
-											withComparison={ withComparison }
-											withOverlayLabel={ withOverlayLabel }
-											primaryColor={ resolvedPrimaryColor }
-											secondaryColor={ resolvedSecondaryColor }
-											isPrimaryVisible={ isPrimaryVisible }
-											isComparisonVisible={ isComparisonVisible }
-											animation={ animation && ! loading && ! prefersReducedMotion }
-										/>
-									</VStack>
-
-									<div
-										className={ clsx( styles.valueContainer, {
-											[ styles.overlayLabel ]: withOverlayLabel,
-										} ) }
-									>
-										{ isPrimaryVisible && <Text>{ valueFormatter( entry.currentValue ) }</Text> }
-
-										{ withComparison && isComparisonVisible && (
-											<Text style={ { color: deltaColor } }>{ deltaFormatter( entry.delta ) }</Text>
-										) }
-									</div>
-								</Fragment>
-							);
-						} ) }
-					</Grid>
-				) }
+				{ legendPosition === 'top' && legendElement }
+				{ renderLegendSlot( legendChildren, 'top' ) }
 
-				{ showLegend && (
-					<Legend
-						orientation={ legendOrientation }
-						position={ legendPosition }
-						alignment={ legendAlignment }
-						shape={ legendShape }
-						shapeWidth={ legendShapeWidth }
-						shapeHeight={ legendShapeHeight }
-						chartId={ chartId }
-						interactive={ legendInteractive }
-					/>
-				) }
+				<div className={ styles.leaderboardChart__content }>
+					{ allSeriesHidden ? (
+						<div className={ styles.emptyState }>
+							{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }
+						</div>
+					) : (
+						<Grid templateColumns="minmax(0, 1fr) auto" rowGap={ rowGap } columnGap={ columnGap }>
+							{ data.map( entry => {
+								const colorIndex = Math.sign( entry.delta ) + 1;
+								const deltaColor = deltaColors[ colorIndex ];
+
+								return (
+									<Fragment key={ entry.id }>
+										<Stack direction="column" gap={ labelSpacing }>
+											<BarWithLabel
+												entry={ entry }
+												withComparison={ withComparison }
+												withOverlayLabel={ withOverlayLabel }
+												primaryColor={ resolvedPrimaryColor }
+												secondaryColor={ resolvedSecondaryColor }
+												isPrimaryVisible={ isPrimaryVisible }
+												isComparisonVisible={ isComparisonVisible }
+												animation={ animation && ! loading && ! prefersReducedMotion }
+											/>
+										</Stack>
+
+										<Stack
+											direction="row"
+											gap="xs"
+											className={ clsx( styles.valueContainer, {
+												[ styles.overlayLabel ]: withOverlayLabel,
+											} ) }
+										>
+											{ isPrimaryVisible && <Text>{ valueFormatter( entry.currentValue ) }</Text> }
+
+											{ withComparison && isComparisonVisible && (
+												<Text style={ { color: deltaColor } }>
+													{ deltaFormatter( entry.delta ) }
+												</Text>
+											) }
+										</Stack>
+									</Fragment>
+								);
+							} ) }
+						</Grid>
+					) }
+				</div>
+
+				{ legendPosition === 'bottom' && legendElement }
+				{ renderLegendSlot( legendChildren, 'bottom' ) }
 
-				{ /* Render children from composition API */ }
-				{ otherChildren }
-			</div>
+				{ nonLegendChildren }
+			</Stack>
 		</SingleChartContext.Provider>
 	);
 };

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

@@ -2,6 +2,17 @@ import { render, screen } from '@testing-library/react';
 import LeaderboardChart from '../leaderboard-chart';
 import type { LeaderboardEntry } from '../../../types';
 
+const mockDefaultParentSize = () => ( {
+	parentRef: { current: null },
+	width: 400,
+	height: 300,
+} );
+
+// Mock useParentSize so the responsive wrapper returns predictable dimensions in tests
+jest.mock( '@visx/responsive', () => ( {
+	useParentSize: jest.fn( () => mockDefaultParentSize() ),
+} ) );
+
 const mockData: LeaderboardEntry[] = [
 	{
 		id: 'direct',
@@ -40,6 +51,11 @@ const testValueFormatter = ( value: number ) => `${ value }$`;
 const testDeltaFormatter = ( value: number ) => `${ value }delta`;
 
 describe( 'LeaderboardChart', () => {
+	afterEach( () => {
+		const { useParentSize } = jest.requireMock( '@visx/responsive' );
+		useParentSize.mockImplementation( () => mockDefaultParentSize() );
+	} );
+
 	it( 'renders leaderboard entries', () => {
 		render( <LeaderboardChart data={ mockData } /> );
 
@@ -153,9 +169,7 @@ describe( 'LeaderboardChart', () => {
 					data={ mockData }
 					withComparison={ true }
 					showLegend={ true }
-					legendShape="rect"
-					legendShapeWidth={ 10 }
-					legendShapeHeight={ 6 }
+					legend={ { shape: 'rect', shapeStyles: { width: 10, height: 6 } } }
 				/>
 			);
 
@@ -204,7 +218,7 @@ describe( 'LeaderboardChart', () => {
 		it( 'renders LeaderboardChart.Legend as child component', () => {
 			render(
 				<LeaderboardChart data={ mockData } withComparison={ true }>
-					<LeaderboardChart.Legend data-testid="composition-legend-item" />
+					<LeaderboardChart.Legend />
 				</LeaderboardChart>
 			);
 
@@ -212,8 +226,8 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getByText( 'Direct' ) ).toBeInTheDocument();
 			expect( screen.getByText( 'Social Media' ) ).toBeInTheDocument();
 
-			// Composition legend should render - each legend item gets its own element
-			expect( screen.getAllByTestId( 'composition-legend-item' ) ).toHaveLength( 2 );
+			// Composition legend should render
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
 			expect( screen.getByText( 'Current period' ) ).toBeInTheDocument();
 			expect( screen.getByText( 'Previous period' ) ).toBeInTheDocument();
 		} );
@@ -221,15 +235,12 @@ describe( 'LeaderboardChart', () => {
 		it( 'renders composition legend regardless of showLegend value', () => {
 			render(
 				<LeaderboardChart data={ mockData } withComparison={ true } showLegend={ false }>
-					<LeaderboardChart.Legend data-testid="composition-legend-item" />
+					<LeaderboardChart.Legend />
 				</LeaderboardChart>
 			);
 
-			// No built-in legend should be rendered when showLegend is false
-			expect( screen.queryByTestId( 'legend-item' ) ).not.toBeInTheDocument();
-
-			// Composition legend should still render regardless of showLegend value
-			expect( screen.getAllByTestId( 'composition-legend-item' ) ).toHaveLength( 2 );
+			// Composition legend should render regardless of showLegend value
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
 			expect( screen.getByText( 'Current period' ) ).toBeInTheDocument();
 			expect( screen.getByText( 'Previous period' ) ).toBeInTheDocument();
 		} );
@@ -237,41 +248,36 @@ describe( 'LeaderboardChart', () => {
 		it( 'supports both built-in and composition legends simultaneously', () => {
 			render(
 				<LeaderboardChart data={ mockData } withComparison={ true } showLegend={ true }>
-					<LeaderboardChart.Legend data-testid="composition-legend-item" />
+					<LeaderboardChart.Legend />
 				</LeaderboardChart>
 			);
 
-			// Built-in legend should render (with legend-item test IDs)
-			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
-
-			// Composition legend should also render
-			expect( screen.getAllByTestId( 'composition-legend-item' ) ).toHaveLength( 2 );
+			// Both built-in and composition legends should render (2 items each = 4 total)
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 4 );
 
 			// Should have legend items from both legends
 			const currentPeriodItems = screen.getAllByText( 'Current period' );
 			const previousPeriodItems = screen.getAllByText( 'Previous period' );
-			expect( currentPeriodItems ).toHaveLength( 2 ); // One from each legend
-			expect( previousPeriodItems ).toHaveLength( 2 ); // One from each legend
+			expect( currentPeriodItems ).toHaveLength( 2 );
+			expect( previousPeriodItems ).toHaveLength( 2 );
 		} );
 
 		it( 'passes props correctly to composition legend', () => {
 			render(
 				<LeaderboardChart data={ mockData } withComparison={ true }>
-					<LeaderboardChart.Legend
-						data-testid="composition-legend-item"
-						shape="circle"
-						shapeWidth={ 12 }
-						shapeHeight={ 12 }
-						style={ { marginTop: '20px' } }
-					/>
+					<LeaderboardChart.Legend shape="circle" shapeStyles={ { margin: '4px 8px' } } />
 				</LeaderboardChart>
 			);
 
-			const legendItems = screen.getAllByTestId( 'composition-legend-item' );
+			const legendItems = screen.getAllByTestId( 'legend-item' );
 			expect( legendItems ).toHaveLength( 2 );
-			// Check that each legend item has the custom style applied
+
+			// Verify custom shape styles are applied within each legend item.
+			// Direct DOM access is needed because visx legend shapes lack accessible attributes and we cannot pass a test id to them.
 			legendItems.forEach( item => {
-				expect( item ).toHaveStyle( { marginTop: '20px' } );
+				// eslint-disable-next-line testing-library/no-node-access
+				const shape = item.querySelector( '.visx-legend-shape' );
+				expect( shape ).toHaveStyle( { margin: '4px 8px' } );
 			} );
 		} );
 
@@ -299,7 +305,7 @@ describe( 'LeaderboardChart', () => {
 					data={ mockData }
 					withComparison={ true }
 					showLegend={ true }
-					legendInteractive={ true }
+					legend={ { interactive: true } }
 				/>
 			);
 
@@ -313,7 +319,7 @@ describe( 'LeaderboardChart', () => {
 					data={ mockData }
 					withComparison={ true }
 					showLegend={ true }
-					legendInteractive={ false }
+					legend={ { interactive: false } }
 				/>
 			);
 
@@ -328,7 +334,7 @@ describe( 'LeaderboardChart', () => {
 					data={ mockData }
 					withComparison={ true }
 					showLegend={ true }
-					legendInteractive={ true }
+					legend={ { interactive: true } }
 				/>
 			);
 
@@ -339,4 +345,26 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getByText( '-8%' ) ).toBeInTheDocument();
 		} );
 	} );
+
+	describe( 'Responsive wrapper', () => {
+		it( 'fills parent container (height:100%) by default', () => {
+			render( <LeaderboardChart data={ mockData } /> );
+			const wrapper = screen.getByTestId( 'responsive-wrapper' );
+			expect( wrapper ).toHaveStyle( { height: '100%' } );
+		} );
+
+		it( 'applies explicit width and height to chart container', () => {
+			const { useParentSize } = jest.requireMock( '@visx/responsive' );
+			useParentSize.mockReturnValue( {
+				parentRef: { current: null },
+				width: 0,
+				height: 0,
+			} );
+
+			render( <LeaderboardChart data={ mockData } width={ 500 } height={ 240 } /> );
+			const chartContainer = screen.getByTestId( 'leaderboard-chart-container' );
+
+			expect( chartContainer ).toHaveStyle( { width: '500px', height: '240px' } );
+		} );
+	} );
 } );

package/src/charts/leaderboard-chart/test/use-leaderboard-legend-items.test.tsx

@@ -80,7 +80,6 @@ describe( 'useLeaderboardLegendItems', () => {
 			expect( result.current ).toHaveLength( 1 );
 			expect( result.current[ 0 ] ).toEqual( {
 				label: 'Current period',
-				value: '',
 				color: expect.any( String ),
 			} );
 		} );
@@ -102,14 +101,12 @@ describe( 'useLeaderboardLegendItems', () => {
 			// Current period item
 			expect( result.current[ 0 ] ).toEqual( {
 				label: 'Current period',
-				value: '',
 				color: expect.any( String ),
 			} );
 
 			// Previous period item
 			expect( result.current[ 1 ] ).toEqual( {
 				label: 'Previous period',
-				value: '',
 				color: expect.any( String ),
 			} );
 		} );
@@ -585,7 +582,7 @@ describe( 'useLeaderboardLegendItems', () => {
 			expect( result.current[ 1 ].label ).toBe( 'Previous period' );
 		} );
 
-		it( 'should have empty value strings for all items', () => {
+		it( 'should not include value property for legend items', () => {
 			const wrapper = createWrapper();
 			const { result } = renderHook(
 				() =>
@@ -598,7 +595,7 @@ describe( 'useLeaderboardLegendItems', () => {
 			);
 
 			result.current.forEach( item => {
-				expect( item.value ).toBe( '' );
+				expect( item ).not.toHaveProperty( 'value' );
 			} );
 		} );
 

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

@@ -7,15 +7,12 @@ export interface LeaderboardChartProps
 		| 'className'
 		| 'data'
 		| 'showLegend'
-		| 'legendOrientation'
-		| 'legendPosition'
-		| 'legendAlignment'
-		| 'legendShape'
+		| 'legend'
 		| 'chartId'
 		| 'width'
 		| 'height'
 		| 'size'
-		| 'legendInteractive'
+		| 'gap'
 		| 'animation'
 	> {
 	/**
@@ -60,16 +57,6 @@ export interface LeaderboardChartProps
 		'--a8c--charts--leaderboard--bar--border-radius'?: string;
 	};
 
-	/**
-	 * Width of legend shapes in pixels
-	 */
-	legendShapeWidth?: number;
-
-	/**
-	 * Height of legend shapes in pixels
-	 */
-	legendShapeHeight?: number;
-
 	/**
 	 * 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,12 +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 }
-				maxWidth={ legendMaxWidth }
-				textOverflow={ legendTextOverflow }
-				legendItemClassName={ legendItemClassName }
+				labelStyles={ legend.labelStyles }
+				itemClassName={ legend.itemClassName }
+				itemStyles={ legend.itemStyles }
+				shapeStyles={ legend.shapeStyles }
 				className={ styles[ 'line-chart__legend' ] }
 				shape={ legendShape }
 				chartId={ chartId }
@@ -493,6 +492,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 					} }
 				>
 					{ legendPosition === 'top' && legendElement }
+					{ renderLegendSlot( legendChildren, 'top' ) }
 
 					<div
 						className={ styles[ 'line-chart__svg-wrapper' ] }
@@ -655,8 +655,9 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 					</div>
 
 					{ legendPosition === 'bottom' && legendElement }
+					{ renderLegendSlot( legendChildren, 'bottom' ) }
 
-					{ children }
+					{ nonLegendChildren }
 				</Stack>
 			</SingleChartContext.Provider>
 		);