Sparkline
Tendencia mínima dentro de una frase o tabla.
Definición
Una sparkline es una línea mínima, sin eje ni cifras, que enseña la forma de una serie en poco espacio. Aquí se dibujan varias en paneles con un eje común, una por indicador. Sirve para ver de un golpe qué indicadores suben, cuáles bajan y cuáles se mueven juntos.
- Datos
- x · series
- Buena para
- Ver a la vez la tendencia de varios indicadores y cuáles se mueven juntos.
- Evítala cuando
- Cuando hay que leer cuánto vale cada punto: sin eje ni cifras, sólo queda la forma.
- Se lee bien
- Entre 5 y 100 elementos; dibuja hasta 1000
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: resumen en texto · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x · opcional | number | El eje común de los seis paneles: la PRIMERA columna del fichero, se llame como se llame. No se busca por nombre ni se comprueba que sea temporal. |
series · opcional | number | Un panel por cada columna a partir de la segunda; el nombre de la columna es el rótulo del panel. |
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
¿Importa la forma más que el valor?
Si hay que leer cifras concretas, un gráfico de líneas con eje las da.
Sí: quédate con sparkline
No: usa Gráfico de líneas
¿Las series van solas, sin una tabla de cifras al lado?
Si cada tendencia acompaña a su último valor en una fila, conviene la tabla con sparklines.
Sí: quédate con sparkline
No: usa Tabla con sparklines
¿Basta con ver la forma de cada serie por separado?
Si hay que comparar cuánto ha crecido cada una desde el mismo punto de partida, las líneas en base 100 las ponen en una escala común.
Sí: quédate con sparkline
No: usa Líneas en base 100
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('sparkline');
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 lleva eje?
Porque la pregunta que responde es cuáles se mueven y cómo, no cuánto valen. Si necesitas la cifra, es otro gráfico.
¿Qué columna hace de eje común?
La primera del fichero, se llame como se llame; no se comprueba que sea una fecha. Cada columna a partir de la segunda es un panel, rotulado con su nombre.
¿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 «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