[fix] Assign st.line_chart colors by assigned order, not alphabetically #12092
Conversation
🎉 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) |
✅ PR preview is ready!
|
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a bug where st.line_chart colors were assigned alphabetically rather than in the order specified by the user. The fix ensures that when multiple y-columns are provided with custom colors, the color mapping respects the user-specified column order.
Key changes:
- Added explicit domain parameter to Vega-Lite color scale specification
- Added e2e test to verify column order preservation with colors
Reviewed Changes
Copilot reviewed 3 out of 9 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| lib/streamlit/elements/lib/built_in_chart_utils.py | Added domain parameter to color scale to preserve user-specified column order |
| e2e_playwright/st_line_chart.py | Added test case with non-alphabetical column names and explicit colors |
| e2e_playwright/st_line_chart_test.py | Added e2e test to verify column order is preserved when using y and color parameters |
Comments suppressed due to low confidence (1)
e2e_playwright/st_line_chart_test.py:132
- The hover action appears to be intended to trigger a tooltip for verification, but the test doesn't actually verify the tooltip content or check that the column order is correct. Consider adding assertions to verify the tooltip shows the expected column names in the correct order, or remove the hover if it's not needed for the snapshot test.
chart_canvas.hover(position={"x": 50, "y": 100}, force=True)
There was a problem hiding this comment.
Something seems wrong with these snapshots :( They got cut off on the top ... not sure what happened here. But its consistent across the browsers, so might be related to how vega lite is processing the domain value
There was a problem hiding this comment.
Ah that's a good point, I didn't notice that. I wonder what's going on there. I'll debug.
There was a problem hiding this comment.
Going to try swapping the order of the tests as the issue seen in the snapshot does not repro locally in that test.
There was a problem hiding this comment.
Yeah that fixed it
There was a problem hiding this comment.
Then it's probably the header bar overlaying the chart
There was a problem hiding this comment.
That makes sense
Describe your changes
The issue occurs because the color scale in the Vega-Lite specification lacks an explicit domain parameter. When we generate a color scale with multiple colors for multiple y columns, it should include domain: ['c_one', 'b_two', 'a_three'] to ensure the colors are mapped in the user-specified order rather than alphabetically.
GitHub Issue Link (if applicable)
Fixes #12071
Testing Plan
Added e2e tests with snaps
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.