Charts: Make PieSemiCircleChart responsive by default

projects/js-packages/charts/changelog/charts-169-fix-chart-height-and-size-calculation-for-pie-semi-circle-chart

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Charts: fix PieSemiCircleChart height and size calculations to be responsive by default, maintaining 2:1 width-to-height ratio.

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

@@ -32,7 +32,6 @@ import { useBarChartOptions } from './private';
 import type { BaseChartProps, DataPointDate, SeriesData, Optional } from '../../types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
-import type { GapSize } from '@wordpress/theme';
 import type { FC, ReactNode, ComponentType } from 'react';
 
 export interface BarChartProps extends BaseChartProps< SeriesData[] > {
@@ -42,12 +41,6 @@ export interface BarChartProps extends BaseChartProps< SeriesData[] > {
 	showZeroValues?: boolean;
 	legendInteractive?: boolean;
 	children?: ReactNode;
-	/**
-	 * Gap between chart elements (SVG, legend, children).
-	 * Uses WordPress design system tokens.
-	 * @default 'md'
-	 */
-	gap?: GapSize;
 }
 
 // Base props type with optional responsive properties

projects/js-packages/charts/src/charts/bar-chart/stories/index.api.mdx

@@ -32,6 +32,7 @@ Main chart component with responsive behavior by default.
 | `options` | `ChartOptions` | `{}` | Advanced axis and scale configuration |
 | `className` | `string` | - | Additional CSS class name |
 | `children` | `ReactNode` | - | Child components (e.g., `<BarChart.Legend />`) |
+| `gap` | `GapSize` | `'md'` | Gap between chart elements (SVG, legend, children). Uses WordPress design system tokens |
 
 ## BarChart.Legend
 

projects/js-packages/charts/src/charts/line-chart/stories/index.api.mdx

@@ -38,6 +38,7 @@ Main chart component with responsive behavior by default.
 | `onPointerMove` | `(event: EventHandlerParams) => void?` | - | Pointer move event handler |
 | `onPointerOut` | `(event: PointerEvent) => void?` | - | Pointer out event handler |
 | `children` | `ReactNode?` | - | Child components (e.g., annotations) |
+| `gap` | `GapSize` | `'md'` | Gap between chart elements (SVG, legend, children). Uses WordPress design system tokens |
 
 ## LineChart.AnnotationsOverlay
 

projects/js-packages/charts/src/charts/line-chart/types.ts

@@ -7,7 +7,6 @@ import type {
 } from '../../types';
 import type { GlyphProps } from '@visx/xychart';
 import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
-import type { GapSize } from '@wordpress/theme';
 import type { ReactNode, SVGProps, FC } from 'react';
 
 export type LineChartAnnotationProps = {
@@ -44,12 +43,6 @@ export interface LineChartProps extends BaseChartProps< SeriesData[] > {
 	};
 	legendInteractive?: boolean;
 	children?: ReactNode;
-	/**
-	 * Gap between chart elements (SVG, legend, children).
-	 * Uses WordPress design system tokens.
-	 * @default 'md'
-	 */
-	gap?: GapSize;
 }
 
 export type TooltipDatum = {

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

@@ -26,7 +26,6 @@ import styles from './pie-chart.module.scss';
 import type { LegendValueDisplay } from '../../components/legend';
 import type { BaseChartProps, DataPointPercentage, Optional } from '../../types';
 import type { ChartComponentWithComposition } from '../private/chart-composition';
-import type { GapSize } from '@wordpress/theme';
 import type { SVGProps, MouseEvent, ReactNode, FC } from 'react';
 
 /**
@@ -121,13 +120,6 @@ export interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {
 	 * When provided, replaces the default BaseTooltip with custom content.
 	 */
 	renderTooltip?: ( params: PieChartRenderTooltipParams ) => ReactNode;
-
-	/**
-	 * Gap between chart elements (SVG, legend, children).
-	 * Uses WordPress design system tokens.
-	 * @default 'md'
-	 */
-	gap?: GapSize;
 }
 
 // Base props type with optional responsive properties

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

@@ -1,21 +1,27 @@
 .pie-semi-circle-chart {
-	display: flex;
-	flex-direction: column;
-	text-align: center;
-	gap: 20px;
+	// Fill parent when no explicit width/height provided
+	&--responsive {
+		height: 100%;
+		width: 100%;
+	}
 
-	&--legend-top {
-		flex-direction: column-reverse;
+	// Flex wrapper that fills remaining Stack space and measures the SVG area
+	&__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;
 	}
 
 	.label {
-		margin-bottom: 0; // Add space between label and pie chart
-		font-weight: 600; // Make label more prominent than note
-		font-size: 16px; // Set explicit font size
+		font-weight: 600;
+		font-size: 16px;
 	}
 
 	.note {
-		margin-top: 0; // Add space between pie chart and note
-		font-size: 14px; // Slightly smaller text for hierarchy
+		font-size: 14px;
 	}
 }