Barras agrupadas y apiladas
Grupos comparables con partes dentro.
Definición
Las barras agrupadas y apiladas ponen en cada categoría varias columnas juntas, y cada columna está partida en tramos. El grupo lo dice la posición y el color dice solo el reparto. Se usa para enseñar que dos totales parecidos pueden estar hechos de cosas distintas.
- Datos
- category · group · value
- Buena para
- Comparar la composición de varias columnas dentro de cada categoría.
- Evítala cuando
- Cuando solo te importan los totales o hay tantos grupos que el rótulo bajo cada columna deja de leerse.
- Se lee bien
- Entre 4 y 12 elementos; dibuja hasta 20
- Datos que faltan
- Se niega a dibujar y dice qué valor falta.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
category | string | La banda del eje X: la categoría dentro de la cual van los grupos. Una fila por pareja (categoría, grupo). |
group | string | Cuál de las columnas que van una al lado de otra dentro de la banda. Sin nombre reconocible se acepta como la ÚNICA columna de texto que quede aparte de la categoría; con dos o más candidatas, falla. |
value | number | Cada columna numérica restante es un TRAMO del apilado, y el orden en que se escriben ES el orden de la pila, de la base hacia arriba. Hacen falta al menos dos. Las columnas de total o de base («Total», «N», «Suma») se descartan por nombre. |
Tamaños
Ancha por necesidad
Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.
A menos de 480 px sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.
Cuándo usarla
Tres preguntas antes de elegirla
¿Además de comparar grupos te importa de qué están hechos?
Si cada columna es una sola cifra sin repartir, unas barras agrupadas son más limpias.
Sí: quédate con barras agrupadas y apiladas
No: usa Barras agrupadas
¿Hay más de un grupo dentro de cada categoría?
Si cada categoría tiene una sola columna, unas barras apiladas simples bastan.
Sí: quédate con barras agrupadas y apiladas
No: usa Barras apiladas
¿Basta con comparar alturas, sin que el ancho signifique nada?
Si el peso de cada categoría también cuenta, un marimekko lo da con el ancho.
Sí: quédate con barras agrupadas y apiladas
No: usa Gráfico de Marimekko
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('groupedstackedbar');
spec.data.rows = misFilas; // category, group, value
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿En qué orden van los tramos?
En el orden de las columnas del fichero, de la base hacia arriba. Hacen falta al menos dos.
¿Por qué a veces no dibuja?
Si el rótulo bajo la columna no se puede leer, dos columnas con los mismos colores serían indistinguibles, así que la pieza se niega a dibujar.
¿Qué pasa con una columna de total?
Las columnas llamadas «Total», «N» o «Suma» se descartan por su nombre: no son un tramo.
¿Qué hace si faltan datos?
Se niega a dibujar y dice qué valor falta.
¿Cómo se ve en el móvil?
A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.
Relacionadas
Otras formas de responder «partes de un todo»
Anidamiento conceptualconceptos contenidos unos dentro de otros
Gráfico de anilloreparto de un total en pocas partes
Matriz de puntosresultados de casos individuales en cuadrícula
Descomposición DuPontdescomponer el ROE en sus factores
Gráfico de carámbanosjerarquía y pesos en bloques por niveles
Árbol con sangríasjerarquía detallada con su valor