Bump Chart

Categoría ComparaciónEvolución

Qué es

Versión suavizada del Slope Graph para más de dos períodos. Muestra cómo evoluciona el ranking de múltiples ítems a lo largo del tiempo con curvas que se entrecruzan.

Para qué sirve

Para visualizar cambios de posición o ranking a lo largo de varios períodos de tiempo cuando hay muchos competidores.

Cómo leerlo

Anatomía

Suele describirse como una extensión directa del slopegraph, con ejemplos documentados de este formato con múltiples columnas de tiempo circulando desde al menos las últimas décadas del siglo XX. La diferencia con el slopegraph no es de principio sino de escala: acá hay tres o más momentos en el eje horizontal, así que las líneas no solo suben o bajan sino que se cruzan libremente entre sí a medida que cada categoría gana o pierde posiciones en un ranking a lo largo del tiempo. El eje vertical mide posición en el ranking, no magnitud real: dos categorías con valores muy distintos pueden ocupar la misma altura si están en el mismo lugar, y un cruce entre dos líneas marca el momento exacto en que una adelanta a la otra.

Por qué funciona

Fundamento perceptivo

Las curvas suavizadas hacen más fácil seguir la trayectoria de un ítem específico que en una grilla de valores. El cruce de líneas visualmente comunica competencia.

Errores comunes

Espagueti con demasiados ítems

Con más de 8 o 10 categorías siguiendo su ranking a lo largo del tiempo, las líneas se cruzan tantas veces entre sí que el gráfico se vuelve un plato de espagueti donde ya no se puede seguir la trayectoria de ninguna categoría en particular. Filtrar a las categorías relevantes, o resaltar solo una en color mientras el resto queda en gris, es casi obligatorio pasado ese umbral.
Cambios de ranking poco frecuentes se ven planos

Cuando el orden entre categorías cambia poco de un período a otro, las líneas del bump chart quedan casi horizontales durante largos tramos, lo que puede hacer que el gráfico se perciba como poco informativo aunque sí esté mostrando una historia real de estabilidad relativa. En esos casos vale la pena preguntarse si el ranking es realmente la pregunta más interesante de los datos, o si una serie de valores absolutos comunicaría más.
Espaciado temporal irregular

Si los períodos que se comparan no están espaciados de forma uniforme en el eje horizontal —por ejemplo, mezclando intervalos anuales con intervalos mensuales—, la pendiente de cada segmento de línea deja de ser comparable entre sí, distorsionando la percepción de qué tan rápido cambió el ranking en cada tramo.

Dónde se usa

Contextos de aplicación

Evolución de posiciones en un torneo

El ranking de cada equipo fecha a fecha, con sus cruces de posición.

Ranking de marcas a lo largo de los años

Quién lidera la categoría cada año y cómo se reordenan las demás.

Competencia por el primer lugar

Solo importa el orden, no la magnitud: el bump chart sigue el podio en el tiempo.

Cómo construirlo

El mismo gráfico, en 11 librerías open source

Cada librería resuelve las mismas decisiones de diseño, como la escala, el espaciado entre barras o la inserción de la etiqueta de valor, de un modo distinto. Algunas las automatizan; otras las dejan explícitas en el código, a criterio de quien lo escribe. Comparar once implementaciones con los mismos datos y el mismo color de marca aísla esa diferencia, que de otro modo queda oculta detrás de estilos visuales distintos.

Matplotlib License (estilo BSD)

invert_yaxis() es un método imperativo sobre el Axes —no hay un parámetro dedicado dentro de la llamada de plot() misma, hay que invertirlo después de graficar.

import matplotlib.pyplot as plt

x = ["dic 2024", "dic 2025", "jul 2026"]
series = [
    {"name": "Argentina", "color": "#490827", "values": [1, 2, 2]},
    {"name": "Brasil", "color": "#760D3E", "values": [5, 5, 5]},
    {"name": "Colombia", "color": "#D2601F", "values": [12, 13, 11]},
    {"name": "Uruguay", "color": "#9B928C", "values": [11, 16, 20]},
    {"name": "Chile", "color": "#2980B9", "values": [50, 52, 49]},
]

fig, ax = plt.subplots(figsize=(7, 4.2))
for s in series:
    ax.plot(x, s["values"], color=s["color"], linewidth=2.5, marker="o")
    ax.text(2.05, s["values"][-1], f"{s['name']} ({s['values'][-1]})", va="center", color=s["color"])

# invert_yaxis() es un metodo imperativo sobre el Axes -- no hay un
# parametro dedicado dentro de la llamada de plot() misma.
ax.invert_yaxis()
ax.set_yticks([])
plt.show()