st.line_chart, st.bar_chart, st.area_chart y st.scatter_chart

Gráficos nativos de Streamlit

Los gráficos nativos de Streamlit están basados en Vega-Lite y ofrecen interactividad integrada (zoom, pan, selección de series) con una API minimalista. Son la forma más rápida de visualizar datos desde un DataFrame de Pandas sin necesidad de importar bibliotecas de visualización externas como Matplotlib o Plotly.

La API nativa expone cuatro funciones principales, cada una orientada a un tipo de representación visual diferente:

• st.line_chart para series temporales y tendencias
• st.bar_chart para comparativas por categorías
• st.area_chart para volúmenes acumulados
• st.scatter_chart para correlaciones y distribuciones

Todos comparten los mismos parámetros de configuración (x, y, color, size, use_container_width, height), lo que facilita alternar entre tipos de gráfico sin cambiar la estructura del código.

flowchart TD
    A[DataFrame Pandas] --> B{"Tipo de visualización?"}
    B -->|Tendencia| C[st.line_chart series temporales]
    B -->|Comparativa categorías| D[st.bar_chart]
    B -->|Volumen acumulado| E[st.area_chart]
    B -->|Correlación puntos| F[st.scatter_chart]
    C --> G[Vega-Lite zoom pan hover]
    D --> G
    E --> G
    F --> G
    G --> H[use_container_width True]
    H --> I[Gráfico responsive en dashboard]
    A -.->|Sin imports extras| J[Sin matplotlib ni plotly]

st.line_chart: series temporales y tendencias

import streamlit as st
import pandas as pd
import numpy as np

# Datos de ejemplo
np.random.seed(42)
df = pd.DataFrame({
    "fecha": pd.date_range("2026-01-01", periods=90, freq="D"),
    "ventas_norte": np.cumsum(np.random.randn(90)) + 100,
    "ventas_sur": np.cumsum(np.random.randn(90)) + 80,
    "ventas_este": np.cumsum(np.random.randn(90)) + 60
})

# Gráfico de líneas básico
st.line_chart(df.set_index("fecha"))

# Con configuración explícita de ejes
st.line_chart(
    df,
    x="fecha",
    y=["ventas_norte", "ventas_sur", "ventas_este"],
    color=["#FF4B4B", "#1F77B4", "#2CA02C"],
    use_container_width=True,
    height=400
)

# Serie única
st.line_chart(df, x="fecha", y="ventas_norte", color="#FF4B4B")

El parámetro color acepta una lista de códigos hexadecimales con un color por serie. Cuando no se específica, Streamlit asigna colores automáticamente de su paleta predeterminada. El parámetro height permite fijar la altura en píxeles, lo que ayuda a mantener la coherencia visual cuando se muestran varios gráficos en un dashboard.

Los gráficos nativos renderizan el gráfico directamente en el navegador mediante Vega-Lite, lo que significa que la interactividad (zoom con scroll, pan con arrastrar, tooltip al pasar el ratón) funciona sin ninguna configuración adicional.

st.bar_chart: comparativas por categorías

st.bar_chart es ideal para comparar magnitudes entre categorías discretas. Al igual que st.line_chart, soporta múltiples series, configuración de colores y ajuste al contenedor:

import streamlit as st
import pandas as pd

# Ventas por producto
df_productos = pd.DataFrame({
    "producto": ["Laptop", "Monitor", "Teclado", "Ratón", "Auriculares"],
    "Q1_2026": [45, 32, 78, 91, 55],
    "Q4_2025": [38, 29, 71, 85, 48]
})

st.bar_chart(
    df_productos,
    x="producto",
    y=["Q1_2026", "Q4_2025"],
    color=["#FF4B4B", "#AAAAAA"],
    use_container_width=True
)

# Barras apiladas (por defecto cuando hay múltiples series y stack=True)
st.bar_chart(df_productos, x="producto", y=["Q1_2026", "Q4_2025"])

