st.plotly_chart con Plotly Express y Graph Objects

st.plotly_chart: integración con Plotly

Plotly es la biblioteca de gráficos interactivos más completa para Python. A diferencia de Matplotlib (que genera imágenes estáticas), los gráficos Plotly se renderizan con JavaScript en el navegador y son completamente interactivos: zoom con scroll, pan arrastrando, hover con datos detallados, selección de puntos, exportación a PNG y ocultación de series haciendo clic en la leyenda.

La integración con Streamlit se realiza mediante st.plotly_chart, que acepta figuras creadas tanto con Plotly Express (API de alto nivel, rápida) como con Graph Objects (API de bajo nivel, control total):

import streamlit as st
import plotly.express as px
import pandas as pd

df = px.data.gapminder()

fig = px.scatter(
    df[df["year"] == 2007],
    x="gdpPercap",
    y="lifeExp",
    size="pop",
    color="continent",
    hover_name="country",
    log_x=True,
    title="PIB per cápita vs Esperanza de vida (2007)"
)

st.plotly_chart(fig, use_container_width=True)

flowchart TD
    A[Plotly figura] --> B{"API elegida?"}
    B -->|Alto nivel| C[plotly.express px.scatter px.bar]
    B -->|Bajo nivel| D[graph_objects go.Figure go.Scatter]
    B -->|Multi gráfico| E[make_subplots layout]
    C --> F[Figure JSON]
    D --> F
    E --> F
    F --> G[st.plotly_chart fig use_container_width]
    G --> H[Renderizado JS interactivo]
    H --> I[Zoom pan hover selección]
    H --> J[Exporta PNG desde toolbar]
    H --> K[Anima frames con animation_frame]
    I --> L[Dashboard analitico vivo]

Plotly Express: la forma rápida de crear gráficos

Plotly Express (módulo px) proporciona funciones de alto nivel que crean gráficos completos con una sola llamada a función. Cada función acepta un DataFrame de Pandas y mapea las columnas a ejes, colores, tamaños y animaciones de forma automática:

import streamlit as st
import plotly.express as px

# Tipos de gráficos disponibles en Plotly Express:
# px.line, px.scatter, px.bar, px.histogram, px.box, px.violin,
# px.pie, px.sunburst, px.treemap, px.funnel, px.imshow, px.choropleth

A continuación se muestran los tipos más comunes:

import streamlit as st
import plotly.express as px
import pandas as pd
import numpy as np

# Gráfico de líneas temporales
df_ventas = pd.DataFrame({
    "fecha": pd.date_range("2025-01-01", periods=90),
    "ventas": np.cumsum(np.random.randn(90)) + 1000
})
fig_lineas = px.line(df_ventas, x="fecha", y="ventas", title="Ventas diarias",
                     color_discrete_sequence=["#FF4B4B"])
st.plotly_chart(fig_lineas, use_container_width=True)

# Histograma con distribución superpuesta
df_tips = px.data.tips()
fig_hist = px.histogram(
    df_tips, x="total_bill", nbins=30, marginal="box",
    color="sex", barmode="overlay", title="Distribución del gasto",
    opacity=0.7
)
st.plotly_chart(fig_hist, use_container_width=True)

# Mapa de calor con valores anotados
corr = df_tips.select_dtypes("number").corr()
fig_heat = px.imshow(corr, text_auto=".2f", color_continuous_scale="RdBu_r",
                     title="Correlaciones del dataset Tips")
st.plotly_chart(fig_heat, use_container_width=True)

Animaciones temporales

Plotly Express permite crear animaciones con el parámetro animation_frame, que genera un reproductor con botones de play/pausa y un slider temporal. Cada fotograma de la animación corresponde a un valor diferente de la columna especificada:

import streamlit as st
import plotly.express as px

df_gap = px.data.gapminder()

