Gráfico de bala
Un indicador frente a su objetivo y rangos.
Definición
Un gráfico de bala muestra un indicador como una barra sobre un fondo de tres tramos —bajo, medio, alto— con una marca vertical en el objetivo. Se lee de un vistazo si el valor llega al objetivo y en qué tramo cae. Se usa en cuadros de mando para poner varios indicadores en poco espacio.
- Datos
- category · value · target · low · y · high
- Buena para
- Responder si cada indicador alcanza su objetivo y si su resultado es bajo, medio o alto.
- Evítala cuando
- Cuando falta el objetivo o alguno de los tramos: el gráfico no se dibuja con la mitad de la referencia.
- Se lee bien
- Entre 1 y 8 elementos; dibuja hasta 150
- 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 métrica: una fila por KPI. Opcional — sin ella la fila sale sin rótulo. |
value | number | El valor real: la barra. Obligatoria (`requireColumn`). |
target | number | El objetivo: la marca vertical. Obligatoria. |
low | number | Tramo BAJO del fondo cualitativo. Obligatoria. |
y | number | Tramo MEDIO del fondo cualitativo. Obligatoria. |
high | number | Tramo ALTO del fondo cualitativo. Obligatoria. |
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
¿Tienes objetivo y tramos para cada indicador?
Si sólo hay una cifra y su objetivo, un anillo de progreso cuenta el avance sin más.
Sí: quédate con gráfico de bala
No: usa Anillo de progreso
¿Los tramos los fijas tú, no el reparto de otras empresas?
Si la referencia son los cuartiles de un grupo de pares, la comparativa con pares los dibuja.
Sí: quédate con gráfico de bala
No: usa Comparativa con pares
¿Son pocos indicadores?
Si son muchas métricas en una misma unidad, unas barras horizontales ordenadas las comparan entre sí.
Sí: quédate con gráfico de bala
No: usa Gráfico de barras horizontales
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('bullet');
spec.data.rows = misFilas; // value, target, low, y, high
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Qué es cada parte?
La barra es el valor real, la marca vertical es el objetivo y las tres franjas del fondo son los tramos bajo, medio y alto.
¿Qué cifras necesita cada fila?
Cinco: el valor, el objetivo y los límites de los tres tramos. El nombre del indicador es opcional, pero sin él la fila sale sin rótulo.
¿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 «comparar cifras»
Análisis de accretion/dilutionefecto de una operación en el beneficio por acción
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- Comparativa con parestu resultado frente al de otras empresas
Gráfico de Bland-Altmanacuerdo entre dos métodos de medición