Cuando se proporcionan múltiples series sin configurar stack, las barras se agrupan una junto a la otra. Para forzar el apilamiento se pasa stack=True, útil cuando se quiere visualizar la contribución relativa de cada serie al total.

st.area_chart: volumen acumulado y porcentajes

st.area_chart funciona de forma similar a st.line_chart pero rellena el área entre la línea y el eje horizontal. Es especialmente útil para visualizar volúmenes acumulados, composiciones y tendencias donde importa la magnitud total:

import streamlit as st
import pandas as pd
import numpy as np

df_trafico = pd.DataFrame(
    np.abs(np.random.randn(30, 3)),
    columns=["Orgánico", "Directo", "Social"],
    index=pd.date_range("2026-03-01", periods=30)
)

st.area_chart(df_trafico, use_container_width=True)

El gráfico de área resulta particularmente efectivo cuando se quiere enfatizar la relación proporcional entre múltiples series, ya que las áreas superpuestas permiten comparar visualmente la contribución de cada fuente de tráfico al total.

st.scatter_chart: correlaciones y distribuciones

import streamlit as st
import pandas as pd
import numpy as np

np.random.seed(42)
df_scatter = pd.DataFrame({
    "horas_estudio": np.random.uniform(1, 10, 100),
    "nota_examen": np.random.uniform(3, 10, 100),
    "dificultad": np.random.choice(["Fácil", "Medio", "Difícil"], 100),
    "creditos": np.random.randint(3, 12, 100)
})

st.scatter_chart(
    df_scatter,
    x="horas_estudio",
    y="nota_examen",
    color="dificultad",
    size="creditos",
    use_container_width=True
)

Dashboard interactivo con gráficos nativos

import streamlit as st
import pandas as pd
import numpy as np

st.set_page_config(layout="wide")
st.title("Dashboard de ventas — Gráficos nativos")

# Datos
np.random.seed(42)
meses = pd.date_range("2025-01-01", "2026-03-01", freq="MS")
df = pd.DataFrame({
    "mes": meses,
    "ventas": np.random.randint(30000, 80000, len(meses)),
    "costes": np.random.randint(20000, 50000, len(meses)),
    "beneficio": np.random.randint(5000, 30000, len(meses))
})

# Filtro de período
col_filtro, _ = st.columns([2, 3])
with col_filtro:
    periodo = st.selectbox("Período", ["Últimos 6 meses", "Último año", "Todo el período"])

if periodo == "Últimos 6 meses":
    df = df.tail(6)
elif periodo == "Último año":
    df = df.tail(12)

# Métricas resumen
c1, c2, c3 = st.columns(3)
c1.metric("Ventas totales", f"€ {df['ventas'].sum():,.0f}")
c2.metric("Costes totales", f"€ {df['costes'].sum():,.0f}")
c3.metric("Beneficio total", f"€ {df['beneficio'].sum():,.0f}")

# Gráficos
col1, col2 = st.columns(2)
with col1:
    st.subheader("Evolución de ventas y costes")
    st.line_chart(df, x="mes", y=["ventas", "costes"], color=["#FF4B4B", "#1F77B4"])
with col2:
    st.subheader("Beneficio mensual")
    st.bar_chart(df, x="mes", y="beneficio", color="#2CA02C")

Cuándo usar gráficos nativos frente a bibliotecas externas

Los gráficos nativos son ideales para prototipos rápidos y dashboards donde la velocidad de desarrollo prima sobre la personalización visual avanzada. Su principal ventaja es que no requieren importar ni configurar bibliotecas adicionales: basta con un DataFrame de Pandas y una sola línea de código.

Sin embargo, presentan limitaciones cuando se necesitan anotaciones personalizadas, ejes secundarios, subplots o tipos de gráfico no soportados (circular, radar, candlestick). En esos casos, las integraciones con Matplotlib (st.pyplot), Plotly (st.plotly_chart) y Altair (st.altair_chart) ofrecen un control visual completo a costa de mayor complejidad en el código.