Tabla con sparklines
Cifras con su tendencia al lado.
Definición
Una tabla con sparklines pone una fila por entidad y, junto a su nombre, una línea pequeña con su trayectoria. Se lee fila a fila: hacia dónde va cada una y qué la trajo hasta su último valor. Sirve para revisar muchas tiendas, productos o cuentas a la vez y encontrar las que se mueven distinto del total.
- Datos
- label · value
- Buena para
- Encontrar qué filas se mueven en sentidos opuestos aunque el agregado parezca quieto.
- Evítala cuando
- Cuando hay una sola serie: una tabla de una fila no aporta nada frente a un gráfico de líneas.
- Se lee bien
- Entre 3 y 15 elementos; dibuja hasta 15
- Datos que faltan
- Omite el valor ausente y lo declara aparte.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
label | string | El nombre de la fila: la entidad cuya serie se dibuja. Una fila por entidad. |
value | number | Cada columna numérica restante es un PERIODO de la serie, y el orden en que se escriben ES la serie. Hacen falta al menos tres: con dos puntos hay una recta, no una forma. Las columnas agregadas («Total», «Media», «Último», «Δ», «N») se descartan por nombre. |
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 varias entidades, cada una con su serie?
Si sólo hay una serie, un gráfico de líneas con eje dice más.
Sí: quédate con tabla con sparklines
No: usa Gráfico de líneas
¿Interesa la trayectoria además del último valor?
Si sólo cuenta dónde está cada fila ahora, unas barras horizontales ordenadas lo dicen antes.
Sí: quédate con tabla con sparklines
No: usa Gráfico de barras horizontales
¿Cada fila se lee por su forma, sin comparar alturas entre filas?
Si hace falta comparar niveles entre entidades con una escala común, los pequeños múltiplos comparten eje.
Sí: quédate con tabla con sparklines
No: usa Pequeños múltiplos
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('sparklinetable');
spec.data.rows = misFilas; // label, value
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Cuántos periodos necesito?
Al menos tres columnas de periodo, en el orden de la serie: con dos puntos sale una recta, no una forma.
¿Qué hace con columnas como «Total» o «Media»?
Las descarta por su nombre («Total», «Media», «Último», «Δ», «N») para que no se lean como un periodo más.
¿Subir es bueno?
La tabla no lo dice: ninguna tinta marca la subida como mejor. Y la escala que comparten o no las filas va escrita en la lámina.
¿Qué hace si faltan datos?
Omite el valor ausente y lo declara aparte.
¿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 «cómo cambia en el tiempo»
Gráfico de áreasuna medida en el tiempo con el volumen destacado
Gráfico de control por atributostasa de defectos de lotes frente a sus límites
Barras y línea combinadasuna cifra absoluta junto a su tasa
Bandas de Bollingerprecio frente a su rango habitual de variación
Gráfico con selector de rangoexplorar un tramo de una serie larga
Burndowntrabajo pendiente frente al plan de un sprint