fix: optimises initial chart rendering when using bottom legend#223
Merged
pan-kot merged 1 commit intoMay 11, 2026
Merged
Conversation
ryugaraj
changed the title
ryugaraj
changed the title
pan-kot
reviewed
May 11, 2026
pan-kot
reviewed
May 11, 2026
| expect(wrapper.findByClassName(testClasses["chart-plot-wrapper"])!.getElement().style.minInlineSize).toBe("333px"); | ||
| }); | ||
|
|
||
| test("hides chart plot wrapper while waiting for footer measurement with fitHeight and bottom legend", async () => { |
Member
There was a problem hiding this comment.
Would it be possible to test this on the chart container instead by checking for the presence of the visibility: hidden style? Then the test would ensure the function does not just work correctly, but is also correctly integrated with the component.
Contributor
Author
There was a problem hiding this comment.
Yeah, updating the tests.
ryugaraj
force-pushed
the
fix/fit-height-bottom-legend-visibility
branch
2 times, most recently
from
06beb34 to
530a3d0
Compare
pan-kot
reviewed
May 11, 2026
pan-kot
reviewed
May 11, 2026
When fitHeight is enabled with a bottom legend, the chart height depends on the footer measurement. Without this fix, the chart briefly renders at full container height then visibly shrinks once the legend is measured, causing a layout shift. The chart-plot-wrapper is now hidden with visibility:hidden until the footer measurement completes.
ryugaraj
force-pushed
the
fix/fit-height-bottom-legend-visibility
branch
from
530a3d0 to
76eee22
Compare
pan-kot
approved these changes
May 11, 2026
Merged
via the queue into
cloudscape-design:main
with commit May 11, 2026
40086fb
42 of 44 checks passed
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
2 participants
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.
When fitHeight is enabled with a bottom legend, the chart must wait for the footer measurement before computing the correct height. Previously the chart would render at full height then visibly shrink once the legend measured in. Now the chart-plot-wrapper is hidden with visibility:hidden until the footer measurement completes.
Also adds a unit test for getChartPlotWrapperStyles and updates the many-series dev page to use fitHeight for easier reproduction.
Description
Fixes a rendering issue where the chart would display with incorrect height
when fitHeight is enabled with a bottom legend position. The chart now
remains hidden (via CSS visibility) until the footer measurements complete,
preventing visual glitches during the measurement phase.
How has this been tested?
Tested with page 01-cartesian-chart/many-series with CPU throttling between 6-20 times to see the legend used to cause the chart to resize but now it renders simultaneously.
Also added some basic unit test to help identify breaking changes in future.
Before
Screen.Recording.2026-05-11.at.12.52.35.mov
After
Screen.Recording.2026-05-11.at.12.52.03.mov
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.