Áreas apiladas
Cómo cambia la composición de un total.
Definición
Las áreas apiladas dibujan varias series una encima de otra a lo largo del tiempo, de modo que el borde superior es el total y el grosor de cada capa es su parte. El orden de las capas no cambia, para poder seguir cada una de un instante al siguiente. Se usa para la evolución de ventas por canal, tráfico por fuente o gasto por partida.
- Datos
- x · series
- Buena para
- Ver a la vez cómo evoluciona un total y cómo cambia su reparto.
- Evítala cuando
- Cuando hay que seguir con precisión una capa de arriba: no parte de una base recta y su forma engaña.
- Se lee bien
- Entre 3 y 30 elementos; dibuja hasta 1000
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: resumen en texto · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x · opcional | date | El instante de cada fila. Si no hay columna de fecha, la pieza FABRICA una secuencia y ordena por ella. |
series · opcional | number | Una capa por cada columna numérica, en el orden del fichero. El orden de las columnas es el orden del apilado y el de la leyenda. |
Tamaños
Recompuesta, no encogida
El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.
Cuándo usarla
Tres preguntas antes de elegirla
¿Te interesa el reparto, no seguir cada serie por su cuenta?
Si lo importante es la evolución de cada serie, las líneas parten todas del mismo eje.
Sí: quédate con áreas apiladas
No: usa Gráfico de líneas
¿Necesitas leer el total contra un eje que empieza en cero?
Si importa el grosor de cada capa más que la altura del total, el streamgraph quita la línea base.
Sí: quédate con áreas apiladas
No: usa Streamgraph
¿La serie tiene muchos instantes, no unos pocos periodos?
Con pocos periodos sueltos, las barras apiladas separan cada uno.
Sí: quédate con áreas apiladas
No: usa Barras apiladas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('stackedarea');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿En qué orden se apilan las capas?
En el de las columnas del fichero, que es también el de la leyenda. Ese orden se mantiene en todo el gráfico.
¿Y si no tengo una columna de fecha?
La pieza crea una secuencia con el orden de las filas. Conviene que las filas vengan ya ordenadas en el tiempo.
¿Qué hace si faltan datos?
Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.
¿Cómo se ve en el móvil?
El motor la recompone a 360 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «cómo cambia en el tiempo»
Diagrama de flujo acumuladotrabajo en cada estado a lo largo del tiempo
Gráfico de áreasuna medida en el tiempo con el volumen destacado
Gráfico de control por atributostasa de defectos de lotes frente a sus límites
Barras y línea combinadasuna cifra absoluta junto a su tasa
Bandas de Bollingerprecio frente a su rango habitual de variación
Gráfico con selector de rangoexplorar un tramo de una serie larga