designing-real-world-ai-agents-workshop: Skill for Claude Code

Streamlit charts & data

Present data clearly.

Choosing display elements

Element	Use Case
st.dataframe	Interactive exploration, sorting, filtering
st.data_editor	User-editable tables
st.table	Static display, no interaction needed
st.metric	KPIs with delta indicators
st.json	Structured data inspection

Native charts first

Prefer Streamlit's native charts for simple cases.

st.line_chart(df, x="date", y="revenue")
st.bar_chart(df, x="category", y="count")
st.scatter_chart(df, x="age", y="salary")
st.area_chart(df, x="date", y="value")

Native charts support additional parameters: color for series grouping, stack for bar/area stacking, size for scatter point sizing, horizontal for horizontal bars. See the chart API reference for full options.

Human-readable labels

Use clear labels—not column names or abbreviations. Skip x_label/y_label if the column names are already readable.

# BAD: cryptic column names without labels
st.line_chart(df, x="dt", y="rev")

# GOOD: readable columns, no labels needed
st.line_chart(df, x="date", y="revenue")

# GOOD: cryptic columns, add labels
st.line_chart(df, x="dt", y="rev", x_label="Date", y_label="Revenue")

Altair for complex charts

Use Altair when you need more control. Altair is bundled with Streamlit (no extra install), while Plotly requires an additional package. Pick one and stay consistent throughout your app.

import altair as alt

chart = alt.Chart(df).mark_line().encode(
    x=alt.X("date:T", title="Date"),
    y=alt.Y("revenue:Q", title="Revenue ($)"),
    color="region:N"
)
st.altair_chart(chart)

When to use Altair:

• Custom axis formatting
• Multiple series with legends
• Interactive tooltips
• Layered visualizations

Dataframe column configuration

Use column_config where it adds value—formatting currencies, showing progress bars, displaying links or images. Don't add config just for labels or tooltips that don't meaningfully improve readability. Works with both st.dataframe and st.data_editor.