Stacked Area 100%

100% Stacked Area

Categoría EvoluciónComposición

Qué es

Variante del Área Apilada donde el total siempre es 100%. Muestra cómo evolucionan las proporciones de cada parte a lo largo del tiempo de forma continua.

Para qué sirve

Para mostrar la evolución de composición porcentual a lo largo del tiempo cuando los datos son continuos.

Cómo leerlo

Anatomía

La versión continua del stacked bar 100%: hereda la misma convención de marcar la línea del 100% con el mismo peso que la línea de cero, pero aplicada a una curva en vez de barras discretas. El límite superior de cada banda ya no es un valor absoluto que sube y baja —como en un área apilada común— sino una participación porcentual sobre un total que la normalización hace desaparecer del gráfico. Es, de las cuatro variantes "apiladas" de este catálogo, la que exige más cuidado de lectura: el ojo tiende a interpretar que una banda se "achica" cuando en realidad puede estar creciendo en términos absolutos, solo que más lento que el total —una serie puede duplicar su valor real de un extremo a otro del gráfico y aun así verse más angosta, si el total se triplicó en el mismo período. Es la trampa perceptiva más citada en contra de esta forma de gráfico, y la razón por la que conviene acompañarla siempre de las cifras absolutas en algún lugar cercano.

Torta cortada en capas de colores parejas hasta una cima uniforme de merengue, dos porciones con la misma altura total pero proporciones internas distintas: la misma anatomía de un área apilada al 100%, donde el total siempre es igual y solo cambia la composición interna

Por qué funciona

Fundamento perceptivo

A diferencia del Stacked Bar 100%, las áreas comunican continuidad y flujo, lo que es más natural para datos temporales continuos.

Errores comunes

  • Capas intermedias difíciles de comparar

    Igual que en las barras apiladas al 100%, solo la capa inferior tiene una línea base fija en cero; las capas intermedias flotan sobre una base que cambia de grosor de un punto a otro, lo que hace muy difícil juzgar si una capa intermedia realmente creció o solo parece haberlo hecho porque la capa de abajo cambió de tamaño.

  • Orden de las capas sin criterio

    El orden en que se apilan las categorías cambia qué tan fácil es leer cada una: las capas más cercanas a la línea base (la más estable) son las más fáciles de comparar en el tiempo, mientras que las de más arriba, con una base irregular, son las más difíciles. Ordenar las categorías más volátiles cerca de la base, y las más estables arriba, suele facilitar la lectura general.

  • Demasiadas categorías apiladas

    Con más de 5 o 6 categorías apiladas, los colores empiezan a repetirse en tonos parecidos entre sí, o la paleta se vuelve tan extensa que distinguir una capa de la vecina exige mirar la leyenda constantemente. Igual que en otros gráficos apilados, agrupar las categorías menores bajo "otros" suele ser más legible que mostrarlas todas por separado.

Dónde se usa

Contextos de aplicación

Cuota de mercado de navegadores web
01

Cuota de mercado de navegadores web

Participación de cada navegador sobre el total de visitas, medida mes a mes de forma continua.

Composición de la matriz energética
02

Composición de la matriz energética

Qué porcentaje de la electricidad generada proviene de cada fuente, a lo largo de las décadas.

Tráfico de un sitio web por dispositivo
03

Tráfico de un sitio web por dispositivo

Participación de visitas desde celular, computador y tablet, siguiendo su evolución mes a mes.

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)
Matplotlib: gráfico de barras

stackplot() apila todas las series en una sola llamada; como estos datos ya suman 100 por año, el resultado ya es un área 100% apilada sin necesitar ningún parámetro de normalización.

import matplotlib.pyplot as plt

# CNE y Coordinador Electrico Nacional, matriz electrica chilena por
# tecnologia, 2016-2023 -- ya son porcentajes que suman 100.
anios = ["2016", "2019", "2023"]
termica = [63.4, 56.0, 37.3]
hidraulica = [24.0, 24.6, 26.1]
ernc = [12.6, 19.4, 36.6]

# stackplot() apila todas las series en una sola llamada; como estos
# datos ya suman 100, el resultado ya es un area 100% apilada.
fig, ax = plt.subplots(figsize=(8, 5))
ax.stackplot(anios, termica, hidraulica, ernc,
             colors=["#490827", "#760D3E", "#D2601F"], alpha=0.9,
             labels=["Térmica", "Hidráulica convencional", "ERNC"])
ax.legend(frameon=False, loc="upper center", bbox_to_anchor=(0.5, -0.08), ncol=3)
plt.tight_layout()
plt.show()

Herramientas para construirlo

No-code, desktop y plataformas web, con su licencia visible, abierta o comercial.

No-code
Datawrapper FreemiumFlourish Freemium
JavaScript
D3.js Open SourceECharts Open SourceHighcharts Comercial
Python
Plotly Open SourceMatplotlib Open Source
R
ggplot2 Open Source

Con datos reales

Ejemplos de uso.

¿Cómo cambió la matriz eléctrica chilena?

Participación de cada tecnología en la generación eléctrica del Sistema Eléctrico Nacional, 2016-2023. Las renovables no convencionales (solar y eólica, entre otras) pasaron de casi marginales a casi empatar con la generación térmica.

0%25%50%75%100%63%24%13%201656%25%19%201937%26%37%2023TérmicaHidráulica convencionalERNC (solar, eólica y otras)

Fuente: Comisión Nacional de Energía (CNE) y Coordinador Eléctrico Nacional