diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index 6caa839395..6d07425e22 100644 --- a/packages/polaris-viz/CHANGELOG.md +++ b/packages/polaris-viz/CHANGELOG.md @@ -7,6 +7,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). +- Fixed issue where chart would not resize on height change + ## [9.10.7] - 2023-09-06 ### Changed diff --git a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.tsx b/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.tsx index 38b1a82e6f..b86aa9dc7c 100644 --- a/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.tsx +++ b/packages/polaris-viz/src/components/ChartContainer/components/ChartDimensions/ChartDimensions.tsx @@ -55,7 +55,8 @@ export function ChartDimensions({ const updateDimensions = useCallback(() => { if ( - previousEntry?.contentRect.width === entry?.contentRect.width || + (previousEntry?.contentRect.width === entry?.contentRect.width && + previousEntry?.contentRect.height === entry?.contentRect.height) || entry == null ) { return; @@ -65,7 +66,7 @@ export function ChartDimensions({ const {x, y} = entry.target.getBoundingClientRect(); setChartDimensions({width, height, x, y: y + window.scrollY}); - }, [entry, previousEntry?.contentRect.width]); + }, [entry, previousEntry?.contentRect]); const debouncedUpdateDimensions = useDebouncedCallback(() => { updateDimensions(); diff --git a/packages/polaris-viz/src/components/LineChart/stories/ResizeableChart.stories.tsx b/packages/polaris-viz/src/components/LineChart/stories/ResizeableChart.stories.tsx new file mode 100644 index 0000000000..36cc4baca5 --- /dev/null +++ b/packages/polaris-viz/src/components/LineChart/stories/ResizeableChart.stories.tsx @@ -0,0 +1,27 @@ +export {META as default} from './meta'; + +import {LineChart, LineChartProps} from '../../../components'; +import type {Story} from '@storybook/react'; +import {DEFAULT_DATA, DEFAULT_PROPS} from './data'; + +export const ResizeableChart: Story = ( + args: LineChartProps, +) => { + return ( +
+ +
+ ); +}; + +ResizeableChart.args = { + ...DEFAULT_PROPS, + data: DEFAULT_DATA, +};