diff --git a/app/charts/column/columns-grouped.tsx b/app/charts/column/columns-grouped.tsx index 99ad4e0b9..a3b87609d 100644 --- a/app/charts/column/columns-grouped.tsx +++ b/app/charts/column/columns-grouped.tsx @@ -101,7 +101,7 @@ export const ColumnsGrouped = () => { const ref = useRef(null); const enableTransition = useTransitionStore((state) => state.enable); const transitionDuration = useTransitionStore((state) => state.duration); - const { margins } = bounds; + const { margins, height } = bounds; const bandwidth = xScaleIn.bandwidth(); const y0 = yScale(0); const renderData: RenderColumnDatum[] = useMemo(() => { @@ -121,6 +121,7 @@ export const ColumnsGrouped = () => { }; }); }); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [ colors, getSegment, @@ -132,6 +133,7 @@ export const ColumnsGrouped = () => { yScale, y0, getRenderingKey, + height, ]); useEffect(() => { diff --git a/app/charts/column/columns-stacked.tsx b/app/charts/column/columns-stacked.tsx index a76d877bd..ffd0e5e9d 100644 --- a/app/charts/column/columns-stacked.tsx +++ b/app/charts/column/columns-stacked.tsx @@ -15,7 +15,7 @@ export const ColumnsStacked = () => { const transitionDuration = useTransitionStore((state) => state.duration); const { bounds, getX, xScale, yScale, colors, series, getRenderingKey } = useChartState() as StackedColumnsState; - const { margins } = bounds; + const { margins, height } = bounds; const bandwidth = xScale.bandwidth(); const y0 = yScale(0); const renderData: RenderColumnDatum[] = useMemo(() => { @@ -35,7 +35,18 @@ export const ColumnsStacked = () => { }; }); }); - }, [bandwidth, colors, getX, series, xScale, yScale, getRenderingKey]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ + bandwidth, + colors, + getX, + series, + xScale, + yScale, + getRenderingKey, + // Need to reset the yRange on height change + height, + ]); useEffect(() => { if (ref.current) {