How should I use use_container_width with vconcat-ed charts?

Using Streamlit
#1

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? :cry:
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)
1 Like