@automattic/charts 0.56.7 → 0.58.0

package/src/components/legend/types.ts

@@ -1,34 +1,33 @@
 import { LegendOrdinal } from '@visx/legend';
+import type {
+	LegendItemStyles,
+	LegendLabelStyles,
+	LegendPosition,
+	LegendShapeStyles,
+} from '../../types';
 import type { GlyphProps, LineStyles } from '@visx/xychart';
 import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 
-// See https://airbnb.io/visx/docs/legend#Ordinal for more details.
-type LegendOrdinalProps = Omit< ComponentProps< typeof LegendOrdinal >, 'scale' | 'direction' >;
+type VisxLegendProps = Pick<
+	ComponentProps< typeof LegendOrdinal >,
+	'className' | 'shape' | 'fill' | 'size' | 'labelFormat' | 'labelTransform'
+>;
 
-export type BaseLegendProps = Omit< LegendOrdinalProps, 'shapeStyle' > & {
+export type BaseLegendProps = VisxLegendProps & {
 	items: BaseLegendItem[];
 	orientation?: 'horizontal' | 'vertical';
-	/**
-	 * TODO: Add 'left' | 'right' positioning support in future implementation
-	 */
-	position?: 'top' | 'bottom';
+	position?: LegendPosition;
 	alignment?: 'start' | 'center' | 'end';
-	/**
-	 * Maximum width for legend items. When set, text overflow behavior is controlled by textOverflow prop.
-	 * Should be a CSS value string (e.g. '200px', '50%', '10rem')
-	 */
-	maxWidth?: string;
-	/**
-	 * Controls how text behaves when it exceeds maxWidth.
-	 * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
-	 * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
-	 */
-	textOverflow?: 'ellipsis' | 'wrap';
-	/**
-	 * Additional CSS class name for legend items.
-	 * This allows consumers to customize individual legend item styling.
-	 */
-	legendItemClassName?: string;
+	/** Additional CSS class name for legend items. */
+	itemClassName?: string;
+	/** CSS styles for each legend item (margin, flexDirection). */
+	itemStyles?: LegendItemStyles;
+	/** Additional CSS class name for legend labels. */
+	labelClassName?: string;
+	/** CSS styles for legend labels (justifyContent, flex, margin). */
+	labelStyles?: LegendLabelStyles;
+	/** Styles for legend shapes (width, height, margin). */
+	shapeStyles?: LegendShapeStyles;
 	/**
 	 * Function for rendering a custom legend layout.
 	 */
@@ -51,7 +50,7 @@ export type LegendProps = Omit< BaseLegendProps, 'items' > & {
 
 export type BaseLegendItem = {
 	label: string;
-	value: number | string;
+	value?: number | string;
 	color: string;
 	glyphSize?: number;
 	renderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode;

package/src/hooks/index.ts

@@ -4,7 +4,6 @@ export { useXYChartTheme } from './use-xychart-theme';
 export { useChartDataTransform } from './use-chart-data-transform';
 export { useChartMargin } from './use-chart-margin';
 export { useElementSize } from './use-element-size';
-export { useHasLegendChild } from './use-has-legend-child';
 export { useTextTruncation } from './use-text-truncation';
 export { useZeroValueDisplay } from './use-zero-value-display';
 export { useInteractiveLegendData } from './use-interactive-legend-data';

package/src/hooks/test/use-zero-value-display.test.tsx

@@ -0,0 +1,206 @@
+import { renderHook } from '@testing-library/react';
+import { useZeroValueDisplay } from '../use-zero-value-display';
+import type { SeriesData } from '../../types';
+
+describe( 'useZeroValueDisplay', () => {
+	const mockData: SeriesData[] = [
+		{
+			label: 'Series 1',
+			data: [
+				{ label: 'A', value: 0 },
+				{ label: 'B', value: 100 },
+				{ label: 'C', value: 200 },
+			],
+		},
+	];
+
+	test( 'returns original data when disabled', () => {
+		const { result } = renderHook( () =>
+			useZeroValueDisplay( mockData, { enabled: false, valueAxisLength: 100 } )
+		);
+		expect( result.current ).toBe( mockData );
+	} );
+
+	test( 'returns original data when valueAxisLength is not provided', () => {
+		const { result } = renderHook( () => useZeroValueDisplay( mockData, { enabled: true } ) );
+		expect( result.current ).toBe( mockData );
+	} );
+
+	test( 'adds visualValue for zero values', () => {
+		const { result } = renderHook( () =>
+			useZeroValueDisplay( mockData, { enabled: true, valueAxisLength: 100 } )
+		);
+
+		const enhancedData = result.current;
+		expect( enhancedData[ 0 ].data[ 0 ] ).toHaveProperty( 'visualValue' );
+		expect(
+			( enhancedData[ 0 ].data[ 0 ] as { visualValue?: number } ).visualValue
+		).toBeGreaterThan( 0 );
+	} );
+
+	test( 'adds visualValue for near-zero values that would render below minimum', () => {
+		const data: SeriesData[] = [
+			{
+				label: 'Series 1',
+				data: [
+					{ label: 'A', value: 1 }, // Would render as 1px (below 3px minimum)
+					{ label: 'B', value: 100 },
+				],
+			},
+		];
+
+		// With axis=100 and max=100, 3px threshold = 3
+		// Value of 1 < 3, so it gets boosted to 3
+		const { result } = renderHook( () =>
+			useZeroValueDisplay( data, { enabled: true, valueAxisLength: 100 } )
+		);
+
+		const enhancedData = result.current;
+		expect( enhancedData[ 0 ].data[ 0 ] ).toHaveProperty( 'visualValue' );
+		expect( ( enhancedData[ 0 ].data[ 0 ] as { visualValue?: number } ).visualValue ).toBe( 3 );
+	} );
+
+	test( 'does not add visualValue for values above minimum threshold', () => {
+		const data: SeriesData[] = [
+			{
+				label: 'Series 1',
+				data: [
+					{ label: 'A', value: 10 }, // Would render as 10px (above 3px minimum)
+					{ label: 'B', value: 100 },
+				],
+			},
+		];
+
+		const { result } = renderHook( () =>
+			useZeroValueDisplay( data, { enabled: true, valueAxisLength: 100 } )
+		);
+
+		const enhancedData = result.current;
+		expect( enhancedData[ 0 ].data[ 0 ] ).not.toHaveProperty( 'visualValue' );
+		expect( enhancedData[ 0 ].data[ 1 ] ).not.toHaveProperty( 'visualValue' );
+	} );
+
+	test( 'zero values get 2px equivalent (1px less than near-zero)', () => {
+		// mockData has values [0, 100, 200], max = 200
+		// zeroVisualValue = (2 / 100) * 200 = 4
+		const { result } = renderHook( () =>
+			useZeroValueDisplay( mockData, { enabled: true, valueAxisLength: 100 } )
+		);
+
+		const visualValue = ( result.current[ 0 ].data[ 0 ] as { visualValue?: number } ).visualValue;
+		expect( visualValue ).toBe( 4 ); // 2px equivalent
+	} );
+
+	test( 'near-zero values get 3px equivalent', () => {
+		const data: SeriesData[] = [
+			{
+				label: 'Series 1',
+				data: [
+					{ label: 'A', value: 1 }, // Would render as 1px
+					{ label: 'B', value: 100 },
+				],
+			},
+		];
+
+		// minNonZeroValue = (3 / 100) * 100 = 3
+		const { result } = renderHook( () =>
+			useZeroValueDisplay( data, { enabled: true, valueAxisLength: 100 } )
+		);
+
+		const visualValue = ( result.current[ 0 ].data[ 0 ] as { visualValue?: number } ).visualValue;
+		expect( visualValue ).toBe( 3 ); // 3px equivalent
+	} );
+
+	test( 'zeros and near-zeros have 1px visual difference', () => {
+		const data: SeriesData[] = [
+			{
+				label: 'Series 1',
+				data: [
+					{ label: 'Zero', value: 0 },
+					{ label: 'NearZero', value: 1 },
+					{ label: 'Max', value: 100 },
+				],
+			},
+		];
+
+		const { result } = renderHook( () =>
+			useZeroValueDisplay( data, { enabled: true, valueAxisLength: 100 } )
+		);
+
+		const zeroVisual = ( result.current[ 0 ].data[ 0 ] as { visualValue?: number } ).visualValue;
+		const nearZeroVisual = ( result.current[ 0 ].data[ 1 ] as { visualValue?: number } )
+			.visualValue;
+
+		// Zero = 2px equivalent (2), near-zero = 3px equivalent (3)
+		expect( zeroVisual ).toBe( 2 );
+		expect( nearZeroVisual ).toBe( 3 );
+		expect( nearZeroVisual! - zeroVisual! ).toBe( 1 ); // 1px difference
+	} );
+
+	test( 'handles data with only zero values', () => {
+		const zeroOnlyData: SeriesData[] = [
+			{
+				label: 'Series 1',
+				data: [
+					{ label: 'A', value: 0 },
+					{ label: 'B', value: 0 },
+				],
+			},
+		];
+
+		const { result } = renderHook( () =>
+			useZeroValueDisplay( zeroOnlyData, { enabled: true, valueAxisLength: 100 } )
+		);
+
+		// Should return original data since there are no non-zero values to calculate from
+		expect( result.current ).toBe( zeroOnlyData );
+	} );
+
+	test( 'negative near-zero values preserve sign when boosted', () => {
+		const data: SeriesData[] = [
+			{
+				label: 'Series 1',
+				data: [
+					{ label: 'NegativeNearZero', value: -1 }, // Would render as 1px (below 3px minimum)
+					{ label: 'NegativeLarge', value: -100 },
+					{ label: 'PositiveMax', value: 100 },
+				],
+			},
+		];
+
+		const { result } = renderHook( () =>
+			useZeroValueDisplay( data, { enabled: true, valueAxisLength: 100 } )
+		);
+
+		const negativeNearZero = result.current[ 0 ].data[ 0 ] as { visualValue?: number };
+
+		// Should have a boosted magnitude but keep the negative sign
+		expect( negativeNearZero.visualValue ).toBeLessThan( 0 );
+		expect( Math.abs( negativeNearZero.visualValue! ) ).toBeGreaterThan( 1 );
+	} );
+
+	test( 'null values remain untouched without visualValue', () => {
+		const data: SeriesData[] = [
+			{
+				label: 'Series 1',
+				data: [
+					{ label: 'NullValue', value: null },
+					{ label: 'NonZero', value: 50 },
+				],
+			},
+		];
+
+		const { result } = renderHook( () =>
+			useZeroValueDisplay( data, { enabled: true, valueAxisLength: 100 } )
+		);
+
+		const nullPoint = result.current[ 0 ].data[ 0 ] as {
+			value: number | null;
+			visualValue?: number;
+		};
+
+		// The original null value should be preserved and no visualValue should be added
+		expect( nullPoint.value ).toBeNull();
+		expect( nullPoint ).not.toHaveProperty( 'visualValue' );
+	} );
+} );

package/src/hooks/use-zero-value-display.ts

@@ -11,57 +11,86 @@ export interface EnhancedSeriesData extends Omit< SeriesData, 'data' > {
 
 export interface UseZeroValueDisplayOptions {
 	enabled: boolean;
-	minValueRatio?: number;
-	maxValueRatio?: number;
+	/**
+	 * The pixel length of the value axis (height for vertical charts, width for
+	 * horizontal charts). Used to calculate a minimum visible value that ensures
+	 * zero-value bars are at least MIN_PIXEL_HEIGHT pixels tall along that axis.
+	 */
+	valueAxisLength?: number;
 }
 
+/**
+ * Minimum pixel size for near-zero bars (non-zero values that would render too small).
+ * Using 3px to be visible but not misleading - larger values might look like actual data.
+ */
+const MIN_PIXEL_SIZE = 3;
+
+/**
+ * Pixel size for zero-value bars (1px less than near-zero to be visually distinguishable).
+ */
+const ZERO_PIXEL_SIZE = MIN_PIXEL_SIZE - 1;
+
 export const useZeroValueDisplay = (
 	data: SeriesData[],
 	options: UseZeroValueDisplayOptions = { enabled: false }
 ): SeriesData[] | EnhancedSeriesData[] => {
-	const { enabled, minValueRatio = 0.6, maxValueRatio = 0.008 } = options;
+	const { enabled, valueAxisLength } = options;
 
 	return useMemo( () => {
-		if ( ! enabled ) return data;
-
-		// Collect all non-zero, non-null values (both positive and negative)
-		const nonZeroValues: number[] = [];
+		if ( ! enabled || ! valueAxisLength || valueAxisLength <= 0 ) return data;
 
+		// Find max absolute value
+		let maxAbsoluteValue = 0;
 		for ( const series of data ) {
 			for ( const point of series.data ) {
 				if ( point.value !== null && point.value !== 0 ) {
-					nonZeroValues.push( point.value );
+					maxAbsoluteValue = Math.max( maxAbsoluteValue, Math.abs( point.value ) );
 				}
 			}
 		}
 
-		if ( nonZeroValues.length === 0 ) return data;
-
-		// Convert to absolute values to find the range
-		const absoluteValues = nonZeroValues.map( Math.abs );
+		if ( maxAbsoluteValue === 0 ) return data;
 
-		// Calculate min and max based on absolute values
-		const minAbsoluteValue = Math.min( ...absoluteValues );
-		const maxAbsoluteValue = Math.max( ...absoluteValues );
-
-		// Calculate minimum visible value using absolute range
-		const minVisibleValue = Math.min(
-			minAbsoluteValue * minValueRatio,
-			maxAbsoluteValue * maxValueRatio
+		// Calculate values that render as specific pixel sizes, clamped to maxAbsoluteValue
+		// to prevent visual distortion when valueAxisLength is very small
+		const minNonZeroValue = Math.min(
+			( MIN_PIXEL_SIZE / valueAxisLength ) * maxAbsoluteValue,
+			maxAbsoluteValue
+		);
+		const zeroVisualValue = Math.min(
+			( ZERO_PIXEL_SIZE / valueAxisLength ) * maxAbsoluteValue,
+			maxAbsoluteValue
 		);
 
 		return data.map( series => ( {
 			...series,
-			data: series.data.map( ( point ): EnhancedDataPoint => {
+			data: series.data.map( ( point: DataPointDate ): EnhancedDataPoint => {
+				// Zero values get a smaller visual representation (2px)
 				if ( point.value === 0 ) {
 					return {
 						...point,
-						visualValue: minVisibleValue,
+						visualValue: zeroVisualValue,
+					};
+				}
+
+				// Null values should remain untouched
+				if ( point.value === null ) {
+					return point;
+				}
+
+				const absValue = Math.abs( point.value );
+
+				// Near-zero values that would render below MIN_PIXEL_SIZE get boosted to 3px
+				// Preserve the sign for negative values
+				if ( absValue < minNonZeroValue ) {
+					return {
+						...point,
+						visualValue: Math.sign( point.value ) * minNonZeroValue,
 					};
 				}
 
 				return point;
 			} ),
 		} ) );
-	}, [ data, enabled, minValueRatio, maxValueRatio ] );
+	}, [ data, enabled, valueAxisLength ] );
 };

package/src/providers/chart-context/test/chart-context.test.tsx

@@ -987,10 +987,12 @@ describe( 'ChartContext', () => {
 
 			const extendedTheme = {
 				...mockTheme,
-				legendShapeStyles: [
-					{ fill: '#LEGEND1', stroke: '#BORDER1' },
-					{ fill: '#LEGEND2', strokeWidth: 3 },
-				],
+				legend: {
+					shapeStyles: [
+						{ fill: '#LEGEND1', stroke: '#BORDER1' },
+						{ fill: '#LEGEND2', strokeWidth: 3 },
+					],
+				},
 			};
 
 			render(
@@ -1087,7 +1089,9 @@ describe( 'ChartContext', () => {
 						},
 					},
 				},
-				legendShapeStyles: [ { fill: '#LEGEND1', stroke: '#BORDER1' } ],
+				legend: {
+					shapeStyles: [ { fill: '#LEGEND1', stroke: '#BORDER1' } ],
+				},
 			};
 
 			render(
@@ -1234,7 +1238,9 @@ describe( 'ChartContext', () => {
 				...mockTheme,
 				glyphs: [ mockGlyph ],
 				seriesLineStyles: [ { strokeWidth: 2 } ],
-				legendShapeStyles: [ { fill: '#SHAPE1' } ],
+				legend: {
+					shapeStyles: [ { fill: '#SHAPE1' } ],
+				},
 			};
 
 			render(

package/src/providers/chart-context/themes.ts

@@ -17,12 +17,14 @@ const defaultTheme: CompleteChartTheme = {
 	gridColorDark: '',
 	xTickLineStyles: { stroke: 'black' },
 	xAxisLineStyles: { stroke: '#DCDCDE', strokeWidth: 1 },
-	legendLabelStyles: {
-		color: 'var(--jp-gray-80, #2c3338)',
+	legend: {
+		labelStyles: {
+			color: 'var(--jp-gray-80, #2c3338)',
+		},
+		containerStyles: {},
+		shapeStyles: [],
 	},
-	legendContainerStyles: {},
 	seriesLineStyles: [],
-	legendShapeStyles: [],
 	glyphs: [],
 	svgLabelSmall: { fill: 'var(--jp-gray-80, #2c3338)' },
 	annotationStyles: {

package/src/types.ts

@@ -210,14 +210,17 @@ export type ChartTheme = {
 	xAxisLineStyles?: LineStyles;
 	/** Styles for series lines */
 	seriesLineStyles?: LineStyles[];
-	/** Styles for legend shapes */
-	legendShapeStyles?: Record< string, unknown >[];
 	/** Array of render functions for glyphs */
 	glyphs?: Array< < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode >;
-	/** Styles for legend labels */
-	legendLabelStyles?: CSSProperties;
-	/** Styles for legend container */
-	legendContainerStyles?: CSSProperties;
+	/** Legend specific settings */
+	legend?: {
+		/** Styles for legend shapes */
+		shapeStyles?: Record< string, unknown >[];
+		/** Styles for legend labels */
+		labelStyles?: CSSProperties;
+		/** Styles for legend container */
+		containerStyles?: CSSProperties;
+	};
 	/** Styles for small SVG text (eg. axis tick labels), passed through to the XYChart theme. */
 	svgLabelSmall?: TextProps;
 	annotationStyles?: AnnotationStyles;
@@ -287,6 +290,7 @@ export type CompleteChartTheme = Required< ChartTheme > & {
 	lineChart: {
 		lineStyles: Record< NonNullable< SeriesDataOptions[ 'type' ] >, LineStyles >;
 	};
+	legend: Required< NonNullable< ChartTheme[ 'legend' ] > >;
 	sparkline: Required< NonNullable< ChartTheme[ 'sparkline' ] > > & {
 		margin: Required< NonNullable< ChartTheme[ 'sparkline' ] >[ 'margin' ] >;
 	};
@@ -348,6 +352,86 @@ export type ScaleOptions = {
 	paddingOuter?: number;
 };
 
+export type LegendItemStyles = {
+	/** Margin around each legend item. */
+	margin?: CSSProperties[ 'margin' ];
+	/** Flex direction for items within each legend entry. */
+	flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+};
+
+export type LegendLabelStyles = Pick< CSSProperties, 'justifyContent' | 'flex' | 'margin' > & {
+	/**
+	 * Maximum width for legend label text as a CSS value (e.g. '200px', '50%', '10rem').
+	 * When set, text overflow behavior is controlled by textOverflow.
+	 */
+	maxWidth?: string;
+	/**
+	 * Controls how text behaves when it exceeds maxWidth.
+	 * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
+	 * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
+	 */
+	textOverflow?: 'ellipsis' | 'wrap';
+};
+
+export type LegendShapeStyles = {
+	/** Width of the legend shape in pixels. */
+	width?: number;
+	/** Height of the legend shape in pixels. */
+	height?: number;
+	/** Margin around the legend shape. */
+	margin?: CSSProperties[ 'margin' ];
+};
+
+/** Position of the legend relative to chart content. */
+export type LegendPosition = 'top' | 'bottom';
+
+/**
+ * Configuration object for chart legend appearance and behavior.
+ * Consolidates all legend styling and layout props into a single structured object.
+ */
+export type ChartLegendConfig< T = DataPoint | DataPointDate | LeaderboardEntry > = {
+	/**
+	 * Layout direction of legend items.
+	 */
+	orientation?: 'horizontal' | 'vertical';
+	/**
+	 * Position of the legend relative to the chart.
+	 * TODO: Add 'left' | 'right' positioning support in future implementation
+	 */
+	position?: LegendPosition;
+	/**
+	 * Alignment of the legend within its position.
+	 */
+	alignment?: 'start' | 'center' | 'end';
+	/**
+	 * Shape of the legend marker icon.
+	 */
+	shape?: LegendShape< T, number >;
+	/**
+	 * Enable interactive legend items that can toggle series visibility.
+	 * Supported for all chart types that render series.
+	 * Requires chartId and GlobalChartsProvider.
+	 * For pie charts, percentages are recalculated so visible segments total 100%.
+	 */
+	interactive?: boolean;
+	/**
+	 * Additional CSS class name for individual legend items.
+	 */
+	itemClassName?: string;
+	/**
+	 * CSS styles for each legend item (margin, flexDirection).
+	 */
+	itemStyles?: LegendItemStyles;
+	/**
+	 * CSS styles for legend labels (maxWidth, textOverflow, justifyContent, flex, margin).
+	 */
+	labelStyles?: LegendLabelStyles;
+	/**
+	 * Styles for legend shapes (width, height, margin).
+	 */
+	shapeStyles?: LegendShapeStyles;
+};
+
 /**
  * Base properties shared across all chart components
  */
@@ -412,45 +496,10 @@ export type BaseChartProps< T = DataPoint | DataPointDate | LeaderboardEntry > =
 	 */
 	showLegend?: boolean;
 	/**
-	 * Legend orientation
-	 */
-	legendOrientation?: 'horizontal' | 'vertical';
-	/**
-	 * Legend shape
-	 */
-	legendShape?: LegendShape< T, number >;
-	/**
-	 * Legend position (where the legend appears)
-	 * TODO: Add 'left' | 'right' positioning support in future implementation
-	 */
-	legendPosition?: 'top' | 'bottom';
-	/**
-	 * Legend alignment within its position
-	 */
-	legendAlignment?: 'start' | 'center' | 'end';
-	/**
-	 * Maximum width for legend items. When set, text overflow behavior is controlled by legendTextOverflow.
-	 * Should be a CSS value string (e.g. '200px', '50%', '10rem')
-	 */
-	legendMaxWidth?: string;
-	/**
-	 * Controls how text behaves when it exceeds legendMaxWidth.
-	 * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
-	 * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
-	 */
-	legendTextOverflow?: 'ellipsis' | 'wrap';
-	/**
-	 * Additional CSS class name for legend items.
-	 * This allows consumers to customize individual legend item styling.
-	 */
-	legendItemClassName?: string;
-	/**
-	 * Enable interactive legend items that can toggle series visibility.
-	 * Supported for LineChart, PieChart, and PieSemiCircleChart.
-	 * Requires chartId and GlobalChartsProvider.
-	 * For pie charts, percentages are recalculated so visible segments total 100%.
+	 * Legend configuration object for controlling legend appearance and behavior.
+	 * Includes orientation, position, alignment, shape, styling, and interactivity options.
 	 */
-	legendInteractive?: boolean;
+	legend?: ChartLegendConfig< T >;
 	/**
 	 * Grid visibility. x is default when orientation is vertical. y is default when orientation is horizontal.
 	 */

package/src/utils/date-parsing.ts

@@ -44,7 +44,16 @@ import { parse, parseISO, isValid } from 'date-fns';
  * @return {boolean} True if the date string contains timezone information, false otherwise
  */
 const hasTimezone = ( dateString: string ): boolean => {
-	return /T.*[Z]$|T.*[+-]\d{2}:?\d{2}$/.test( dateString );
+	const tIndex = dateString.indexOf( 'T' );
+	if ( tIndex === -1 ) {
+		return false;
+	}
+
+	if ( dateString.endsWith( 'Z' ) ) {
+		return true;
+	}
+
+	return /[+-]\d{2}:?\d{2}$/.test( dateString.slice( tIndex + 1 ) );
 };
 
 /**

package/src/utils/get-styles.ts

@@ -62,7 +62,7 @@ export function getItemShapeStyles(
 ): Record< string, unknown > {
 	const seriesShapeStyles = series.options?.legendShapeStyle ?? {};
 	const lineStyles = legendShape === 'line' ? getSeriesLineStyles( series, index, theme ) : {};
-	const themeShapeStyles = theme.legendShapeStyles?.[ index ];
+	const themeShapeStyles = theme.legend?.shapeStyles?.[ index ];
 
 	const itemShapeStyles = {
 		...seriesShapeStyles,

package/src/utils/test/date-parsing.test.ts

@@ -268,6 +268,18 @@ describe( 'parseAsLocalDate', () => {
 		} );
 	} );
 
+	describe( 'ReDoS resilience', () => {
+		test( 'should handle adversarial input without catastrophic backtracking', () => {
+			const malicious = 'T' + 'a'.repeat( 8000000 ) + 'X';
+			const start = performance.now();
+			const result = parseAsLocalDate( malicious );
+			const elapsed = performance.now() - start;
+
+			expect( isNaN( result.getTime() ) ).toBe( true );
+			expect( elapsed ).toBeLessThan( 50 );
+		} );
+	} );
+
 	describe( 'Performance and consistency', () => {
 		test( 'should consistently parse the same input', () => {
 			const dateString = '2025-01-15T14:30:45Z';