Plotly

Plotly crea gráficos interactivos listos para la web con la capacidad de pasar el ratón por encima, hacer zoom y desplazarse. Exporta a HTML o incrusta en aplicaciones Dash.

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

import plotly.express as px
import pandas as pd
 
df = pd.read_csv("sales.csv", parse_dates=["ordered_at"])
fig = px.line(df, x="ordered_at", y="revenue", color="region", title="Tendencia de ingresos")
fig.update_layout(hovermode="x unified")
fig.write_html("revenue.html", include_plotlyjs="cdn")

Cuándo usar esto:

Paneles de control y exploración autoservicio para partes interesadas
Dispersión densa que necesita detalles al pasar el ratón
Cepillado enlazado entre facetas (Dash)
Incrustar gráficos en herramientas web internas

Ejemplo de trabajo

import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import numpy as np
 
rng = np.random.default_rng(42)
df = pd.DataFrame(
    {
        "region": np.repeat(["East", "West"], 100),
        "month": np.tile(np.arange(1, 13).repeat(8)[:100], 2),
        "revenue": rng.integers(80, 200, 200),
        "units": rng.integers(5, 50, 200),
    }
)
 
# Dispersión Express con hover personalizado
fig_scatter = px.scatter(
    df,
    x="units",
    y="revenue",
    color="region",
    hover_data=["month"],
    opacity=0.7,
    title="Unidades vs ingresos",
)
fig_scatter.update_traces(marker=dict(size=8))
 
# Objetos de gráfico para combinación de doble eje
monthly = df.groupby(["month", "region"], observed=True)["revenue"].sum().reset_index()
fig_combo = go.Figure()
for region, sub in monthly.groupby("region"):
    fig_combo.add_trace(
        go.Scatter(x=sub["month"], y=sub["revenue"], mode="lines+markers", name=region)
    )
fig_combo.update_layout(
    xaxis_title="Mes",
    yaxis_title="Ingresos",
    legend_title="Región",
    template="plotly_white",
)
 
fig_scatter.write_html("scatter.html", include_plotlyjs="cdn")
fig_combo.write_html("combo.html", include_plotlyjs="cdn")

Lo que esto demuestra:

Plotly Express para dispersiones rápidas con hover_data
Objetos de Gráfico para figuras multitraza
template para un tema claro y coherente
JS alojado en CDN para archivos HTML más pequeños

Inmersión Profunda

Cómo funciona

Las figuras son diccionarios serializables en JSON renderizados por plotly.js en el navegador.
Express envuelve graph_objects con valores predeterminados sensatos de las columnas del DataFrame.
Las trazas contienen datos; el diseño controla los ejes, leyendas y anotaciones.
Dash crea aplicaciones reactivas que comparten el mismo modelo de figura.

Express vs. Objetos de Gráfico

Capa	Mejor para
`plotly.express`	Gráficos estándar a partir de datos ordenados
`plotly.graph_objects`	Diseños personalizados, ejes dobles, anotaciones

Notas de Python

import plotly.io as pio
 
# La exportación de imágenes estáticas requiere kaleido
pio.write_image(fig, "chart.png", scale=2)

Errores comunes

Graficar millones de puntos - el navegador se cuelga. Solución: agregar, hexbin o datashader primero.
HTML enorme por JS en línea - include_plotlyjs=True infla los archivos. Solución: usar "cdn" o "directory".
Eje X categórico tratado como numérico - las líneas se conectan incorrectamente. Solución: astype(str) o category_orders.
Fechas sin zona horaria - el hover muestra el desplazamiento local incorrecto. Solución: UTC en el origen, formato en hovertemplate.
Kaleido faltante para PNG - write_image falla en CI. Solución: uv pip install kaleido en trabajos de exportación.

Alternativas

Alternativa	Usar cuando	No usar cuando
matplotlib	Pipelines estáticos de impresión/PDF	Necesita tooltips al pasar el ratón
Altair	Especificaciones declarativas de Vega-Lite	Necesita trazas WebGL 3D
Bokeh	Grandes conjuntos de datos en streaming	El equipo ya usa Plotly/Dash
Observable Plot	Gramática nativa de la web	Trabajos por lotes solo de Python

