Charts: Fix chart height and size calculations for pie and donut charts

projects/js-packages/charts/changelog/charts-164-fix-chart-height-and-size-calculations-for-pie-chart-and

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Charts: fix chart height and size calculations for Pie Chart and variants.

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

@@ -12,7 +12,7 @@ import {
 	useChartDataTransform,
 	useZeroValueDisplay,
 	useChartMargin,
-	useElementHeight,
+	useElementSize,
 	useHasLegendChild,
 	usePrefersReducedMotion,
 } from '../../hooks';
@@ -125,7 +125,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const legendItems = useChartLegendItems( dataSorted );
 	const chartOptions = useBarChartOptions( dataWithVisibleZeros, horizontal, options );
 	const defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );
-	const [ svgWrapperRef, svgWrapperHeight ] = useElementHeight< HTMLDivElement >();
+	const [ svgWrapperRef, , svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 	const chartRef = useRef< HTMLDivElement >( null );
 
 	// Check if children contain a Legend component (composition pattern)

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

@@ -3,10 +3,10 @@ import userEvent from '@testing-library/user-event';
 import { GlobalChartsProvider } from '../../../providers';
 import BarChart from '../bar-chart';
 
-// Mock useElementHeight to return a non-zero height in jsdom so charts render
+// Mock useElementSize to return non-zero dimensions in jsdom so charts render
 const mockRefCallback = jest.fn();
-jest.mock( '../../../hooks/use-element-height', () => ( {
-	useElementHeight: () => [ mockRefCallback, 300 ], // Return test height to allow chart rendering
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
 } ) );
 
 describe( 'BarChart', () => {

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

@@ -14,7 +14,7 @@ import {
 	useXYChartTheme,
 	useChartDataTransform,
 	useChartMargin,
-	useElementHeight,
+	useElementSize,
 	useHasLegendChild,
 	usePrefersReducedMotion,
 } from '../../hooks';
@@ -288,7 +288,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		const providerTheme = useGlobalChartsTheme();
 		const theme = useXYChartTheme( data );
 		const chartId = useChartId( providedChartId );
-		const [ svgWrapperRef, svgWrapperHeight ] = useElementHeight< HTMLDivElement >();
+		const [ svgWrapperRef, , svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 		const chartRef = useRef< HTMLDivElement >( null );
 		const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );
 		const [ isNavigating, setIsNavigating ] = useState( false );

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

@@ -8,10 +8,10 @@ import { GlobalChartsProvider, defaultTheme } from '../../../providers';
 import LineChart, { LineChartUnresponsive } from '../line-chart';
 import type { SingleChartRef } from '../../private/single-chart-context';
 
-// Mock useElementHeight to return a non-zero height in jsdom so charts render
+// Mock useElementSize to return non-zero dimensions in jsdom so charts render
 const mockRefCallback = jest.fn();
-jest.mock( '../../../hooks/use-element-height', () => ( {
-	useElementHeight: () => [ mockRefCallback, 300 ], // Return test height to allow chart rendering
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
 } ) );
 
 const customTheme = {

projects/js-packages/charts/src/charts/pie-chart/pie-chart.module.scss

@@ -3,9 +3,20 @@
 	flex-direction: column;
 	overflow: hidden;
 	align-items: center;
-	gap: 20px;
 
-	&--legend-top {
-		flex-direction: column-reverse;
+	// Fill parent when no explicit width/height provided
+	&--responsive {
+		height: 100%;
+		width: 100%;
+	}
+
+	&__svg-wrapper {
+		flex: 1;
+		min-height: 0; // Required for flex shrinking
+		min-width: 0; // Required for flex shrinking
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 }