Solara•4mo ago

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"), 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)

1 Reply

Jochem Smit•4mo ago

i've managed to do it by changing vegalite.vue

<template>
    <div>
        <div ref="plotElement" class="vegaplot"></div>
    </div>
</template>
<script>

<template>
    <div>
        <div ref="plotElement" class="vegaplot"></div>
    </div>
</template>
<script>

and then add css:

.vegaplot {
    width: 80%;
}

.vegaplot {
    width: 80%;
}

the width is the width of the axes so you need some buffer for labels/legends @MaartenBreddels perhaps the VegaLite class can take a classes argument? ok i found that there is already the vega-embed css class 🙂

.vega-embed {
    overflow: visible;
    width: 80%;
}

.vega-embed {
    overflow: visible;
    width: 80%;
}

Gaming

Programming

Altair expand width to available horizontal space