Gráfico de mancuernas
Cambio entre dos valores por categoría.
Definición
El gráfico de mancuernas une, en cada categoría, el valor inicial y el final con una barra entre dos puntos. La longitud dice cuánto cambió y el orden de los extremos, en qué sentido. Sirve para comparar dos años, dos mediciones o un antes y un después en varias categorías.
- Datos
- category · start · end · delta
- Buena para
- Comparar el tamaño y la dirección del cambio entre dos cortes, categoría a categoría.
- Evítala cuando
- Cuando hay más de dos momentos: la mancuerna solo une dos extremos.
- Se lee bien
- Entre 2 y 20 elementos; dibuja hasta 3000
- 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 fila. Opcional: sin ella las mancuernas salen sin rótulo, pero se dibujan. |
start | number | El extremo inicial. OBLIGATORIO (requireColumn): antes caía a «la primera numérica» y dos columnas con otro nombre pintaban los dos extremos en el mismo sitio, sin longitud y sin aviso. |
end | number | El extremo final. OBLIGATORIO por el mismo motivo. |
delta · opcional | number | El cambio, si se declara. Es lo único opcional de los cuatro: si no viene, se calcula como final − inicial. |
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
¿Hay exactamente dos momentos por categoría?
Si hay más de dos cortes, una línea por categoría enseña la trayectoria entera.
Sí: quédate con gráfico de mancuernas
No: usa Gráfico de líneas
¿Importa el tamaño del cambio en cada categoría?
Si lo que cuenta es cómo se reordenan las categorías entre los dos momentos, el gráfico de pendiente enseña los cruces.
Sí: quédate con gráfico de mancuernas
No: usa Gráfico de pendiente
¿Basta con dos puntos unidos?
Si la dirección del cambio tiene que leerse sin leyenda, un gráfico de flechas la dibuja en la propia marca.
Sí: quédate con gráfico de mancuernas
No: usa Gráfico de flechas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('dumbbell');
spec.data.rows = misFilas; // start, end
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Qué columnas son obligatorias?
El inicial y el final, por nombre. Sin ellos no dibuja: una mancuerna sin longitud diría que no hubo cambio. La categoría es opcional.
¿Hace falta dar el cambio?
No. Si no viene, se calcula como final menos inicial.
¿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?
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 «comparar cifras»
- Gráfico de flechascambio con dirección entre dos momentos
Análisis de accretion/dilutionefecto de una operación en el beneficio por acción
Gráfico de barras verticalescomparar valores entre pocas categorías
Serie con banda de referenciatu serie frente al rango de sus pares
Comparativa con parestu resultado frente al de otras empresas
Gráfico de Bland-Altmanacuerdo entre dos métodos de medición