Charts: Allow user margin.top override when legend is positioned at top

projects/js-packages/charts/changelog/charts-43-legends-ensure-that-the-user-provided-margin-prop-takes

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Charts: legends ensure user provided margin prop takes precedence

projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx

@@ -339,7 +339,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 						...defaultMargin,
 						...margin,
 						...( showLegend && legendPosition === 'top'
-							? { top: ( defaultMargin.top || 0 ) + legendHeight }
+							? { top: ( margin?.top ?? ( defaultMargin.top || 0 ) ) + legendHeight }
 							: {} ),
 					} }
 					xScale={ chartOptions.xScale }

projects/js-packages/charts/src/components/bar-chart/test/bar-chart.test.tsx

@@ -677,4 +677,52 @@ describe( 'BarChart', () => {
 			).toBeInTheDocument();
 		} );
 	} );
+
+	describe( 'Margin with Legend', () => {
+		test( 'respects user-provided margin.top when legend is positioned at top', () => {
+			const customMargin = { top: 50, right: 20, bottom: 20, left: 20 };
+			renderWithTheme( {
+				showLegend: true,
+				legendPosition: 'top',
+				margin: customMargin,
+			} );
+
+			// Verify chart renders properly with both legend at top and custom margin
+			const chart = screen.getByTestId( 'bar-chart' );
+			expect( chart ).toBeInTheDocument();
+
+			// Verify legend is visible
+			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
+		} );
+
+		test( 'uses default margin.top when no custom margin provided and legend is at top', () => {
+			renderWithTheme( {
+				showLegend: true,
+				legendPosition: 'top',
+			} );
+
+			// Chart should still render with default margin plus legend height
+			const chart = screen.getByTestId( 'bar-chart' );
+			expect( chart ).toBeInTheDocument();
+
+			// Verify legend is visible
+			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
+		} );
+
+		test( 'respects custom margin when legend is at bottom', () => {
+			const customMargin = { top: 50, right: 20, bottom: 20, left: 20 };
+			renderWithTheme( {
+				showLegend: true,
+				legendPosition: 'bottom',
+				margin: customMargin,
+			} );
+
+			// When legend is at bottom, custom margin.top should be used as-is
+			const chart = screen.getByTestId( 'bar-chart' );
+			expect( chart ).toBeInTheDocument();
+
+			// Verify legend is visible
+			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
+		} );
+	} );
 } );

projects/js-packages/charts/src/components/line-chart/line-chart.tsx

@@ -464,7 +464,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 								...defaultMargin,
 								...margin,
 								...( showLegend && legendPosition === 'top'
-									? { top: ( defaultMargin.top || 0 ) + legendHeight }
+									? { top: ( margin?.top ?? ( defaultMargin.top || 0 ) ) + legendHeight }
 									: {} ),
 							} }
 							// xScale and yScale could be set in Axis as well, but they are `scale` props there.

projects/js-packages/charts/src/components/line-chart/test/line-chart.test.tsx

@@ -1209,4 +1209,52 @@ describe( 'LineChart', () => {
 			} );
 		} );
 	} );
+
+	describe( 'Margin with Legend', () => {
+		test( 'respects user-provided margin.top when legend is positioned at top', () => {
+			const customMargin = { top: 50, right: 20, bottom: 20, left: 20 };
+			renderWithTheme( {
+				showLegend: true,
+				legendPosition: 'top',
+				margin: customMargin,
+			} );
+
+			// Verify chart renders properly with both legend at top and custom margin
+			const chart = screen.getByTestId( 'line-chart' );
+			expect( chart ).toBeInTheDocument();
+
+			// Verify legend is visible
+			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
+		} );
+
+		test( 'uses default margin.top when no custom margin provided and legend is at top', () => {
+			renderWithTheme( {
+				showLegend: true,
+				legendPosition: 'top',
+			} );
+
+			// Chart should still render with default margin plus legend height
+			const chart = screen.getByTestId( 'line-chart' );
+			expect( chart ).toBeInTheDocument();
+
+			// Verify legend is visible
+			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
+		} );
+
+		test( 'respects custom margin when legend is at bottom', () => {
+			const customMargin = { top: 50, right: 20, bottom: 20, left: 20 };
+			renderWithTheme( {
+				showLegend: true,
+				legendPosition: 'bottom',
+				margin: customMargin,
+			} );
+
+			// When legend is at bottom, custom margin.top should be used as-is
+			const chart = screen.getByTestId( 'line-chart' );
+			expect( chart ).toBeInTheDocument();
+
+			// Verify legend is visible
+			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
+		} );
+	} );
 } );