Preguntas frecuentes

¿Express u objetos de gráfico?

Empieza con Express; pasa a GO para ejes dobles y anotaciones personalizadas.
GO es verboso pero ilimitado.

¿Cómo personalizo el texto al pasar el ratón?

fig.update_traces(hovertemplate="Ingresos: %{y:$,.0f}<extra></extra>")

¿Puedo usar Plotly en Jupyter?

fig.show() se renderiza en línea con soporte para nbformat.
Prefiere la exportación HTML para compartir fuera del notebook.

¿Cómo arreglo el orden de la leyenda?

fig.update_layout(legend_traceorder="reversed")

O ordena las trazas antes de añadirlas.

¿Cómo añado una línea de referencia horizontal?

fig.add_hline(y=150, line_dash="dash", annotation_text="objetivo")

¿Funciona Plotly con Polars?

Pasa pl.DataFrame donde sea compatible o .to_pandas() primero.

¿Cómo aplico el tema oscuro?

fig.update_layout(template="plotly_dark")

¿Cómo lo incrusto en Flask?

Devuelve fig.to_html(full_html=False) en las plantillas.
Carga plotly.js una vez en el diseño base.

¿Qué es Dash?

El framework de aplicaciones reactivas de Plotly - consulta la página de dashboards.
Comparte el modelo de figura con Express/GO.

¿Cómo animo?

px.scatter(..., animation_frame="year") para conjuntos de datos pequeños.
Evita la animación en fotogramas enormes.

Relacionado

Paneles de control (Streamlit / Dash / Gradio) - Aplicaciones Dash
Graficar datos grandes - muestreo descendente
Altair - alternativa declarativa
Conceptos básicos de visualización - cuándo la interactividad ayuda

Versiones de la pila: Esta página fue escrita para Python 3.14.0 (estable 3.14, mantenimiento 3.13), FastAPI 0.115+, Django 5.2, Flask 3.1, Pydantic 2, PyTorch 2.6+, pandas 2.2+, Polars 1.x, ruff 0.9+ y uv 0.6+.

Plotly

Plotly crea gráficos interactivos listos para la web con la capacidad de pasar el ratón por encima, hacer zoom y desplazarse. Exporta a HTML o incrusta en aplicaciones Dash.

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

import plotly.express as px
import pandas as pd
 
df = pd.read_csv("sales.csv", parse_dates=["ordered_at"])
fig = px.line(df, x="ordered_at", y="revenue", color="region", title="Tendencia de ingresos")
fig.update_layout(hovermode="x unified")
fig.write_html("revenue.html", include_plotlyjs="cdn")

Cuándo usar esto:

Paneles de control y exploración autoservicio para partes interesadas
Dispersión densa que necesita detalles al pasar el ratón
Cepillado enlazado entre facetas (Dash)
Incrustar gráficos en herramientas web internas

Ejemplo de trabajo

import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import numpy as np
 
rng = np.random.default_rng(42)
df = pd.DataFrame(
    {
        "region": np.repeat(["East", "West"], 100),
        "month": np.tile(np.arange(1, 13).repeat(8)[:100], 2),
        "revenue": rng.integers(80, 200, 200),
        "units": rng.integers(5, 50, 200),
    }
)
 
# Dispersión Express con hover personalizado
fig_scatter = px.scatter(
    df,
    x="units",
    y="revenue",
    color="region",
    hover_data=["month"],
    opacity=0.7,
    title="Unidades vs ingresos",
)
fig_scatter.update_traces(marker=dict(size=8))
 
# Objetos de gráfico para combinación de doble eje
monthly = df.groupby(["month", "region"], observed=True)["revenue"].sum().reset_index()
fig_combo = go.Figure()
for region, sub in monthly.groupby("region"):
    fig_combo.add_trace(
        go.Scatter(x=sub["month"], y=sub["revenue"], mode="lines+markers", name=region)
    )
fig_combo.update_layout(
    xaxis_title="Mes",
    yaxis_title="Ingresos",
    legend_title="Región",
    template="plotly_white",
)
 
fig_scatter.write_html("scatter.html", include_plotlyjs="cdn")
fig_combo.write_html("combo.html", include_plotlyjs="cdn")

