Render Header level interactive charts for dataframes

Varun_Kalyan · August 10, 2023, 10:09am

Hey lit fam,

I’ve been working on kaggle for a while and wondered how can we acheive the header level charts in streamlit.
The charts take aggregate of the corresponding column data and renders/picks suitable charts depending on the datatype.
Then the charts glides over the dataframe.
Refer screenshots below.

Also came across a similar functionality on akkio.com

would love a feature/component/workaround for this!

blackary · August 10, 2023, 1:40pm

I think this would be an excellent component, but I don’t know of one currently. I would love to know if something like this already exists.

In the meantime, you can create something vaguely like this manually, like this:

Varun_Kalyan · August 11, 2023, 8:19am

Hello @blackary ,
Could you think of the way to make the charts scrollable. Say my df has 16 columns?
Then the graphs become all clumsy.
Thanks, this approach of yours helped.
Let me know if you have any more tips to build on top of this.

blackary · August 11, 2023, 2:41pm

I think this is possible with CSS, but I haven’t been able to figure out a great way to do it yet without making the whole page extra wide. This is a relevant issue that you could and comment on it you would like. Perhaps someone else can suggest a solution.

github.com/streamlit/streamlit

Enable horizonal scrolling for wide columns (e.g. with charts)

opened 09:41PM - 03 Nov 20 UTC

inspectorG4dget

type:enhancement area:layout feature:st.columns

_(Note, you don't have to fill out every section here. They're just here for gui…dance. That said, nicely detailed feature requests are more likely to get eng attention sooner)_ ### Problem When I call `st.dataframe(df)` on a dataframe that has too many columns to fit into the width of the page, the `st.dataframe` container allows me to scroll sideways to see the other columns. However, when I attempt to display multiple graphs side-by-side using `st.columns`, the graphs in the columns get cut by the vertical edges of the column space. Is there a way to allow the columns to scroll horizontally to solve this problem? ### Solution **MVP:** What's the smallest possible solution that would get 80% of the problem out of the way? Either of the following two options would work: 1. Allow unsafe style injection in `st.columns` via (say) `**kwargs`. This way, I could inject `style="overflow-x:scroll"` with minimal code change in streamlit infra. 2. Allow unsafe javascript execution after the page has loaded (this will probably make a ton of other people happy, too) **Possible additions:** What are other things that could be added to the MVP over time to make it better? **Preferred solution:** If you don't like the MVP above, tell us why, and what you'd like done instead. ### Additional context Add any other context or screenshots about the feature request here. For example, did this FR come from https://discuss.streamlit.io or another site? Link the original source here! https://discuss.streamlit.io/t/is-there-a-way-to-horizontally-scroll-containers/6737 --- Community voting on feature requests enables the Streamlit team to understand which features are most important to our users. **If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.**