Altair in Python: build a chart you can hand over as HTML

Your notebook shows the right chart, but the person reviewing it does not have your Python environment. Save the Altair chart as HTML, with its data inside the chart specification. The recipient needs the exported page, rather than the notebook that produced it.

Start with four fictional work items. Install has 12 units, Audit has 18, Repair has 7, and Review has 23. Their total is 60 units. A team selector lets a reviewer see Field's 19 units or Desk's 41 without rerunning Python.

Open the working example · Download the complete HTML · Download the Python source · Download the source archive

Build the chart and its selector together

This example targets Altair 5, which is the version used to produce the downloadable original. Keep the column names in the data and the encodings identical.

import altair as alt
import pandas as pd

rows = pd.DataFrame([
    {"work": "Install", "team": "Field", "units": 12},
    {"work": "Audit", "team": "Desk", "units": 18},
    {"work": "Repair", "team": "Field", "units": 7},
    {"work": "Review", "team": "Desk", "units": 23},
])
team = alt.selection_point(
    fields=["team"], name="team_filter",
    bind=alt.binding_select(
        options=[None, "Field", "Desk"],
        labels=["All teams", "Field", "Desk"], name="Team: "
    )
)
chart = alt.Chart(rows).mark_bar().encode(
    x=alt.X("units:Q", title="Units"),
    y=alt.Y("work:N", title=None),
    tooltip=["work:N", "team:N", "units:Q"]
).add_params(team).transform_filter(team).properties(
    width="container", height=220
).configure_axis(labelFontSize=14, titleFontSize=14)
chart.save("work-items.html")

The exported selection belongs to the chart. You do not need to build a second dropdown in an enclosing page. Change the team and inspect both the remaining labels and their values; a selector that changes only its own label is not a working filter.

Choose how the JavaScript travels

Altair's ordinary HTML export loads its rendering libraries from a content delivery network. It is convenient for an online report, but a downloaded HTML file is not automatically an offline file.

The current Altair saving documentation also describes chart.save("work-items.html", inline=True). That route needs vl-convert-python in the generating environment. Keep the ordinary export if you do not have that dependency; do not label it offline merely because it has an .html extension.

The example downloads include the Python source, the original Altair export, and a separately bundled copy whose JavaScript is embedded. The bundled copy is a delivery version of the real export, not a screenshot drawn to resemble Altair.

Give the reviewer a readable result

Put the period, unit, and source beside the chart. For your own report, replace the fictional rows with your approved data and use the real reporting period. A missing period should remain blank until you know it.

If the reviewer needs the method as well as the result, keep the notebook with the project and send the chart as the reading copy. Notebook HTML exports are the better fit when the code and surrounding analysis need to travel together.

Before sending, open the delivery file in a browser, select each team, and confirm 19 and 41 against the source rows. Then restore All teams so the first view contains all four work items.

Review the page in NOS

For a report you want to present in a workspace, bring the finished HTML reading copy to NOS. Keep the Python source as the editable analytical original. The chart's team selector changes the reader's view; it does not update that original dataset.