Lo que esto demuestra:

Plotly Express para dispersiones rápidas con hover_data
Objetos de Gráfico para figuras multitraza
template para un tema claro y coherente
JS alojado en CDN para archivos HTML más pequeños

Inmersión Profunda

Cómo funciona

Las figuras son diccionarios serializables en JSON renderizados por plotly.js en el navegador.
Express envuelve graph_objects con valores predeterminados sensatos de las columnas del DataFrame.
Las trazas contienen datos; el diseño controla los ejes, leyendas y anotaciones.
Dash crea aplicaciones reactivas que comparten el mismo modelo de figura.

Express vs. Objetos de Gráfico

Capa	Mejor para
`plotly.express`	Gráficos estándar a partir de datos ordenados
`plotly.graph_objects`	Diseños personalizados, ejes dobles, anotaciones

Notas de Python

import plotly.io as pio
 
# La exportación de imágenes estáticas requiere kaleido
pio.write_image(fig, "chart.png", scale=2)

Errores comunes

Graficar millones de puntos - el navegador se cuelga. Solución: agregar, hexbin o datashader primero.
HTML enorme por JS en línea - include_plotlyjs=True infla los archivos. Solución: usar "cdn" o "directory".
Eje X categórico tratado como numérico - las líneas se conectan incorrectamente. Solución: astype(str) o category_orders.
Fechas sin zona horaria - el hover muestra el desplazamiento local incorrecto. Solución: UTC en el origen, formato en hovertemplate.
Kaleido faltante para PNG - write_image falla en CI. Solución: uv pip install kaleido en trabajos de exportación.

Alternativas

Alternativa	Usar cuando	No usar cuando
matplotlib	Pipelines estáticos de impresión/PDF	Necesita tooltips al pasar el ratón
Altair	Especificaciones declarativas de Vega-Lite	Necesita trazas WebGL 3D
Bokeh	Grandes conjuntos de datos en streaming	El equipo ya usa Plotly/Dash
Observable Plot	Gramática nativa de la web	Trabajos por lotes solo de Python

Preguntas frecuentes

¿Express u objetos de gráfico?

Empieza con Express; pasa a GO para ejes dobles y anotaciones personalizadas.
GO es verboso pero ilimitado.

¿Cómo personalizo el texto al pasar el ratón?

fig.update_traces(hovertemplate="Ingresos: %{y:$,.0f}<extra></extra>")

¿Puedo usar Plotly en Jupyter?

fig.show() se renderiza en línea con soporte para nbformat.
Prefiere la exportación HTML para compartir fuera del notebook.

¿Cómo arreglo el orden de la leyenda?

fig.update_layout(legend_traceorder="reversed")

O ordena las trazas antes de añadirlas.

¿Cómo añado una línea de referencia horizontal?

fig.add_hline(y=150, line_dash="dash", annotation_text="objetivo")

¿Funciona Plotly con Polars?

Pasa pl.DataFrame donde sea compatible o .to_pandas() primero.

¿Cómo aplico el tema oscuro?

fig.update_layout(template="plotly_dark")

¿Cómo lo incrusto en Flask?

Devuelve fig.to_html(full_html=False) en las plantillas.
Carga plotly.js una vez en el diseño base.

¿Qué es Dash?

El framework de aplicaciones reactivas de Plotly - consulta la página de dashboards.
Comparte el modelo de figura con Express/GO.

¿Cómo animo?

px.scatter(..., animation_frame="year") para conjuntos de datos pequeños.
Evita la animación en fotogramas enormes.

Relacionado

Paneles de control (Streamlit / Dash / Gradio) - Aplicaciones Dash
Graficar datos grandes - muestreo descendente
Altair - alternativa declarativa
Conceptos básicos de visualización - cuándo la interactividad ayuda

Versiones de la pila: Esta página fue escrita para Python 3.14.0 (estable 3.14, mantenimiento 3.13), FastAPI 0.115+, Django 5.2, Flask 3.1, Pydantic 2, PyTorch 2.6+, pandas 2.2+, Polars 1.x, ruff 0.9+ y uv 0.6+.

Plotly

Buscar en la documentación

Plotly