Gráfico de piruleta
Comparar valores con menos tinta que barras.
Definición
Un gráfico de piruleta pone una categoría por fila y marca su valor con un punto unido al cero por un tallo fino. Se lee como una barra, por la posición del punto, con menos tinta. Sirve para ordenar o comparar bastantes categorías sin que el peso de las barras domine la página.
- Datos
- label · value
- Buena para
- Comparar y ordenar una cifra por categoría cuando hay muchas filas.
- Evítala cuando
- Cuando cada categoría tiene dos o más cifras que comparar: el punto sólo lleva una.
- Se lee bien
- Entre 2 y 25 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é |
|---|---|---|
label · opcional | string | La banda: columns.category, label o y. Sin binding se conserva la inferencia; sin columna de texto no dibuja. |
value · opcional | number | La posición del punto: columns.value o x. El tallo parte de cero. Conserva el lienzo 0..100 para valores dentro de ese intervalo y amplía el dominio para otras magnitudes, incluidos negativos. Vacíos siguen zero-fill; valores presentes no finitos 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
¿Hay una sola cifra por categoría?
Si cada categoría tiene un antes y un después, dos puntos unidos enseñan el cambio.
Sí: quédate con gráfico de piruleta
No: usa Gráfico de mancuernas
¿El cero es la referencia que importa?
Si las diferencias son pequeñas y lejos del cero, conviene leer sólo la posición del punto sin tallo.
Sí: quédate con gráfico de piruleta
No: usa Gráfico de puntos de Cleveland
¿Basta con comparar los valores entre sí?
Si cada categoría tiene una meta propia, hace falta dibujarla junto al valor.
Sí: quédate con gráfico de piruleta
No: usa Gráfico de bala
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('lollipop');
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
¿Por qué no usar barras?
Dicen lo mismo: una cifra contra el cero. La piruleta quita el cuerpo de la barra y deja el punto, que es donde está el valor.
¿Admite valores negativos?
Sí: el tallo sale siempre del cero y el eje se amplía para incluir valores por debajo.
¿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 420 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «quién va primero»
- Gráfico de puntos de Clevelandcomparar valores ordenados con poca tinta
Gráfico de rankingcambios de puesto a lo largo del tiempo
Importancia de variablesqué variables pesan más en un modelo
Gráfico de barras horizontalescomparar categorías con nombres largos
Cuadro de eliminatoriascruces y avance de un torneo
Curva de la ballenaqué clientes aportan o restan beneficio