Gráfico de flechas
Cambio con dirección entre dos momentos.
Definición
Un gráfico de flechas dibuja, para cada categoría, una flecha que va del valor del primer corte al del segundo. La dirección dice si sube o baja y la longitud, cuánto, porque el cero está siempre en el eje. Se usa para comparar el cambio entre dos fechas en regiones, segmentos o productos.
- Datos
- category · start · end
- Buena para
- Ver qué categorías suben, cuáles bajan y cuánto entre dos momentos.
- Evítala cuando
- Cuando importa lo que pasó entre los dos cortes: la flecha une el inicio y el final y no dice nada del camino.
- Se lee bien
- Entre 2 y 20 elementos; dibuja hasta 40
- 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 · opcional | string | La fila: una flecha por categoría. Sin ella las flechas se dibujan igual, pero sin rótulo. |
start | number | Corte INICIAL — de dónde sale la flecha. Obligatoria de verdad: `requireColumn` (data.ts:158). |
end | number | Corte FINAL — a dónde llega la punta. Obligatoria: `requireColumn` (data.ts:162). |
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
¿Hay un antes y un después?
Si los dos valores no son momentos sino dos grupos —plan y real, dos regiones—, un gráfico de mancuernas los compara sin sugerir dirección.
Sí: quédate con gráfico de flechas
No: usa Gráfico de mancuernas
¿Basta con dos cortes?
Si hay varios periodos y el camino importa, un gráfico de líneas lo enseña completo.
Sí: quédate con gráfico de flechas
No: usa Gráfico de líneas
¿Son unas pocas categorías?
Si son muchas y solo interesa el tamaño y el signo del cambio, unas barras divergentes con la diferencia se leen más rápido.
Sí: quédate con gráfico de flechas
No: usa Barras divergentes
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('arrow-plot');
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?
Las dos numéricas: el corte inicial, de donde sale la flecha, y el final, donde llega la punta. Sin la columna de categoría las flechas se dibujan, pero sin rótulo.
¿Por qué el eje empieza en cero?
Para que la longitud de la flecha sea el salto real y no un efecto de recortar la escala.
¿Qué hace si faltan datos?
Se niega a dibujar y dice qué valor falta.
¿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»
- Gráfico de mancuernascambio entre dos valores por categoría
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