Invalid Percentage Total
Negative Values
),
+ args: {
+ containerHeight: '600px',
+ },
parameters: {
docs: {
description: {
diff --git a/projects/js-packages/charts/src/charts/pie-chart/stories/tooltip.stories.tsx b/projects/js-packages/charts/src/charts/pie-chart/stories/tooltip.stories.tsx
index 763033820fd..856f5dbfa27 100644
--- a/projects/js-packages/charts/src/charts/pie-chart/stories/tooltip.stories.tsx
+++ b/projects/js-packages/charts/src/charts/pie-chart/stories/tooltip.stories.tsx
@@ -45,11 +45,9 @@ const Template: StoryFn< typeof PieChart > = args =>
;
const tooltipStoryArgs = {
...sharedThemeArgs,
data,
- size: 400,
withTooltips: true,
containerWidth: '432px',
containerHeight: '432px',
- resize: 'none' as const,
};
export const Default: StoryObj< typeof PieChart > = Template.bind( {} );
@@ -261,13 +259,13 @@ export const TooltipOffset: StoryObj< typeof PieChart > = {
>
Default Offset (0, -15)
-
+
Custom Offset (20, -30)
diff --git a/projects/js-packages/charts/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx b/projects/js-packages/charts/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx
index 82276f39200..46c9d62764a 100644
--- a/projects/js-packages/charts/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx
+++ b/projects/js-packages/charts/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx';
import { useCallback, useContext, useMemo } from 'react';
import { Legend, useChartLegendItems } from '../../components/legend';
import { BaseTooltip } from '../../components/tooltip';
-import { useElementHeight, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';
+import { useElementSize, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';
import {
GlobalChartsProvider,
useChartId,
@@ -181,7 +181,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
renderTooltip = renderDefaultPieSemiCircleTooltip,
} ) => {
const chartId = useChartId( providedChartId );
- const [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();
+ const [ legendRef, , legendHeight ] = useElementSize< HTMLDivElement >();
const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
useTooltip< DataPointPercentage >();
diff --git a/projects/js-packages/charts/src/charts/private/with-responsive/test/with-responsive.test.tsx b/projects/js-packages/charts/src/charts/private/with-responsive/test/with-responsive.test.tsx
index 89006214341..fedf762944f 100644
--- a/projects/js-packages/charts/src/charts/private/with-responsive/test/with-responsive.test.tsx
+++ b/projects/js-packages/charts/src/charts/private/with-responsive/test/with-responsive.test.tsx
@@ -47,10 +47,10 @@ describe( 'withResponsive', () => {
expect( component ).toHaveStyle( { width: '400px' } );
} );
- test( 'passes size prop equal to container width', () => {
- render(
);
+ test( 'passes explicit size prop through to component', () => {
+ render(
);
const component = screen.getByTestId( 'mock-component' );
- expect( component ).toHaveAttribute( 'data-size', '600' );
+ expect( component ).toHaveAttribute( 'data-size', '200' );
} );
} );
@@ -61,8 +61,8 @@ describe( 'withResponsive', () => {
expect( wrapper ).toHaveStyle( { width: '100%', height: '100%' } );
} );
- test( 'wrapper uses size prop for dimensions when provided', () => {
- render(
);
+ test( 'wrapper uses explicit width/height for dimensions when provided', () => {
+ render(
);
const wrapper = screen.getByTestId( 'responsive-wrapper' );
expect( wrapper ).toHaveStyle( { width: '200px', height: '200px' } );
} );
diff --git a/projects/js-packages/charts/src/charts/private/with-responsive/with-responsive.tsx b/projects/js-packages/charts/src/charts/private/with-responsive/with-responsive.tsx
index 94587ac8ccb..e0ddc489066 100644
--- a/projects/js-packages/charts/src/charts/private/with-responsive/with-responsive.tsx
+++ b/projects/js-packages/charts/src/charts/private/with-responsive/with-responsive.tsx
@@ -86,10 +86,11 @@ export function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'o
aspectRatio,
} );
- // Use measured dimensions, but fall back to explicit props if measurement returns 0
- // (e.g., during initial render or in test environments without DOM measurement)
- const effectiveWidth = measuredWidth || size || width || 0;
- const effectiveHeight = measuredHeight || size || height || 0;
+ // Use measured dimensions, but fall back to explicit width/height props if measurement returns 0
+ // (e.g., during initial render or in test environments without DOM measurement).
+ // Do not use size here — size controls chart element dimensions (e.g. pie diameter), not container dimensions.
+ const effectiveWidth = measuredWidth || width || 0;
+ const effectiveHeight = measuredHeight || height || 0;
const defaultHeight = hasAspectRatio ? 'auto' : '100%';
@@ -99,14 +100,14 @@ export function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'o
data-testid="responsive-wrapper"
className={ styles.container }
style={ {
- width: size ?? width ?? '100%',
- height: size ?? height ?? defaultHeight,
+ width: width ?? '100%',
+ height: height ?? defaultHeight,
} }
>
diff --git a/projects/js-packages/charts/src/hooks/index.ts b/projects/js-packages/charts/src/hooks/index.ts
index a0e7ebdf730..6bf6c934c6e 100644
--- a/projects/js-packages/charts/src/hooks/index.ts
+++ b/projects/js-packages/charts/src/hooks/index.ts
@@ -3,7 +3,7 @@ export { useChartMouseHandler } from './use-chart-mouse-handler';
export { useXYChartTheme } from './use-xychart-theme';
export { useChartDataTransform } from './use-chart-data-transform';
export { useChartMargin } from './use-chart-margin';
-export { useElementHeight } from './use-element-height';
+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';
diff --git a/projects/js-packages/charts/src/hooks/test/use-element-height.test.tsx b/projects/js-packages/charts/src/hooks/test/use-element-size.test.tsx
similarity index 66%
rename from projects/js-packages/charts/src/hooks/test/use-element-height.test.tsx
rename to projects/js-packages/charts/src/hooks/test/use-element-size.test.tsx
index 61571a981d7..d8c1315d7fd 100644
--- a/projects/js-packages/charts/src/hooks/test/use-element-height.test.tsx
+++ b/projects/js-packages/charts/src/hooks/test/use-element-size.test.tsx
@@ -1,5 +1,5 @@
import { renderHook, waitFor } from '@testing-library/react';
-import { useElementHeight } from '../use-element-height';
+import { useElementSize } from '../use-element-size';
// Mock ResizeObserver
class MockResizeObserver {
@@ -25,7 +25,7 @@ class MockResizeObserver {
// Store original ResizeObserver
const originalResizeObserver = globalThis.ResizeObserver;
-describe( 'useElementHeight', () => {
+describe( 'useElementSize', () => {
let mockResizeObserver;
beforeEach( () => {
@@ -39,75 +39,82 @@ describe( 'useElementHeight', () => {
jest.clearAllMocks();
} );
- it( 'should return initial height of 0 by default', () => {
- const { result } = renderHook( () => useElementHeight() );
- const [ refCallback, height ] = result.current;
+ it( 'should return initial dimensions of 0 by default', () => {
+ const { result } = renderHook( () => useElementSize() );
+ const [ refCallback, width, height ] = result.current;
+ expect( width ).toBe( 0 );
expect( height ).toBe( 0 );
expect( typeof refCallback ).toBe( 'function' );
} );
- it( 'should return custom initial height when provided', () => {
- const { result } = renderHook( () => useElementHeight( { initialHeight: 100 } ) );
- const [ , height ] = result.current;
+ it( 'should return custom initial dimensions when provided', () => {
+ const { result } = renderHook( () =>
+ useElementSize( { initialWidth: 200, initialHeight: 100 } )
+ );
+ const [ , width, height ] = result.current;
+ expect( width ).toBe( 200 );
expect( height ).toBe( 100 );
} );
- it( 'should update height when element is attached', async () => {
+ it( 'should update dimensions when element is attached', async () => {
const mockElement = {
- getBoundingClientRect: jest.fn( () => ( { height: 150 } ) ),
+ getBoundingClientRect: jest.fn( () => ( { width: 300, height: 150 } ) ),
};
- const { result } = renderHook( () => useElementHeight() );
+ const { result } = renderHook( () => useElementSize() );
const [ refCallback ] = result.current;
// Attach the element
refCallback( mockElement as unknown as HTMLDivElement );
await waitFor( () => {
- expect( result.current[ 1 ] ).toBe( 150 );
+ expect( result.current[ 1 ] ).toBe( 300 );
+ expect( result.current[ 2 ] ).toBe( 150 );
} );
expect( mockElement.getBoundingClientRect ).toHaveBeenCalled();
} );
- it( 'should handle element with zero height', async () => {
+ it( 'should handle element with zero dimensions', async () => {
const mockElement = {
- getBoundingClientRect: jest.fn( () => ( { height: 0 } ) ),
+ getBoundingClientRect: jest.fn( () => ( { width: 0, height: 0 } ) ),
};
- const { result } = renderHook( () => useElementHeight() );
+ const { result } = renderHook( () => useElementSize() );
const [ refCallback ] = result.current;
refCallback( mockElement as unknown as HTMLDivElement );
await waitFor( () => {
expect( result.current[ 1 ] ).toBe( 0 );
+ expect( result.current[ 2 ] ).toBe( 0 );
} );
} );
- it( 'should handle getBoundingClientRect returning undefined height', async () => {
+ it( 'should handle getBoundingClientRect returning undefined dimensions', async () => {
const mockElement = {
- getBoundingClientRect: jest.fn( () => ( { height: undefined } ) ),
+ getBoundingClientRect: jest.fn( () => ( { width: undefined, height: undefined } ) ),
};
- const { result } = renderHook( () => useElementHeight() );
+ const { result } = renderHook( () => useElementSize() );
const [ refCallback ] = result.current;
refCallback( mockElement as unknown as HTMLDivElement );
await waitFor( () => {
expect( result.current[ 1 ] ).toBe( 0 );
+ expect( result.current[ 2 ] ).toBe( 0 );
} );
} );
it( 'should disconnect previous observer when new element is attached', () => {
const mockElement1 = {
- getBoundingClientRect: jest.fn( () => ( { height: 100 } ) ),
+ getBoundingClientRect: jest.fn( () => ( { width: 100, height: 100 } ) ),
};
const mockElement2 = {
- getBoundingClientRect: jest.fn( () => ( { height: 200 } ) ),
+ getBoundingClientRect: jest.fn( () => ( { width: 200, height: 200 } ) ),
};
const disconnectSpy = jest.fn();
@@ -119,7 +126,7 @@ describe( 'useElementHeight', () => {
jest.spyOn( globalThis, 'ResizeObserver' ).mockImplementation( () => mockObserver );
- const { result } = renderHook( () => useElementHeight() );
+ const { result } = renderHook( () => useElementSize() );
const [ refCallback ] = result.current;
// Attach first element
@@ -133,7 +140,7 @@ describe( 'useElementHeight', () => {
it( 'should disconnect observer when element is removed (null)', () => {
const mockElement = {
- getBoundingClientRect: jest.fn( () => ( { height: 100 } ) ),
+ getBoundingClientRect: jest.fn( () => ( { width: 100, height: 100 } ) ),
};
const disconnectSpy = jest.fn();
@@ -145,7 +152,7 @@ describe( 'useElementHeight', () => {
jest.spyOn( globalThis, 'ResizeObserver' ).mockImplementation( () => mockObserver );
- const { result } = renderHook( () => useElementHeight() );
+ const { result } = renderHook( () => useElementSize() );
const [ refCallback ] = result.current;
// Attach element
@@ -159,7 +166,7 @@ describe( 'useElementHeight', () => {
it( 'should create ResizeObserver and observe element', () => {
const mockElement = {
- getBoundingClientRect: jest.fn( () => ( { height: 100 } ) ),
+ getBoundingClientRect: jest.fn( () => ( { width: 100, height: 100 } ) ),
};
const observeSpy = jest.fn();
@@ -171,7 +178,7 @@ describe( 'useElementHeight', () => {
jest.spyOn( globalThis, 'ResizeObserver' ).mockImplementation( () => mockObserver );
- const { result } = renderHook( () => useElementHeight() );
+ const { result } = renderHook( () => useElementSize() );
const [ refCallback ] = result.current;
refCallback( mockElement as unknown as HTMLDivElement );
@@ -181,7 +188,7 @@ describe( 'useElementHeight', () => {
} );
it( 'should maintain stable refCallback reference across re-renders', () => {
- const { result, rerender } = renderHook( () => useElementHeight() );
+ const { result, rerender } = renderHook( () => useElementSize() );
const firstRefCallback = result.current[ 0 ];
@@ -195,26 +202,27 @@ describe( 'useElementHeight', () => {
it( 'should work with different element types', async () => {
const mockSpanElement = {
- getBoundingClientRect: jest.fn( () => ( { height: 50 } ) ),
+ getBoundingClientRect: jest.fn( () => ( { width: 75, height: 50 } ) ),
};
- const { result } = renderHook( () => useElementHeight() );
+ const { result } = renderHook( () => useElementSize() );
const [ refCallback ] = result.current;
refCallback( mockSpanElement as unknown as HTMLDivElement );
await waitFor( () => {
- expect( result.current[ 1 ] ).toBe( 50 );
+ expect( result.current[ 1 ] ).toBe( 75 );
+ expect( result.current[ 2 ] ).toBe( 50 );
} );
} );
- it( 'should update height when ResizeObserver callback is triggered', async () => {
+ it( 'should update dimensions when ResizeObserver callback is triggered', async () => {
let resizeCallback;
const mockElement = {
getBoundingClientRect: jest
.fn()
- .mockReturnValueOnce( { height: 100 } )
- .mockReturnValueOnce( { height: 200 } ),
+ .mockReturnValueOnce( { width: 100, height: 100 } )
+ .mockReturnValueOnce( { width: 200, height: 150 } ),
};
jest.spyOn( globalThis, 'ResizeObserver' ).mockImplementation( callback => {
@@ -226,13 +234,14 @@ describe( 'useElementHeight', () => {
};
} );
- const { result } = renderHook( () => useElementHeight() );
+ const { result } = renderHook( () => useElementSize() );
const [ refCallback ] = result.current;
refCallback( mockElement as unknown as HTMLDivElement );
await waitFor( () => {
expect( result.current[ 1 ] ).toBe( 100 );
+ expect( result.current[ 2 ] ).toBe( 100 );
} );
// Simulate resize
@@ -240,6 +249,7 @@ describe( 'useElementHeight', () => {
await waitFor( () => {
expect( result.current[ 1 ] ).toBe( 200 );
+ expect( result.current[ 2 ] ).toBe( 150 );
} );
expect( mockElement.getBoundingClientRect ).toHaveBeenCalledTimes( 2 );
@@ -247,7 +257,7 @@ describe( 'useElementHeight', () => {
it( 'should handle unmount properly', () => {
const mockElement = {
- getBoundingClientRect: jest.fn( () => ( { height: 100 } ) ),
+ getBoundingClientRect: jest.fn( () => ( { width: 100, height: 100 } ) ),
};
const disconnectSpy = jest.fn();
@@ -257,7 +267,7 @@ describe( 'useElementHeight', () => {
unobserve: jest.fn(),
} ) );
- const { result, unmount } = renderHook( () => useElementHeight() );
+ const { result, unmount } = renderHook( () => useElementSize() );
const [ refCallback ] = result.current;
refCallback( mockElement as unknown as HTMLDivElement );
diff --git a/projects/js-packages/charts/src/hooks/use-element-height.ts b/projects/js-packages/charts/src/hooks/use-element-size.ts
similarity index 51%
rename from projects/js-packages/charts/src/hooks/use-element-height.ts
rename to projects/js-packages/charts/src/hooks/use-element-size.ts
index e4e34168412..9fea24ffed2 100644
--- a/projects/js-packages/charts/src/hooks/use-element-height.ts
+++ b/projects/js-packages/charts/src/hooks/use-element-size.ts
@@ -1,19 +1,23 @@
import { useState, useCallback, useRef } from 'react';
/**
- * Hook to measure the height of a DOM element.
- * Returns a ref to attach to the element and the current height in pixels.
+ * Hook to measure the width and height of a DOM element.
+ * Returns a ref callback to attach to the element and the current dimensions in pixels.
*
* @param {object} props - Optional props.
+ * @param {number} props.initialWidth - The initial width to use.
* @param {number} props.initialHeight - The initial height to use.
*
- * @return {[Function, number]} A tuple containing a ref to attach to the element and the current height in pixels
+ * @return {[Function, number, number]} A tuple containing a ref callback, width, and height in pixels
*/
-export function useElementHeight< T extends HTMLElement = HTMLDivElement >( {
+export function useElementSize< T extends HTMLElement = HTMLDivElement >( {
+ initialWidth = 0,
initialHeight = 0,
}: {
+ initialWidth?: number;
initialHeight?: number;
-} = {} ): [ ( node: T | null ) => void, number ] {
+} = {} ): [ ( node: T | null ) => void, number, number ] {
+ const [ width, setWidth ] = useState( initialWidth );
const [ height, setHeight ] = useState( initialHeight );
const observerRef = useRef< ResizeObserver | null >( null );
@@ -24,7 +28,9 @@ export function useElementHeight< T extends HTMLElement = HTMLDivElement >( {
}
if ( node ) {
const handleResize = () => {
- setHeight( node.getBoundingClientRect().height || 0 );
+ const rect = node.getBoundingClientRect();
+ setWidth( rect.width || 0 );
+ setHeight( rect.height || 0 );
};
handleResize();
const resizeObserver = new window.ResizeObserver( handleResize );
@@ -33,5 +39,5 @@ export function useElementHeight< T extends HTMLElement = HTMLDivElement >( {
}
}, [] );
- return [ refCallback, height ];
+ return [ refCallback, width, height ];
}
diff --git a/projects/js-packages/charts/src/types.ts b/projects/js-packages/charts/src/types.ts
index 1737d569279..781f064b134 100644
--- a/projects/js-packages/charts/src/types.ts
+++ b/projects/js-packages/charts/src/types.ts
@@ -364,15 +364,17 @@ export type BaseChartProps< T = DataPoint | DataPointDate | LeaderboardEntry > =
*/
className?: string;
/**
- * Width of the chart in pixels
+ * Width of the chart container in pixels. When omitted, the chart fills its parent's width.
*/
width?: number;
/**
- * Height of the chart in pixels
+ * Height of the chart container in pixels. When omitted, the chart fills its parent's height.
*/
height?: number;
/**
- * Size of the chart in pixels for pie and donut charts
+ * Maximum diameter of the pie in pixels (pie and donut charts only).
+ * The pie will shrink if the container is smaller than this value.
+ * When omitted, the pie fills the available space.
*/
size?: number;
/**