I need multiple vertically stacked charts to change width as browser changes its window width. But with altair charts, width of vconcat-ed charts is not handled well.
I’m using streamlit 0.71.0, and just upgraded to 0.72.0.
Using this example vertical-concatenation
, slightly change it and without explicitly setting witdh property and setting use_container_width=True, the width is fixed and does not change as browser window width.
When I do the same when showing only single chart or showing two charts layered, width changes when I run the app in wide-mode. But in centered-mode, the width stays unchanged even if I change browser window width.
I tried using autoSizeParams like this but no luck and the result is the same.
autosize = alt.AutoSizeParams(contains="content", resize=True, type='fit-x')
There has been PR684 from a year ago and it seems the code has been merged.
The code I’m using to show vconcat-ed charts is following. What am I missing?
Thanks in advance.
indent preformatted text by 4 spaces import streamlit as st import altair as alt from vega_datasets import data source = data.sp500.url brush = alt.selection(type='interval', encodings=['x']) base = alt.Chart(source).mark_area().encode( x = 'date:T', y = 'price:Q' ).properties( height=200 ) upper = base.encode( alt.X('date:T', scale=alt.Scale(domain=brush)) ) lower = base.properties( height=60 ).add_selection(brush) autosize = alt.AutoSizeParams(contains="content", resize=True, type='fit-x') c = alt.vconcat(upper, lower, autosize=autosize) st.altair_chart(c, use_container_width=True)