Altair grouped bar chart has incorrect size

[fran-penedo]

Describe the bug

When I try to plot an Altair bar chart using the column property in the encoding, marimo displays a chart where each column seems to be the full size of the container:

The example code was extracted from the Altair documentation: https://altair-viz.github.io/gallery/grouped_bar_chart.html.

Will you submit a PR?

• Yes

Environment

{
  "marimo": "0.17.0",
  "editable": false,
  "location": "/home/fran/.cache/uv/archive-v0/C3j96rMYcRABj32SQWhtN/lib/python3.13/site-packages/marimo",
  "OS": "Linux",
  "OS Version": "6.17.2-arch1-1",
  "Processor": "",
  "Python Version": "3.13.7",
  "Locale": "en_US",
  "Binaries": {
    "Browser": "--",
    "Node": "v22.19.0"
  },
  "Dependencies": {
    "click": "8.2.1",
    "docutils": "0.21.2",
    "itsdangerous": "2.2.0",
    "jedi": "0.19.2",
    "markdown": "3.9",
    "narwhals": "2.9.0",
    "packaging": "25.0",
    "psutil": "7.1.0",
    "pygments": "2.19.2",
    "pymdown-extensions": "10.16.1",
    "pyyaml": "6.0.3",
    "starlette": "0.48.0",
    "tomlkit": "0.13.3",
    "typing-extensions": "4.15.0",
    "uvicorn": "0.38.0",
    "websockets": "15.0.1"
  },
  "Optional Dependencies": {
    "altair": "5.5.0",
    "duckdb": "1.4.1",
    "nbformat": "5.10.4",
    "openai": "2.6.0",
    "pandas": "2.3.3",
    "polars": "1.34.0",
    "pyarrow": "21.0.0",
    "loro": "1.8.1",
    "pytest": "8.4.2",
    "ruff": "0.14.1",
    "sqlglot": "27.28.1"
  },
  "Experimental Flags": {}
}

Code to reproduce

# /// script
# requires-python = ">=3.13"
# dependencies = [
#     "altair==5.5.0",
#     "marimo",
#     "vega-datasets==0.9.0",
# ]
# ///

import marimo

__generated_with = "0.17.0"
app = marimo.App(width="medium")


@app.cell
def _():
    import altair as alt
    from vega_datasets import data

    source = data.barley()
    alt.Chart(source).mark_bar().encode(
        x="year:O",
        y="sum(yield):Q",
        color="year:N",
        column="site:N",
    )
    return


if __name__ == "__main__":
    app.run()

[mscolnick]

we change the defaults for .properties(width= to work well in most cases. but you can unset this if you'd like. width=300 is the original default.

    alt.Chart(source).mark_bar().encode(
        x="year:O",
        y="sum(yield):Q",
        color="year:N",
        column="site:N",
    ).properties(width=300)

Let us know if you have any issues. Happy to keep the discussion going

[fran-penedo]

My apologies, I should have mentioned that I'd already tried to manually set the width to no effect. I tried wrapping the chart with mo.ui.altair_chart as well, also to no effect. Other data sources exhibit the same behavior.

[mscolnick]

@fran-penedo. this does work for me, but i think we can do something additional to avoid setting the width full when column is set

import altair as alt
from vega_datasets import data

source = data.barley()
c = alt.Chart(source).mark_bar().encode(
    x="year:O",
    y="sum(yield):Q",
    color="year:N",
    column="site:N",
).properties(width=100, height=200)