fig = px.scatter(
    df_gap,
    x="gdpPercap",
    y="lifeExp",
    animation_frame="year",
    animation_group="country",
    size="pop",
    color="continent",
    hover_name="country",
    log_x=True,
    size_max=55,
    range_x=[100, 100000],
    range_y=[25, 90],
    title="Evolución mundial: PIB vs Esperanza de vida (1952–2007)"
)
st.plotly_chart(fig, use_container_width=True)

Graph Objects: control total

Para gráficos con requisitos muy específicos, plotly.graph_objects ofrece control total sobre cada elemento:

import streamlit as st
import plotly.graph_objects as go
import numpy as np

# Gráfico de velas (candlestick) para datos financieros
np.random.seed(42)
fechas = pd.date_range("2026-01-01", periods=60)
precios = 100 + np.cumsum(np.random.randn(60))

fig = go.Figure(data=go.Candlestick(
    x=fechas,
    open=precios + np.random.randn(60) * 0.5,
    high=precios + np.abs(np.random.randn(60)) * 2,
    low=precios - np.abs(np.random.randn(60)) * 2,
    close=precios + np.random.randn(60) * 0.5
))

fig.update_layout(
    title="Precio de acción (enero–marzo 2026)",
    xaxis_title="Fecha",
    yaxis_title="Precio (€)",
    xaxis_rangeslider_visible=False,
    template="plotly_white"
)

st.plotly_chart(fig, use_container_width=True)

make_subplots: varios gráficos en un panel

import streamlit as st
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import numpy as np

fig = make_subplots(
    rows=2, cols=2,
    subplot_titles=("Ventas mensuales", "Distribución", "Costes vs Ingresos", "Porcentaje por región")
)

# Gráfico 1: líneas
x = list(range(1, 13))
fig.add_trace(go.Scatter(x=x, y=np.random.randint(30, 80, 12), mode="lines+markers", name="2026"), row=1, col=1)
fig.add_trace(go.Scatter(x=x, y=np.random.randint(25, 75, 12), mode="lines+markers", name="2025"), row=1, col=1)

# Gráfico 2: histograma
fig.add_trace(go.Histogram(x=np.random.randn(200), name="Normal"), row=1, col=2)

# Gráfico 3: dispersión
fig.add_trace(go.Scatter(x=np.random.rand(50)*100, y=np.random.rand(50)*100,
                         mode="markers", name="Productos"), row=2, col=1)

# Gráfico 4: circular
fig.add_trace(go.Pie(labels=["Norte", "Sur", "Este", "Oeste"],
                     values=[35, 25, 22, 18]), row=2, col=2)

fig.update_layout(height=700, title_text="Panel de análisis completo", showlegend=False)
st.plotly_chart(fig, use_container_width=True)

Dashboard Plotly interactivo

import streamlit as st
import plotly.express as px
import pandas as pd

df = px.data.gapminder()

st.title("Explorador de datos Gapminder con Plotly")

col1, col2 = st.columns(2)
with col1:
    año = st.select_slider("Año", sorted(df["year"].unique()), value=2007)
with col2:
    continente = st.multiselect("Continentes", df["continent"].unique(), default=list(df["continent"].unique()))

df_filtrado = df[(df["year"] == año) & (df["continent"].isin(continente))]

fig = px.scatter(
    df_filtrado,
    x="gdpPercap", y="lifeExp",
    size="pop", color="continent",
    hover_name="country",
    log_x=True,
    title=f"PIB per cápita vs Esperanza de vida — {año}",
    labels={"gdpPercap": "PIB per cápita (USD)", "lifeExp": "Esperanza de vida (años)"}
)
st.plotly_chart(fig, use_container_width=True)

Plotly es la elección preferida cuando la interactividad del usuario con el gráfico (hover, zoom, selección) es parte central de la experiencia de la aplicación.

La diferencia principal entre Plotly Express y Graph Objects es el nivel de abstracción. Plotly Express crea gráficos completos con una sola llamada a función, inferiendo automáticamente ejes, colores y tooltips desde las columnas del DataFrame. Graph Objects requiere construir cada traza y configurar el layout manualmente, pero ofrece control total para gráficos financieros, subplots complejos y visualizaciones personalizadas.