Only clamp responsive height when the container height is independent of the canvas#12277
Open
kirthi-b wants to merge 1 commit into
Open
Only clamp responsive height when the container height is independent of the canvas#12277kirthi-b wants to merge 1 commit into
kirthi-b wants to merge 1 commit into
Conversation
…the canvas Since chartjs#10646, getMaximumSize clamps the computed height to the container height when maintainAspectRatio is true. When the container has no explicit height, its height is derived from the canvas itself, so the chart's current height becomes a ceiling: the chart can shrink but can never grow back. Measure the container with the canvas removed from the layout and only apply the clamp when the container height does not collapse, i.e. when it is defined independently of the canvas. Containers with an explicit height keep the documented v4 fit-within behavior. Fixes chartjs#11005
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #11005.
The clamp at the end of getMaximumSize (the maintainHeight block in src/helpers/helpers.dom.ts) treats the container's current height as a constraint even when that height is just the canvas's own height, for example a plain wrapper div with no explicit height. On grow, the proposed height (newWidth / aspectRatio) always exceeds it, so getMaximumSize returns exactly the old size and the resize is a no-op. onResize never fires because nothing changed. On shrink the clamp passes and the wrapper's height ratchets down with the chart. A one way ratchet: shrink works, grow never does.
For the record, the clamp came from #10646 (commit 0c51ecd, documented in the v4 migration guide as "maintainAspectRatio respects container height"). Commit 52cf8e8 (#10693), which this thread bisected to, only narrowed it.
Measured with a Playwright harness driving a container 600 to 300 to 900 wide, chart at responsive true and default maintainAspectRatio, on 4.5.1:
On 3.9.1 all four cases return to 900x450.
The fix keeps the #10646 behavior for containers with a real height and removes the ratchet: before clamping, measure the container with the canvas taken out of flow (display none, restored synchronously, nothing paints), and only clamp if the container height holds up on its own. The extra layout read happens only on the throttled resize path and only when the clamp would otherwise apply.
With the patch: plain div and flex cases grow back to 900x450, the explicit height case still clamps to 400x200, and the helpers.dom (24), platform.dom (21) and core.controller (85) suites pass, including the tests added by #10646 and #10693. Two regression tests added for the grow case and the display style restoration.