Barras agrupadas
Varias series comparadas por categoría.
Definición
Las barras agrupadas ponen, para cada categoría, varias barras juntas, una por serie. Se lee dentro de cada grupo —real frente a presupuesto frente a previsión— y entre grupos solo series iguales. Se usa para comparar unas pocas medidas a la vez en varias categorías.
- Datos
- category · series
- Buena para
- Comparar dos o tres series dentro de cada categoría.
- Evítala cuando
- Cuando importa el total de cada categoría: las barras agrupadas no lo enseñan.
- Se lee bien
- Entre 2 y 10 elementos; dibuja hasta 300
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
category · opcional | string | La banda: columns.category (aliases x/label) selecciona el campo exacto; sin binding se infiere por nombre. Un grupo por fila. Un binding numérico se muestra como rótulo, nunca como otra serie. |
series · opcional | number | columns.series (aliases value/y) selecciona UNA medida exacta. Sin binding se conservan las TRES primeras columnas numéricas por orden y el límite heredado: una cuarta se ignora. La leyenda usa sus nombres; la unión fija su identidad entre frames. Admite valores finitos negativos desde cero; ausencias se rellenan con cero y valores presentes inválidos fallan. |
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
¿Comparas series dentro de cada grupo y no un total?
Si importa el total del grupo y cómo se reparte, unas barras apiladas lo enseñan.
Sí: quédate con barras agrupadas
No: usa Barras apiladas
¿Comparas más de dos valores por categoría?
Si son solo dos —antes y después, real y presupuesto—, una mancuerna enseña la diferencia directamente.
Sí: quédate con barras agrupadas
No: usa Gráfico de mancuernas
¿Son tres series o menos?
Con más series, unos múltiplos pequeños dan a cada una su panel.
Sí: quédate con barras agrupadas
No: usa Pequeños múltiplos
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('groupedbar');
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
¿Cuántas series admite?
Si no eliges una medida concreta, toma las tres primeras columnas numéricas por orden; una cuarta se ignora.
¿Admite valores negativos?
Sí: las barras arrancan del cero hacia arriba o hacia abajo.
¿Cuántas categorías caben?
Se lee bien entre 2 y 10 grupos.
¿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 «comparar cifras»
Análisis de accretion/dilutionefecto de una operación en el beneficio por acción
Comparativa con parestu resultado frente al de otras empresas
Gráfico de flechascambio con dirección entre dos momentos
Gráfico de barras verticalescomparar valores entre pocas categorías
Serie con banda de referenciatu serie frente al rango de sus pares
Gráfico de Bland-Altmanacuerdo entre dos métodos de medición