Altair expand width to available horizontal space

I'm trying to get my altair chart to expand to the available width.

data = pd.DataFrame({"x": range(10), "y": [i**2 for i in range(10)]})
chart = alt.Chart(data).mark_line().encode(x="x:Q", y="y:Q")

with solara.Card("Title"):
    solara.FigureAltair(chart)

data = pd.DataFrame({"x": range(10), "y": [i**2 for i in range(10)]})
chart = alt.Chart(data).mark_line().encode(x="x:Q", y="y:Q")

with solara.Card("Title"):
    solara.FigureAltair(chart)

Gives a fixed width chart taking up about half the available space

With

.properties(width="container")

.properties(width="container")

, which according to altair docs should make the figure expand to the available width, the figure is reduced to zero width.

data = pd.DataFrame({"x": range(10), "y": [i**2 for i in range(10)]})
chart = alt.Chart(data).mark_line().encode(x="x:Q", y="y:Q").properties(width="container")

with solara.Card("Title"):
    solara.FigureAltair(chart)

data = pd.DataFrame({"x": range(10), "y": [i**2 for i in range(10)]})
chart = alt.Chart(data).mark_line().encode(x="x:Q", y="y:Q").properties(width="container")

with solara.Card("Title"):
    solara.FigureAltair(chart)

Solara•3y ago•

4 replies

Jochem Smit

Altair expand width to available horizontal space

I'm trying to get my altair chart to expand to the available width.

data = pd.DataFrame({"x": range(10), "y": [i**2 for i in range(10)]})
chart = alt.Chart(data).mark_line().encode(x="x:Q", y="y:Q")

with solara.Card("Title"):
    solara.FigureAltair(chart)

data = pd.DataFrame({"x": range(10), "y": [i**2 for i in range(10)]})
chart = alt.Chart(data).mark_line().encode(x="x:Q", y="y:Q")

with solara.Card("Title"):
    solara.FigureAltair(chart)

Gives a fixed width chart taking up about half the available space

With

.properties(width="container")

.properties(width="container")

, which according to altair docs should make the figure expand to the available width, the figure is reduced to zero width.

data = pd.DataFrame({"x": range(10), "y": [i**2 for i in range(10)]})
chart = alt.Chart(data).mark_line().encode(x="x:Q", y="y:Q").properties(width="container")

with solara.Card("Title"):
    solara.FigureAltair(chart)

data = pd.DataFrame({"x": range(10), "y": [i**2 for i in range(10)]})
chart = alt.Chart(data).mark_line().encode(x="x:Q", y="y:Q").properties(width="container")

with solara.Card("Title"):
    solara.FigureAltair(chart)

Altair expand width to available horizontal space

Similar Threads

Altair expand width to available horizontal space

Similar Threads

Similar Threads

Similar Threads