marimo mo.hstack does not work with mo.ui.altair_chart

[rluthi]

Describe the bug

The marimo.hstack function works with normal altair charts, but not with the interactive marimo.ui.altair_chart.

Example:

# This works
mo.hstack([plot_1 , plot_2], justify='start')  # This works !

# This dose not :-(
mo.hstack([mo.ui.altair_chart(plot_1), mo.ui.altair_chart(plot_2)], justify='start')

Thanks for work on this amazing tool btw :-)

Environment

{
  "marimo": "0.13.0",
  "OS": "Linux",
  "OS Version": "5.15.167.4-microsoft-standard-WSL2",
  "Processor": "x86_64",
  "Python Version": "3.13.2",
  "Binaries": {
    "Browser": "--",
    "Node": "--"
  },
  "Dependencies": {
    "click": "8.1.8",
    "docutils": "0.21.2",
    "itsdangerous": "2.2.0",
    "jedi": "0.19.2",
    "markdown": "3.8",
    "narwhals": "1.35.0",
    "packaging": "24.2",
    "psutil": "7.0.0",
    "pygments": "2.19.1",
    "pymdown-extensions": "10.14.3",
    "pyyaml": "6.0.2",
    "starlette": "0.46.2",
    "tomlkit": "0.13.2",
    "typing-extensions": "4.13.0",
    "uvicorn": "0.34.1",
    "websockets": "15.0.1"
  },
  "Optional Dependencies": {
    "altair": "5.5.0",
    "duckdb": "1.2.1",
    "nbformat": "5.10.4",
    "openai": "1.70.0",
    "pandas": "2.2.3",
    "polars": "1.26.0",
    "pyarrow": "19.0.1",
    "pycrdt": "0.11.1",
    "ruff": "0.11.5",
    "sqlglot": "26.12.1"
  },
  "Experimental Flags": {}
}

Code to reproduce

# /// script
# requires-python = ">=3.13"
# dependencies = [
#     "altair==5.5.0",
#     "marimo",
#     "pandas==2.2.3",
#     "vega-datasets==0.9.0",
# ]
# ///
import altair as alt
import pandas as pd
import marimo as mo

from vega_datasets import data

source = data.cars()

plot_1 = alt.Chart(source).mark_point().encode(
  x='Horsepower',
  y='Miles_per_Gallon',
)

plot_2 = alt.Chart(source).mark_point().encode(
  x='Year',
  y='Horsepower',
)

mo.hstack([mo.ui.altair_chart(plot_1), mo.ui.altair_chart(plot_2)], justify='start')

# mo.hstack([plot_1 , plot_2], justify='start')  # This works !

[mscolnick]

mo.hstack([mo.ui.altair_chart(plot_1), mo.ui.altair_chart(plot_2)] does horizontally stack the charts (and wraps around to a new line). But since you don't specify a width, then the child chooses the width (in this case, the chart stretches 100% of its parent).

If you specify a width:

mo.hstack([mo.ui.altair_chart(plot_1), mo.ui.altair_chart(plot_2)], justify='start', widths="equal")

, then you get what you expect.

I am going to close this since I am not sure if there is a logical change for us to make with mo.ui.altair_chart

[mscolnick]

There is an improvement here I can make actually

[rluthi]

@mscolnick thanks!