@automattic/charts 0.58.0 → 0.59.0

package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx

@@ -18,13 +18,11 @@ const mockData = [
 		label: 'Category A',
 		value: 30,
 		valueDisplay: '30%',
-		percentage: 30,
 	},
 	{
 		label: 'Category B',
 		value: 70,
 		valueDisplay: '70%',
-		percentage: 70,
 	},
 ];
 
@@ -64,9 +62,9 @@ describe( 'PieSemiCircleChart', () => {
 	it( 'shows tooltip on segment hover when withTooltips is true', async () => {
 		const user = userEvent.setup();
 		const testData = [
-			{ label: 'MacOS', value: 30000, valueDisplay: '30K', percentage: 5 },
-			{ label: 'Linux', value: 22000, valueDisplay: '22K', percentage: 1 },
-			{ label: 'Windows', value: 80000, valueDisplay: '80K', percentage: 2 },
+			{ label: 'MacOS', value: 30000, valueDisplay: '30K' },
+			{ label: 'Linux', value: 22000, valueDisplay: '22K' },
+			{ label: 'Windows', value: 80000, valueDisplay: '80K' },
 		];
 
 		renderPieChart( { data: testData, withTooltips: true, width: 400 } );
@@ -86,9 +84,9 @@ describe( 'PieSemiCircleChart', () => {
 	it( 'hides tooltip on mouse leave', async () => {
 		const user = userEvent.setup();
 		const testData = [
-			{ label: 'MacOS', value: 30000, valueDisplay: '30K', percentage: 5 },
-			{ label: 'Linux', value: 22000, valueDisplay: '22K', percentage: 1 },
-			{ label: 'Windows', value: 80000, valueDisplay: '80K', percentage: 2 },
+			{ label: 'MacOS', value: 30000, valueDisplay: '30K' },
+			{ label: 'Linux', value: 22000, valueDisplay: '22K' },
+			{ label: 'Windows', value: 80000, valueDisplay: '80K' },
 		];
 
 		renderPieChart( { data: testData, withTooltips: true, width: 400 } );
@@ -113,9 +111,9 @@ describe( 'PieSemiCircleChart', () => {
 	it( 'renders custom tooltip when renderTooltip prop is provided', async () => {
 		const user = userEvent.setup();
 		const testData = [
-			{ label: 'MacOS', value: 30000, valueDisplay: '30K', percentage: 5 },
-			{ label: 'Linux', value: 22000, valueDisplay: '22K', percentage: 1 },
-			{ label: 'Windows', value: 80000, valueDisplay: '80K', percentage: 2 },
+			{ label: 'MacOS', value: 30000, valueDisplay: '30K' },
+			{ label: 'Linux', value: 22000, valueDisplay: '22K' },
+			{ label: 'Windows', value: 80000, valueDisplay: '80K' },
 		];
 
 		const customTooltipRenderer = jest.fn( ( { tooltipData } ) => (
@@ -148,10 +146,12 @@ describe( 'PieSemiCircleChart', () => {
 				tooltipData: expect.objectContaining( {
 					label: 'MacOS',
 					value: 30000,
-					percentage: 5,
 				} ),
 			} )
 		);
+		// Verify percentage is calculated (approximately 22.73%)
+		const callArgs = customTooltipRenderer.mock.calls[ 0 ][ 0 ];
+		expect( callArgs.tooltipData.percentage ).toBeCloseTo( 22.73, 1 );
 	} );
 
 	it( 'applies custom className', () => {
@@ -193,21 +193,21 @@ describe( 'PieSemiCircleChart', () => {
 			expect( screen.getByText( 'No data available' ) ).toBeInTheDocument();
 		} );
 
-		test( 'handles zero total percentage', () => {
+		test( 'handles zero total value', () => {
 			renderPieChart( {
 				data: [
-					{ label: 'A', value: 0, percentage: 0 },
-					{ label: 'B', value: 0, percentage: 0 },
+					{ label: 'A', value: 0 },
+					{ label: 'B', value: 0 },
 				],
 			} );
 			expect(
-				screen.getByText( 'Invalid percentage total: Must be greater than 0' )
+				screen.getByText( 'Invalid data: Total value must be greater than 0' )
 			).toBeInTheDocument();
 		} );
 
 		test( 'handles single data point', () => {
 			renderPieChart( {
-				data: [ { label: 'Single', value: 100, percentage: 50 } ],
+				data: [ { label: 'Single', value: 100 } ],
 			} );
 			expect( screen.getByTestId( 'pie-segment' ) ).toBeInTheDocument();
 		} );
@@ -215,8 +215,8 @@ describe( 'PieSemiCircleChart', () => {
 		test( 'handles negative values', () => {
 			renderPieChart( {
 				data: [
-					{ label: 'A', value: -30, percentage: -30 },
-					{ label: 'B', value: 130, percentage: 130 },
+					{ label: 'A', value: -30 },
+					{ label: 'B', value: 130 },
 				],
 			} );
 			expect(
@@ -288,8 +288,8 @@ describe( 'PieSemiCircleChart', () => {
 		test( 'filters segments when interactive legend is enabled and segment is toggled', async () => {
 			const user = userEvent.setup();
 			const testData = [
-				{ label: 'Segment A', value: 50, percentage: 50 },
-				{ label: 'Segment B', value: 50, percentage: 50 },
+				{ label: 'Segment A', value: 50 },
+				{ label: 'Segment B', value: 50 },
 			];
 
 			renderPieChart( {
@@ -320,8 +320,8 @@ describe( 'PieSemiCircleChart', () => {
 		test( 'shows empty state when all segments are hidden', async () => {
 			const user = userEvent.setup();
 			const testData = [
-				{ label: 'Segment A', value: 50, percentage: 50 },
-				{ label: 'Segment B', value: 50, percentage: 50 },
+				{ label: 'Segment A', value: 50 },
+				{ label: 'Segment B', value: 50 },
 			];
 
 			renderPieChart( {
@@ -347,8 +347,8 @@ describe( 'PieSemiCircleChart', () => {
 
 		test( 'does not filter segments when legendInteractive is false', () => {
 			const testData = [
-				{ label: 'Segment A', value: 50, percentage: 50 },
-				{ label: 'Segment B', value: 50, percentage: 50 },
+				{ label: 'Segment A', value: 50 },
+				{ label: 'Segment B', value: 50 },
 			];
 
 			renderPieChart( {

package/src/charts/private/chart-layout/chart-layout.module.scss

@@ -0,0 +1,7 @@
+// Shared content area for charts using the render prop.
+// Wraps render prop output and handles measurement.
+.chart-layout__content {
+	flex: 1;
+	min-height: 0;
+	min-width: 0;
+}

package/src/charts/private/chart-layout/chart-layout.tsx

@@ -0,0 +1,106 @@
+import { Stack } from '@wordpress/ui';
+import { useEffect } from 'react';
+import { useElementSize } from '../../../hooks';
+import { renderLegendSlot } from '../chart-composition';
+import styles from './chart-layout.module.scss';
+import type { LegendPosition } from '../../../types';
+import type { LegendChild } from '../chart-composition/use-chart-children';
+import type { GapSize } from '@wordpress/theme';
+import type { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Measurements provided to the render prop when ChartLayout handles resize listening.
+ */
+export interface ContentMeasurements {
+	/** Measured width of the content area in pixels */
+	contentWidth: number;
+	/** Measured height of the content area in pixels */
+	contentHeight: number;
+	/** True when a non-zero contentHeight measurement is available */
+	isMeasured: boolean;
+}
+
+export interface ChartLayoutProps {
+	/** Position for the prop-based legend element */
+	legendPosition: LegendPosition;
+	/** The legend element rendered via the showLegend prop (false when hidden) */
+	legendElement?: ReactNode;
+	/** Legend children from the composition API */
+	legendChildren: LegendChild[];
+	/** Chart content — either a ReactNode or a render prop receiving content measurements */
+	children: ReactNode | ( ( measurements: ContentMeasurements ) => ReactNode );
+	/** Content rendered after the bottom legend (e.g., nonLegendChildren, htmlChildren, tooltips) */
+	trailingContent?: ReactNode;
+	/** Called when the measured content height changes (for render-prop mode) */
+	onContentHeightChange?: ( height: number ) => void;
+	/** Gap between Stack items */
+	gap?: GapSize;
+	/** Additional class names */
+	className?: string;
+	/** Inline styles (width, height, etc.) */
+	style?: CSSProperties;
+	/** Test ID for the container */
+	'data-testid'?: string;
+	/** Chart ID attribute */
+	'data-chart-id'?: string;
+}
+
+export const ChartLayout = ( {
+	legendPosition,
+	legendElement,
+	legendChildren,
+	children,
+	trailingContent,
+	onContentHeightChange,
+	gap,
+	className,
+	style,
+	'data-testid': dataTestId,
+	'data-chart-id': dataChartId,
+}: ChartLayoutProps ) => {
+	const [ contentRef, contentWidth, contentHeight ] = useElementSize< HTMLDivElement >();
+	const isRenderProp = typeof children === 'function';
+	const isMeasured = contentHeight > 0;
+
+	// When using render-prop children, hide the layout until measurement is available
+	// to prevent layout shift. Plain ReactNode children don't need this since they
+	// don't depend on measured dimensions.
+	const visibilityStyle: { visibility?: 'hidden' | 'visible' } =
+		isRenderProp && ! isMeasured ? { visibility: 'hidden' } : {};
+
+	useEffect( () => {
+		if ( isRenderProp && onContentHeightChange && isMeasured ) {
+			onContentHeightChange( contentHeight );
+		}
+	}, [ isRenderProp, contentHeight, isMeasured, onContentHeightChange ] );
+	const renderedChildren = isRenderProp
+		? children( { contentWidth, contentHeight, isMeasured } )
+		: children;
+
+	return (
+		<Stack
+			direction="column"
+			gap={ gap }
+			className={ className }
+			style={ { ...style, ...visibilityStyle } }
+			data-testid={ dataTestId }
+			data-chart-id={ dataChartId }
+		>
+			{ legendPosition === 'top' && legendElement }
+			{ renderLegendSlot( legendChildren, 'top' ) }
+
+			{ isRenderProp ? (
+				<div ref={ contentRef } className={ styles[ 'chart-layout__content' ] }>
+					{ renderedChildren }
+				</div>
+			) : (
+				renderedChildren
+			) }
+
+			{ legendPosition === 'bottom' && legendElement }
+			{ renderLegendSlot( legendChildren, 'bottom' ) }
+
+			{ trailingContent }
+		</Stack>
+	);
+};

package/src/charts/private/chart-layout/index.ts

@@ -0,0 +1,2 @@
+export { ChartLayout } from './chart-layout';
+export type { ChartLayoutProps, ContentMeasurements } from './chart-layout';

package/src/charts/private/chart-layout/test/chart-layout.test.tsx

@@ -0,0 +1,167 @@
+import { render, screen } from '@testing-library/react';
+import { renderLegendSlot } from '../../chart-composition';
+import { ChartLayout } from '../chart-layout';
+import type { LegendChild } from '../../chart-composition/use-chart-children';
+
+// Mock renderLegendSlot since we test it separately
+jest.mock( '../../chart-composition', () => ( {
+	renderLegendSlot: jest.fn( () => [] ),
+} ) );
+
+const mockRenderLegendSlot = renderLegendSlot as jest.Mock;
+
+describe( 'ChartLayout', () => {
+	beforeEach( () => {
+		mockRenderLegendSlot.mockReturnValue( [] );
+	} );
+
+	it( 'renders children inside a column Stack', () => {
+		render(
+			<ChartLayout legendPosition="bottom" legendChildren={ [] }>
+				<div data-testid="chart-content">Chart</div>
+			</ChartLayout>
+		);
+		expect( screen.getByTestId( 'chart-content' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders legend element at top when legendPosition is top', () => {
+		const legendElement = <div data-testid="legend">Legend</div>;
+		render(
+			<ChartLayout legendPosition="top" legendElement={ legendElement } legendChildren={ [] }>
+				<div data-testid="chart-content">Chart</div>
+			</ChartLayout>
+		);
+		const legend = screen.getByTestId( 'legend' );
+		const content = screen.getByTestId( 'chart-content' );
+		expect( legend.compareDocumentPosition( content ) ).toBe( Node.DOCUMENT_POSITION_FOLLOWING );
+	} );
+
+	it( 'renders legend element at bottom when legendPosition is bottom', () => {
+		const legendElement = <div data-testid="legend">Legend</div>;
+		render(
+			<ChartLayout legendPosition="bottom" legendElement={ legendElement } legendChildren={ [] }>
+				<div data-testid="chart-content">Chart</div>
+			</ChartLayout>
+		);
+		const content = screen.getByTestId( 'chart-content' );
+		const legend = screen.getByTestId( 'legend' );
+		expect( content.compareDocumentPosition( legend ) ).toBe( Node.DOCUMENT_POSITION_FOLLOWING );
+	} );
+
+	it( 'does not render legend element when it is false/null', () => {
+		render(
+			<ChartLayout legendPosition="top" legendElement={ false } legendChildren={ [] }>
+				<div data-testid="chart-content">Chart</div>
+			</ChartLayout>
+		);
+		expect( screen.queryByTestId( 'legend' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'calls renderLegendSlot for both positions', () => {
+		const legendChildren: LegendChild[] = [];
+		render(
+			<ChartLayout legendPosition="bottom" legendChildren={ legendChildren }>
+				<div>Chart</div>
+			</ChartLayout>
+		);
+		expect( mockRenderLegendSlot ).toHaveBeenCalledWith( legendChildren, 'top' );
+		expect( mockRenderLegendSlot ).toHaveBeenCalledWith( legendChildren, 'bottom' );
+	} );
+
+	it( 'hides layout until measured when using render-prop children', () => {
+		// Override the global getBoundingClientRect mock to return zero (unmeasured state)
+		// for elements inside this test. This simulates the initial state before
+		// ResizeObserver provides real dimensions in a browser.
+		const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+		Element.prototype.getBoundingClientRect = function () {
+			return { width: 0, height: 0, top: 0, left: 0, bottom: 0, right: 0, x: 0, y: 0 } as DOMRect;
+		};
+
+		try {
+			const childFn = jest.fn().mockReturnValue( <div>Chart</div> );
+			render(
+				<ChartLayout legendPosition="bottom" legendChildren={ [] } data-testid="layout">
+					{ childFn }
+				</ChartLayout>
+			);
+			// When contentHeight is 0, layout should be hidden to prevent layout shift
+			expect( screen.getByTestId( 'layout' ) ).toHaveStyle( { visibility: 'hidden' } );
+		} finally {
+			Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+		}
+	} );
+
+	it( 'does not hide layout when using plain ReactNode children', () => {
+		render(
+			<ChartLayout legendPosition="bottom" legendChildren={ [] } data-testid="layout">
+				<div>Chart</div>
+			</ChartLayout>
+		);
+		const layoutStyle = screen.getByTestId( 'layout' ).getAttribute( 'style' ) ?? '';
+		expect( layoutStyle ).not.toContain( 'visibility' );
+	} );
+
+	it( 'passes className and style to Stack', () => {
+		render(
+			<ChartLayout
+				legendPosition="bottom"
+				legendChildren={ [] }
+				className="my-chart"
+				style={ { width: 400, height: 300 } }
+				data-testid="layout"
+			>
+				<div>Chart</div>
+			</ChartLayout>
+		);
+		const layout = screen.getByTestId( 'layout' );
+		expect( layout ).toHaveClass( 'my-chart' );
+		expect( layout ).toHaveStyle( { width: '400px', height: '300px' } );
+	} );
+
+	it( 'passes gap to Stack', () => {
+		render(
+			<ChartLayout legendPosition="bottom" legendChildren={ [] } gap="lg" data-testid="layout">
+				<div>Chart</div>
+			</ChartLayout>
+		);
+		// Stack renders gap as a CSS class or style — just verify it renders without error
+		expect( screen.getByTestId( 'layout' ) ).toBeInTheDocument();
+	} );
+
+	it( 'calls function-as-children with measurement props', () => {
+		const childFn = jest.fn().mockReturnValue( <div data-testid="chart-content">Chart</div> );
+
+		render(
+			<ChartLayout legendPosition="bottom" legendChildren={ [] }>
+				{ childFn }
+			</ChartLayout>
+		);
+
+		expect( childFn ).toHaveBeenCalled();
+		const firstCallArg = childFn.mock.calls[ 0 ][ 0 ];
+
+		expect( firstCallArg ).toEqual(
+			expect.objectContaining( {
+				contentWidth: expect.any( Number ),
+				contentHeight: expect.any( Number ),
+				isMeasured: expect.any( Boolean ),
+			} )
+		);
+	} );
+
+	it( 'renders trailing content after bottom legend', () => {
+		render(
+			<ChartLayout
+				legendPosition="bottom"
+				legendElement={ <div data-testid="legend">Legend</div> }
+				legendChildren={ [] }
+				trailingContent={ <div data-testid="trailing">Extra</div> }
+			>
+				<div data-testid="chart-content">Chart</div>
+			</ChartLayout>
+		);
+		const legend = screen.getByTestId( 'legend' );
+		const trailing = screen.getByTestId( 'trailing' );
+		expect( legend.compareDocumentPosition( trailing ) ).toBe( Node.DOCUMENT_POSITION_FOLLOWING );
+	} );
+} );

package/src/charts/private/single-chart-context/single-chart-context.tsx

@@ -13,8 +13,8 @@ export interface ChartInstanceRef {
 export interface ChartInstanceContextValue {
 	chartId: string;
 	chartRef?: React.RefObject< ChartInstanceRef >;
-	chartWidth: number;
-	chartHeight: number;
+	chartWidth?: number;
+	chartHeight?: number;
 }
 
 export const ChartInstanceContext = createContext< ChartInstanceContextValue | null >( null );

package/src/charts/private/svg-empty-state/index.ts

@@ -0,0 +1 @@
+export { SvgEmptyState } from './svg-empty-state';

package/src/charts/private/svg-empty-state/svg-empty-state.module.scss

@@ -0,0 +1,7 @@
+.svg-empty-state {
+	text-align: center;
+	width: 100%;
+	height: 100%;
+	font-size: var(--wpds-font-size-md, 13px);
+	color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
+}

package/src/charts/private/svg-empty-state/svg-empty-state.tsx

@@ -0,0 +1,40 @@
+import { Stack } from '@wordpress/ui';
+import styles from './svg-empty-state.module.scss';
+import type { FC, ReactNode } from 'react';
+
+interface SvgEmptyStateProps {
+	/** X coordinate of the center point */
+	x: number;
+	/** Y coordinate of the center point */
+	y: number;
+	/** Available width for the text area */
+	width: number;
+	/** Available height for the text area */
+	height: number;
+	/** Text content */
+	children: ReactNode;
+}
+
+/**
+ * Renders empty-state text inside an SVG using foreignObject so that the
+ * message wraps onto multiple lines instead of being clipped.
+ *
+ * The component centers the text within the specified area.
+ *
+ * @param  root0          - Component props
+ * @param  root0.x        - X coordinate of the center point
+ * @param  root0.y        - Y coordinate of the center point
+ * @param  root0.width    - Available width for the text area
+ * @param  root0.height   - Available height for the text area
+ * @param  root0.children - Text content
+ * @return {JSX.Element} A foreignObject element containing the centered text.
+ */
+export const SvgEmptyState: FC< SvgEmptyStateProps > = ( { x, y, width, height, children } ) => {
+	return (
+		<foreignObject x={ x - width / 2 } y={ y - height / 2 } width={ width } height={ height }>
+			<Stack align="center" justify="center" className={ styles[ 'svg-empty-state' ] }>
+				{ children }
+			</Stack>
+		</foreignObject>
+	);
+};

package/src/components/legend/hooks/test/use-chart-legend-items.test.tsx

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { GlobalChartsProvider } from '../../../../providers';
 import { useChartLegendItems } from '../use-chart-legend-items';
-import type { DataPointPercentage, DataPointDate, SeriesData } from '../../../../types';
+import type { DataPointPercentageCalculated, DataPointDate, SeriesData } from '../../../../types';
 import type { ReactNode } from 'react';
 
 // Wrapper component to provide GlobalChartsProvider context
@@ -11,8 +11,8 @@ const wrapper = ( { children }: { children: ReactNode } ) => (
 
 describe( 'useChartLegendItems', () => {
 	describe( 'Number Formatting (i18n)', () => {
-		describe( 'DataPointPercentage', () => {
-			const percentageData: DataPointPercentage[] = [
+		describe( 'DataPointPercentageCalculated', () => {
+			const percentageData: DataPointPercentageCalculated[] = [
 				{ label: 'Item 1', value: 80000, percentage: 60.6 },
 				{ label: 'Item 2', value: 30000, percentage: 22.7 },
 				{ label: 'Item 3', value: 22000, percentage: 16.7 },
@@ -50,7 +50,7 @@ describe( 'useChartLegendItems', () => {
 			} );
 
 			test( 'uses valueDisplay when provided, falling back to formatted value', () => {
-				const dataWithDisplay: DataPointPercentage[] = [
+				const dataWithDisplay: DataPointPercentageCalculated[] = [
 					{ label: 'Item 1', value: 80000, percentage: 60, valueDisplay: 'Custom 80K' },
 					{ label: 'Item 2', value: 30000, percentage: 30 },
 				];
@@ -194,7 +194,9 @@ describe( 'useChartLegendItems', () => {
 		} );
 
 		test( 'handles data with zero values', () => {
-			const zeroData: DataPointPercentage[] = [ { label: 'Zero Value', value: 0, percentage: 0 } ];
+			const zeroData: DataPointPercentageCalculated[] = [
+				{ label: 'Zero Value', value: 0, percentage: 0 },
+			];
 
 			const { result } = renderHook(
 				() =>
@@ -209,7 +211,7 @@ describe( 'useChartLegendItems', () => {
 		} );
 
 		test( 'handles very large numbers', () => {
-			const largeData: DataPointPercentage[] = [
+			const largeData: DataPointPercentageCalculated[] = [
 				{ label: 'Large', value: 1234567890, percentage: 100 },
 			];
 
@@ -227,7 +229,7 @@ describe( 'useChartLegendItems', () => {
 		} );
 
 		test( 'handles decimal values', () => {
-			const decimalData: DataPointPercentage[] = [
+			const decimalData: DataPointPercentageCalculated[] = [
 				{ label: 'Decimal', value: 1234.5678, percentage: 100 },
 			];
 
@@ -247,7 +249,9 @@ describe( 'useChartLegendItems', () => {
 
 	describe( 'Label and Color', () => {
 		test( 'preserves label and color from data', () => {
-			const data: DataPointPercentage[] = [ { label: 'Test Label', value: 100, percentage: 100 } ];
+			const data: DataPointPercentageCalculated[] = [
+				{ label: 'Test Label', value: 100, percentage: 100 },
+			];
 
 			const { result } = renderHook(
 				() =>

package/src/components/legend/hooks/use-chart-legend-items.ts

@@ -6,7 +6,7 @@ import {
 	type ElementStyles,
 } from '../../../providers';
 import { formatPercentage } from '../../../utils';
-import type { SeriesData, DataPointDate, DataPointPercentage } from '../../../types';
+import type { SeriesData, DataPointDate, DataPointPercentageCalculated } from '../../../types';
 import type { BaseLegendItem } from '../types';
 import type { LegendShape } from '@visx/legend/lib/types';
 import type { GlyphProps } from '@visx/xychart';
@@ -31,7 +31,7 @@ export interface ChartLegendOptions {
  * @return Formatted value string
  */
 function formatPointValue(
-	point: DataPointDate | DataPointPercentage,
+	point: DataPointDate | DataPointPercentageCalculated,
 	showValues: boolean,
 	legendValueDisplay: LegendValueDisplay = 'percentage'
 ): string {
@@ -39,16 +39,15 @@ function formatPointValue(
 		return '';
 	}
 
-	// Handle DataPointPercentage (pie chart data)
+	// Handle DataPointPercentageCalculated (pie chart data with calculated percentage)
 	if ( 'percentage' in point ) {
-		const percentagePoint = point as DataPointPercentage;
 		switch ( legendValueDisplay ) {
 			case 'percentage':
-				return formatPercentage( percentagePoint.percentage );
+				return formatPercentage( point.percentage );
 			case 'value':
-				return formatNumber( percentagePoint.value );
+				return formatNumber( point.value );
 			case 'valueDisplay':
-				return percentagePoint.valueDisplay || formatNumber( percentagePoint.value );
+				return point.valueDisplay || formatNumber( point.value );
 			default:
 				return '';
 		}
@@ -145,7 +144,7 @@ function processSeriesData(
  * @return Array of processed legend items
  */
 function processPointData(
-	pointData: ( DataPointDate | DataPointPercentage )[],
+	pointData: ( DataPointDate | DataPointPercentageCalculated )[],
 	getElementStyles: ( params: GetElementStylesParams ) => ElementStyles,
 	showValues: boolean,
 	legendValueDisplay: LegendValueDisplay,
@@ -154,9 +153,9 @@ function processPointData(
 	renderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode,
 	legendShape?: LegendShape< SeriesData[], number >
 ): BaseLegendItem[] {
-	const mapper = ( point: DataPointDate | DataPointPercentage, index: number ) => {
+	const mapper = ( point: DataPointDate | DataPointPercentageCalculated, index: number ) => {
 		const { color, glyph, shapeStyles } = getElementStyles( {
-			data: point as DataPointPercentage,
+			data: point as DataPointPercentageCalculated,
 			index,
 			legendShape,
 		} );
@@ -182,7 +181,7 @@ function processPointData(
  * @return Array of legend items ready for display
  */
 export function useChartLegendItems<
-	T extends SeriesData[] | DataPointDate[] | DataPointPercentage[],
+	T extends SeriesData[] | DataPointDate[] | DataPointPercentageCalculated[],
 >(
 	data: T,
 	options: ChartLegendOptions = {},
@@ -215,9 +214,9 @@ export function useChartLegendItems<
 			);
 		}
 
-		// Handle DataPointDate or DataPointPercentage (single data points)
+		// Handle DataPointDate or DataPointPercentageCalculated (single data points)
 		return processPointData(
-			data as ( DataPointDate | DataPointPercentage )[],
+			data as ( DataPointDate | DataPointPercentageCalculated )[],
 			getElementStyles,
 			showValues,
 			legendValueDisplay,