alt.Chart height is being removed

m.bennet · October 18, 2019, 2:18am

Very likely I could me missing something here, but how do I change/increase the height of an Altair plot in Streamlit. I can set the width and height properties for my alt.Chart but once in Streamlit only the width is implemented.

I notice in st.altair_chart there is a width but not height argument. Just wondering why this is?

wotaskd · October 18, 2019, 11:30pm

Having the exact same issue here. I have a bar chart with the values all squeezed and seem to be unable to force it to use the height value I pass.

Ideas/workarounds?

Adrien_Treuille · October 19, 2019, 6:36am

Hi @wotaskd and @m.bennet! Welcome to the community!

Have you tried setting the height directly in the alt.Chart constructor like this:

github.com

streamlit/demo-self-driving/blob/baf734e6f2ecb7082e41f75c69f84749f6b13725/app.py#L156


min_elts, max_elts = st.sidebar.slider("How many %ss (select a range)?" % object_type, 0, 25, [10, 20])
selected_frames = get_selected_frames(summary, object_type, min_elts, max_elts)
if len(selected_frames) < 1:
    return None, None


# Choose a frame out of the selected frames.
selected_frame_index = st.sidebar.slider("Choose a frame (index)", 0, len(selected_frames) - 1, 0)


# Draw an altair chart in the sidebar with information on the frame.
objects_per_frame = summary.loc[selected_frames, object_type].reset_index(drop=True).reset_index()
chart = alt.Chart(objects_per_frame, height=120).mark_area().encode(
    alt.X("index:Q", scale=alt.Scale(nice=False)),
    alt.Y("%s:Q" % object_type))
selected_frame_df = pd.DataFrame({"selected_frame": [selected_frame_index]})
vline = alt.Chart(selected_frame_df).mark_rule(color="red").encode(
    alt.X("selected_frame:Q", axis=None)
)
st.sidebar.altair_chart(alt.layer(chart, vline))


selected_frame = selected_frames[selected_frame_index]
return selected_frame_index, selected_frame

That worked for me!

m.bennet · October 20, 2019, 10:54pm

Thanks @Adrien_Treuille! I had put the height argument in the alt.Chart definition. Playing around I’ve worked out that passing st.altair_chart(alt.layer(chart)) rather than st.altair_chart(chart) makes the difference

Thanks for creating a great tool!!

wotaskd · October 29, 2019, 2:05pm

I actually have tried setting the height directly in the constructor but the tip above made it work. Thanks, @m.bennet!

Topic		Replies	Views
Something not working with Altair chart height past v0.47.4? Using Streamlit altair	7	2622	November 19, 2021
Altair plot height Using Streamlit altair	3	2869	November 19, 2021
Altair stacked bar graph width problem Using Streamlit windows , altair	9	2099	February 5, 2024
Altair figure height can't fit properly within the column Using Streamlit	2	564	February 10, 2024
How can I tell altair to use the full height of the container it is in? Using Streamlit altair	3	1544	May 13, 2023

alt.Chart height is being removed

Related topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies