altair chart and docx output: how to have rendered a chart?

[aborruso]

Hi,
I have the below sample code.

If I render it via cli, In the docx I do not have the rendered chart, but the python code?

Is it normal?

How to have a rendered chart? Shouldn't it be automatic?

Thank you

---
title: "matplotlib demo"
format: docx
---

```{python}
#| echo: false
import altair as alt
from vega_datasets import data
cars = data.cars()
```

```{python}
alt.Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
).properties(
    width=700,
    height=300
)
```

[rgaiacs]

Dear @aborruso, altair uses Vega that produces a HTML + CSS + Javascript chart. It works out of the box when you are render to HTML. Unfortunately, it doesn't work for any other format (including DOCX and PDF).

What Quarto does to enable some HTML + CSS + Javascript chart to be include in DOCX and PDF it to run a instance of Chrome and take a screenshot of the chart. I believe it was implemented for some libraries but not all.

I will try to provide more details tomorrow.

[s1lvester]

tomorrow is already yesterday 😄

[aborruso]

My current way to do it, is via vl-convert

```{python}
#| echo: false
import altair as alt
import vl_convert as vlc
from IPython.display import Image
from vega_datasets import data

cars = data.cars()

chart=alt.Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
).properties(
    width=700,
    height=300
)

png_data = vlc.vegalite_to_png(chart.to_json(), vl_version="4.17", scale=1)

Image(png_data, retina=True)
```