Something not working with Altair chart height past v0.47.4?

[gtancev]

I just deployed my first streamlit app on Heroku (http://ml-ml.herokuapp.com/).
However, I realized that something is not working with the height of the altair charts? They appear very small, and the height command does not work.
I had to downgrade to version 0.47.4 to make it work.

[Yasha]

I’ve noticed this too. If you need another workaround I’ve discovered that by layering or vertically/horizontally joining altair charts together you can get it to correctly set the height.

For example if you have

chart = alt.Chart(df)…

you can use

st.altair_chart(chart + chart)

to get it to set the height correctly. However, it will slow down any interactions you have in your chart since it’s now doubled what is being displayed.

[thiago]

Hey, thanks for letting us know. I’ve tacked this info onto this bug:

height arg is broken in st.dataframe

[monchier]

I filed a new bug report to track this specific issue: https://github.com/streamlit/streamlit/issues/542

[monchier]

@gtancev, @Yasha, can you give me a little bit more detailed repro instructions. I am trying to repro the problem with:

import streamlit as st
import numpy as np
import pandas as pd
import altair as alt

df = pd.DataFrame(np.random.randn(200, 3), columns=["a", "b", "c"])

c = alt.Chart(df).mark_circle().encode(x="a", y="b", size="c", color="c")

st.altair_chart(c)

But the chart displays correctly. On streamlit 0.49.0. Attaching the output of the script.

The height parameter is not supported for the altair_chart, but the width parameter is. We do show a “wide” aspect ratio. Let me know if that is part of the problem.

Best,
Matteo

[Yasha]

I’m not sure what you mean by the “height” parameter is not supported? Try modifying your code to the following:

import streamlit as st
import numpy as np
import pandas as pd
import altair as alt

df = pd.DataFrame(np.random.randn(200, 3), columns=["a", "b", "c"])

c = alt.Chart(df).mark_circle().properties(
    width = 500,
    height = 500,
).encode(
    x="a",
    y="b",
    size=alt.Size("c",legend=None),
    color=alt.Color("c",legend=None),
)

st.altair_chart(c)

st.altair_chart(c+c)

You’ll see that the height and width of the chart are nowhere close to equal in the first image, but they are equal in the second (as they should be for both images).

I was originally using streamlit version 0.48.1, but I just updated it to 0.49.0 and it still displays the same (incorrect) way.

Here is what it looks like for me:

[monchier]

Got it. I think it is on purpose on our side. We do pick that aspect ratio. You can customize the width of the chart override this by doing:

st.altair_chart(c, width=-1)

But this will keep the “small” height resulting in overall a small square. I am filing an issue on this and keep you posted on the progress.

Thanks for the detailed code and your explanation, it is hugely useful.

Best,
Matteo