Gráfico de unidades
Cada símbolo representa una cantidad fija.
Definición
Un gráfico de unidades dibuja una fila por categoría con un cuadrado por cada unidad, sin escala ni redondeo. Se lee contando: la diferencia entre dos filas se ve en cuadrados enteros. Se usa para cantidades pequeñas que conviene contar, como plazas, proyectos o personas.
- Datos
- label · value
- Buena para
- Comparar cantidades pequeñas de forma que se puedan contar una a una.
- Evítala cuando
- Cuando las cantidades son grandes: cientos de cuadrados por fila ya no se cuentan.
- Se lee bien
- Entre 2 y 10 elementos; dibuja hasta 40
- 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é |
|---|---|---|
label · opcional | string | La FILA: una categoría por fila, con su nombre a la izquierda. Sin ella (o sin la de cuenta) `fromExportRows` LANZA nombrando cuál falta y qué columnas trae el spec — antes devolvía [] y la lámina salía vacía con [ok]. |
value · opcional | number | Cuántas unidades. UN cuadrado por unidad, sin redondeo ni escala: un 14 dibuja catorce cuadrados. Un solo alias («count»); si ninguna columna se llama así, se coge la primera numérica. |
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
¿Las cantidades son lo bastante pequeñas para contarlas?
Si son grandes, la longitud de una barra se lee antes que cientos de cuadrados.
Sí: quédate con gráfico de unidades
No: usa Gráfico de barras horizontales
¿Comparas cantidades absolutas?
Si lo que importa es el porcentaje de un todo, una rejilla de cien casillas lo enseña.
Sí: quédate con gráfico de unidades
No: usa Gráfico de waffle
¿Bastan cuadrados como unidad?
Si un icono temático ayuda a reconocer qué se cuenta, conviene un pictograma.
Sí: quédate con gráfico de unidades
No: usa Pictograma
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('unitchart');
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ánto vale cada cuadrado?
Uno. Un 14 dibuja catorce cuadrados, sin redondeo ni escala.
¿Por qué no usar barras?
Porque contar unidades enteras no depende de dónde empiece el eje y permite comprobar la diferencia con el dedo.
¿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 480 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
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