Graphiques et données Streamlit

Présentez les données clairement.

Choisir les éléments d'affichage

Graphiques natifs en priorité

Préférez les graphiques natifs de Streamlit pour les cas simples.

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")

Les graphiques natifs supportent des paramètres supplémentaires : color pour le regroupement de séries, stack pour l'empilement de barres/aires, size pour le dimensionnement des points de dispersion, horizontal pour les barres horizontales. Consultez la référence API des graphiques pour les options complètes.

Libellés lisibles

Utilisez des libellés clairs—pas de noms de colonnes ni d'abréviations. Omettez x_label/y_label si les noms de colonnes sont déjà clairs.

# MAUVAIS : noms de colonnes cryptiques sans libellés
st.line_chart(df, x="dt", y="rev")

# BON : colonnes lisibles, pas de libellés nécessaires
st.line_chart(df, x="date", y="revenue")

# BON : colonnes cryptiques, ajouter des libellés
st.line_chart(df, x="dt", y="rev", x_label="Date", y_label="Revenue")

Altair pour les graphiques complexes

Utilisez Altair quand vous avez besoin de plus de contrôle. Altair est fourni avec Streamlit (pas d'installation supplémentaire), tandis que Plotly nécessite un paquet additionnel. Choisissez-en un et restez cohérent dans votre 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)

Quand utiliser Altair :

• Formatage d'axes personnalisé
• Plusieurs séries avec légendes
• Infobulles interactives
• Visualisations en couches

Configuration des colonnes de dataframe

Utilisez column_config quand cela ajoute de la valeur—formater les devises, afficher des barres de progression, afficher des liens ou des images. N'ajoutez pas de config juste pour les libellés ou les info-bulles qui n'améliorent pas significativement la lisibilité. Fonctionne avec st.dataframe et st.data_editor.

st.dataframe(
    df,
    column_config={
        "revenue": st.column_config.NumberColumn(
            "Revenue",
            format="$%.2f"
        ),
        "completion": st.column_config.ProgressColumn(
            "Progress",
            min_value=0,
            max_value=100
        ),
        "url": st.column_config.LinkColumn("Website"),
        "logo": st.column_config.ImageColumn("Logo"),
        "created_at": st.column_config.DatetimeColumn(
            "Created",
            format="MMM DD, YYYY"
        ),
        "internal_id": None,  # Hide non-essential columns
    },
    hide_index=True,
)

Note sur le masquage de colonnes : Définir une colonne à None la masque dans l'interface, mais les données sont toujours envoyées au frontend. Pour les données vraiment sensibles, pré-filtrez le DataFrame avant l'affichage.

Bonnes pratiques du dataframe :

• Masquer l'index inutile : hide_index=True
• Ou rendre l'index significatif : df = df.set_index("customer_name") avant l'affichage
• Masquer les colonnes internes/techniques : Définir la colonne à None dans la config (mais pré-filtrer pour les données sensibles)
• Utiliser les types de colonnes visuels quand ils aident : sparklines pour les tendances, barres de progression pour la complétude, images pour les logos

Types de colonnes :

• AreaChartColumn → Sparklines d'aires
• BarChartColumn → Sparklines de barres
• CheckboxColumn → Booléen comme case à cocher
• DateColumn → Date uniquement (pas d'heure)
• DatetimeColumn → Dates avec formatage
• ImageColumn → Images
• JSONColumn → Afficher les objets JSON
• LineChartColumn → Graphiques sparkline
• LinkColumn → Liens cliquables
• ListColumn → Afficher les listes/tableaux
• MultiselectColumn → Sélection multi-valeurs
• NumberColumn → Nombres avec formatage
• ProgressColumn → Barres de progression
• SelectboxColumn → Menu déroulant modifiable
• TextColumn → Texte avec formatage
• TimeColumn → Heure uniquement (pas de date)

Colonnes épinglées

Gardez les colonnes importantes visibles lors du défilement horizontal :

st.dataframe(
    df,
    column_config={
        "Title": st.column_config.TextColumn(pinned=True),  # Always visible
        "Rating": st.column_config.ProgressColumn(min_value=0, max_value=10),
    },
    hide_index=True,
)

Éditeur de données

Utilisez st.data_editor quand les utilisateurs ont besoin de modifier les données directement :

edited_df = st.data_editor(
    df,
    num_rows="dynamic",  # Allow adding/deleting rows
    column_config={
        "status": st.column_config.SelectboxColumn(
            "Status",
            options=["pending", "approved", "rejected"]
        ),
    },
)

# React to edits
if not edited_df.equals(df):
    save_changes(edited_df)

Affichage JSON

Pour l'inspection de données structurées. Accepte les dicts, listes ou tout objet sérialisable en JSON :

st.json({"name": "John", "scores": [95, 87, 92]})

Sparklines dans les métriques

Ajoutez chart_data et chart_type aux métriques pour un contexte visuel.

values = [700, 720, 715, 740, 762, 755, 780]

st.metric(
    label="Developers",
    value="762k",
    delta="-7.42% (MoM)",
    delta_color="inverse",
    chart_data=values,
    chart_type="line"  # or "bar"
)

Note : Les sparklines affichent uniquement les valeurs y et ignorent l'espacement de l'axe x. Utilisez-les pour des données régulièrement espacées (comme des snapshots quotidiens ou hebdomadaires). Pour les séries temporelles irrégulièrement espacées, utilisez un graphique approprié à la place.

Consultez building-streamlit-dashboards pour composer les métriques dans des mises en page de tableau de bord.

Références

• st.dataframe
• st.data_editor
• st.column_config
• st.metric
• st.json
• st.line_chart
• st.bar_chart
• st.altair_chart