Support configuring the chart column colors#12292
Merged
lukasmasuch merged 14 commits intodevelopfrom Sep 17, 2025
Merged
Conversation
Contributor
🎉 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) |
Contributor
✅ PR preview is ready!
|
lukasmasuch
changed the title
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
lukasmasuch
changed the title
lukasmasuch
added
security-assessment-completed
change:feature
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds support for configuring chart column colors in LineChartColumn, AreaChartColumn, and BarChartColumn components. The enhancement allows users to specify custom colors, theme colors, or automatic color selection based on data trends.
Key Changes
- Added
colorparameter to chart column configuration functions in Python backend - Implemented color mapping and trend-based coloring logic in TypeScript frontend
- Added comprehensive unit and E2E tests for the new color functionality
Reviewed Changes
Copilot reviewed 5 out of 32 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| lib/streamlit/elements/lib/column_types.py | Adds ChartColor type alias and color parameters to chart column configurations |
| frontend/lib/src/components/widgets/DataFrame/columns/ChartColumn.ts | Implements color mapping, theme integration, and trend-based coloring logic |
| frontend/lib/src/components/widgets/DataFrame/columns/ChartColumn.test.ts | Adds unit tests for color functionality including theme mapping and auto coloring |
| e2e_playwright/st_dataframe_config_test.py | Updates test indices and adds chart colors test coverage |
| e2e_playwright/st_dataframe_config.py | Adds E2E test cases demonstrating various color configurations |
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
sfc-gh-bnisco
approved these changes
Sep 17, 2025
frontend/lib/src/components/widgets/DataFrame/columns/ChartColumn.ts
Outdated
Show resolved
Hide resolved
Comment on lines
+1150
to
+1160
| color: "auto", "auto-inverse", or str or None | ||
| The color to use for the chart. Can be one of the following: | ||
|
|
||
| - ``None`` (default): The primary color will be used. | ||
| - ``"auto"``: To color the chart green if the data is increasing, and | ||
| red if the data is decreasing. | ||
| - ``"auto-inverse"``: To color the chart red if the data is increasing, and | ||
| green if the data is decreasing. | ||
| - A single color value that is applied to all charts in the column. This supports either | ||
| a hex code, e.g. ``"#000000"``, or one of the following supported theme colors: | ||
| blue, green, orange, red, violet, yellow, gray/grey, or primary. |
Collaborator
There was a problem hiding this comment.
suggestion (non-blocking): Consider adding validation for this argument for better DX.
Collaborator
Author
There was a problem hiding this comment.
Added validation 👍
frontend/lib/src/components/widgets/DataFrame/columns/ChartColumn.test.ts
Show resolved
Hide resolved
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
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.
Describe your changes
Adds support for configuring the colors of charts in
LineChartColumn,AreaChartColumn,BarChartColumn.GitHub Issue Link (if applicable)
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.