[AdvancedLayouts] Adds a width parameters to `st.line_chart`. by sfc-gh-lwilby · Pull Request #11923 · streamlit/streamlit

sfc-gh-lwilby · 2025-07-13T10:41:43Z

Describe your changes

This PR is part of the [AdvancedLayouts] project and introduces a new width parameter to the chart elements.

This PR also begins the process of deprecating use_container_width. The default is updated to None, and width will be used instead. If the user explicitly passes a value for use_container_width then that will take precedence. use_container_width=True is equivalent to width="stretch" and use_container_width=False is equivalent to width="content". The user will be given a warning and suggestion to use width instead. We will remove use_container_width after 12-31-2025`.

GitHub Issue Link (if applicable)

#8197

Testing Plan

Unit Tests (JS and/or Python) ✅
E2E Tests ✅

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

snyk-io · 2025-07-13T10:41:52Z

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

github-actions · 2025-07-13T11:48:13Z

✅ PR preview is ready!

Name	Link
📦 Wheel file	https://core-previews.s3-us-west-2.amazonaws.com/pr-11923/streamlit-1.48.1-py3-none-any.whl
🕹️ Preview app	pr-11923.streamlit.app (☁️ Deploy here if not accessible)

Copilot

Pull Request Overview

This PR introduces width and height parameters to the st.line_chart function as part of the AdvancedLayouts project. The change begins the deprecation of use_container_width in favor of the new width parameter, with a mapping that treats use_container_width=True as equivalent to width="stretch" and use_container_width=False as equivalent to width="content".

Key changes:

Adds new width and height parameters to st.line_chart with support for "stretch", "content", and integer values
Deprecates use_container_width parameter with warnings and migration guidance
Updates frontend components to handle new width/height configuration through layout config

Reviewed Changes

Copilot reviewed 14 out of 29 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
lib/streamlit/elements/vega_charts.py	Adds width/height parameters to line_chart function, implements use_container_width deprecation with validation
lib/tests/streamlit/elements/vega_charts_test.py	Adds comprehensive test coverage for new width/height parameters and deprecation behavior
frontend/lib/src/components/elements/ArrowVegaLiteChart/.	Updates Vega chart components to handle new layout configuration system
frontend/lib/src/components/shared/Toolbar/styled-components.ts	Updates toolbar styling to support string height values
frontend/lib/src/components/shared/FullScreenWrapper/styled-components.tsx	Ensures full screen wrapper has 100% height
frontend/lib/src/components/core/Block/StyledElementContainerLayoutWrapper.tsx	Adds layout handling for new width configuration in Vega charts
e2e_playwright/st_line_chart*.py	Adds E2E tests for new width/height functionality and visual regression testing
e2e_playwright/st_layouts_container_min_width*.py	Tests width behavior in horizontal container layouts

lib/streamlit/elements/vega_charts.py

e2e_playwright/st_altair_chart_test.py

lib/tests/streamlit/elements/vega_charts_test.py

frontend/lib/src/components/shared/FullScreenWrapper/styled-components.tsx

lib/tests/streamlit/elements/vega_charts_test.py

frontend/lib/src/components/core/Block/StyledElementContainerLayoutWrapper.tsx

lukasmasuch · 2025-08-20T14:47:57Z

..._layouts_container_min_width-line-charts_reduced[chromium-layout-horizontal-line-charts].png

This screenshot looks of. Is this intended, e.g. why is there such a big top padding? and most of the charts seem to be cut-off

I think this is just a limitation of the screenshots, it can't fit all of the charts. It looks normal when the app is run locally. I was debating leaving out this snapshot for this one and just doing the regular screen width. Maybe I will check if I can also control the height.

...s_elements_test/st_layouts_container_various_elements-layout-dashboard-example[chromium].png

lukasmasuch · 2025-08-20T16:44:53Z

lib/streamlit/elements/vega_charts.py

+            width = "stretch" if use_container_width else "content"
+
+        validate_width(width, allow_content=True)
+        validate_height(height, allow_content=True)


Could all this logic be moved into some kind of shared validation method or into generate_chart or self._altair_chart? Otherwise, it needs to be replicated for all our built-in commands, even though they are almost the same.

I think only _vega_lite_chart should probably do all validation for built-in charts, altair, and vega_lite_chart. Maybe its even better to first add width & height to altair_chart and vega_lite_chart and after that to built-in charts. Since built-in charts are build on top of altair -> vega_lite_chart

That makes sense, since I have this one ready now, I think it would be OK to do altair_chart and vega_lite_chart next and move this logic as part of that?

Originally I was going to do one PR for all, but it was feeling too large and I wanted to break it up and test each chart type individually. Line charts seemed like the easier ones, whereas vega_lite and altair have more potential issues since there are many types of charts and known issues with the facet charts so that's why I started with this one.

I think that's fine, but probably makes sense to put the focus next on altair_chart & vega_lite_chart before touching any of the other built-in charts. Also, since all of these charts are using the exact same frontend implementation, it might be a bit too much overhead to add these comprehensive e2e tests for all these chart commands. E.g, it's probably fine to just have one vega chart command tested in the st_layouts_container test.

Yeah, the min width ones I was not planning on adding for all chart types. But we may not want snapshot tests for the width for all chart types either. Probably some more coverage for the facet charts with fixed width since that is new.

lib/tests/streamlit/elements/vega_charts_test.py

lib/streamlit/elements/vega_charts.py

frontend/lib/src/components/elements/ArrowVegaLiteChart/useVegaElementPreprocessor.ts

e2e_playwright/st_line_chart_test.py

lukasmasuch · 2025-08-25T22:33:50Z

frontend/lib/src/components/elements/ArrowVegaLiteChart/useVegaElementPreprocessor.ts

-    if ("vconcat" in spec) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO: Replace 'any' with a more specific type.
-      spec.vconcat.forEach((child: any) => {
-        child.width = width
-      })
-    }


Is this not required anymore for concat charts? The below part is only activated when useContainerWidth, do vconcat charts still work fine if a specific pixel width is set?

So, there shouldn't be any change in this PR for vconcat charts because we default them to use_container_width in the backend. This is an assumption on my part that these are only st.vegalite_chart or st.altair_chart charts, not the convenience charts like area etc. Let me know if you think this is wrong ... it seems based on the docstrings this is the case.

Additionally, for fixed pixel charts useContainerWidth will be true here, but the logic is checking the new pixel width param so only for line charts so far.

When I get to altair_chart and vegalite_chart with pixel width I will have to test how it works with that since it will be a new feature.

ok, got it. So this was only used for isFullScreen below which is covered by the useContainerWidth below

I looked at this again and what I wrote above is not quite the right answer. This covers the same scenarios because previously we did this vconcat logic for useContainerWidth and isFullScreen, and now both of those are covered by useContainerWidth and useContainerHeight. Determining these including checking isFullScreen is done in ArrowVegaLiteChart now. I had to refactor this logic so it would cover stretching the height as well as the width now that we have height="stretch".

lukasmasuch

LGTM 👍

sfc-gh-lwilby force-pushed the feature/add-width-to-vega-charts branch from 0468898 to fc51e5b Compare July 13, 2025 11:47

sfc-gh-lwilby force-pushed the feature/add-width-to-vega-charts branch 2 times, most recently from eb252fd to 8235550 Compare August 18, 2025 10:06

sfc-gh-lwilby changed the title ~~[WIP][AdvancedLayouts] Adds a width parameters to vega lite charts.~~ [WIP][AdvancedLayouts] Adds a width parameters to st.line_chart. Aug 18, 2025

sfc-gh-lwilby added security-assessment-completed change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Aug 18, 2025

sfc-gh-lwilby requested a review from Copilot August 19, 2025 14:50

Copilot AI reviewed Aug 19, 2025

View reviewed changes

lib/streamlit/elements/vega_charts.py Outdated Show resolved Hide resolved

lib/streamlit/elements/vega_charts.py Show resolved Hide resolved

lib/streamlit/elements/vega_charts.py Show resolved Hide resolved

sfc-gh-lwilby marked this pull request as ready for review August 19, 2025 18:55

sfc-gh-lwilby changed the title ~~[WIP][AdvancedLayouts] Adds a width parameters to st.line_chart.~~ [AdvancedLayouts] Adds a width parameters to st.line_chart. Aug 19, 2025

lukasmasuch reviewed Aug 20, 2025

View reviewed changes

graphite-app bot reviewed Aug 22, 2025

View reviewed changes

lib/tests/streamlit/elements/vega_charts_test.py Outdated Show resolved Hide resolved

sfc-gh-lwilby added 14 commits August 22, 2025 10:16

WIP initial changes

6aba14f

deprectation message

1e69af0

adjust height for flicker

27395bd

tests for line chart

0a80169

rename to chart container

3ea2c49

do only line_chart to start

cad3665

add unit tests

1aa927b

fullscreen and stretch height/content width

d56c79e

show data with content width charts and fixed width/height

2c75e1e

fix failures

e6d477c

updating vega processing tests

23071f7

add snapshots

2dd1ed8

fix python type error

c9d984e

other snapshot updates

0623daa

sfc-gh-lwilby added 6 commits August 22, 2025 10:16

fix e2e tests

c853eea

add snapshots

4ba347f

stabalize tests

721b675

update test warning

a4d3f66

revert styled-components and adjust for only line charts new height

f9cf8a0

Revert all snapshot changes to develop branch versions

5dfc9b5

sfc-gh-lwilby force-pushed the feature/add-width-to-vega-charts branch from db72831 to 5dfc9b5 Compare August 22, 2025 17:16

update snapshots

75e43b4

graphite-app bot reviewed Aug 22, 2025

View reviewed changes

lib/streamlit/elements/vega_charts.py Outdated Show resolved Hide resolved

sfc-gh-lwilby added 3 commits August 22, 2025 14:30

shouldHeightStretch function

7bfd046

missed rename

5b3c391

use_container_width_for_chart consistency

f875a10

graphite-app bot reviewed Aug 22, 2025

View reviewed changes

frontend/lib/src/components/elements/ArrowVegaLiteChart/useVegaElementPreprocessor.ts Show resolved Hide resolved

sfc-gh-lwilby added 2 commits August 25, 2025 12:16

use_container_width handling

8c6fa14

add rows styling preservation

8965b08

graphite-app bot reviewed Aug 25, 2025

View reviewed changes

e2e_playwright/st_line_chart_test.py Show resolved Hide resolved

lukasmasuch reviewed Aug 25, 2025

View reviewed changes

sfc-gh-lwilby added 2 commits August 26, 2025 11:39

update snapshots

056f9d7

more detail in comment

7119489

lukasmasuch approved these changes Aug 26, 2025

View reviewed changes

sfc-gh-lwilby merged commit 5757402 into develop Aug 27, 2025
37 of 39 checks passed

sfc-gh-lwilby deleted the feature/add-width-to-vega-charts branch August 27, 2025 21:45

Conversation

sfc-gh-lwilby commented Jul 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

GitHub Issue Link (if applicable)

Testing Plan

Uh oh!

snyk-io bot commented Jul 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎉 Snyk checks have passed. No issues have been found so far.

Uh oh!

github-actions bot commented Jul 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR preview is ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lukasmasuch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sfc-gh-lwilby commented Jul 13, 2025 •

edited

Loading

snyk-io bot commented Jul 13, 2025 •

edited

Loading

github-actions bot commented Jul 13, 2025 •

edited

Loading