Gráfico de horizonte
Muchas series largas en poco alto.
Definición
Un gráfico de horizonte pliega cada serie en un carril estrecho: la curva se corta en bandas que se superponen y la intensidad del color sustituye a la altura. Así caben muchas series largas en poco espacio y se comparan sus perfiles —cuándo suben, cuándo caen— de un vistazo. Se usa para monitorizar decenas de métricas, servidores o mercados a la vez.
- Datos
- x · series
- Buena para
- Comparar el perfil en el tiempo de muchas series apiladas en poco alto.
- Evítala cuando
- Cuando hay que leer o comparar el nivel exacto de las series: aquí se renuncia al eje.
- Se lee bien
- Entre 10 y 200 elementos; dibuja hasta 800
- 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 | string | El periodo, común a todas las series. Sin columna de texto no hay carriles y la pieza devuelve []. |
series · opcional | number | CADA columna numérica distinta de la de periodo es un carril, y su nombre es el rótulo. No hay formato largo: no se lee ninguna columna de nombre de serie. |
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
¿Te importa más el perfil de cada serie que su valor exacto?
Si hay que leer cifras sobre un eje, los pequeños múltiplos mantienen la altura de cada serie.
Sí: quédate con gráfico de horizonte
No: usa Pequeños múltiplos
¿Son muchas series, más de cinco o seis?
Con pocas series, todas caben en un gráfico de líneas con un eje común y se leen sin aprender a desplegar bandas.
Sí: quédate con gráfico de horizonte
No: usa Gráfico de líneas
¿Quieres conservar la forma de la curva dentro de cada carril?
Si basta con un tono por periodo, la lasaña pinta cada serie como una fila de celdas de color, sin curva.
Sí: quédate con gráfico de horizonte
No: usa Lasaña
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('horizon');
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
¿Cómo se leen las bandas?
Cada banda dobla la escala de la anterior y se pinta encima con un tono más intenso. Cuanto más oscuro el tramo, más alto el valor; la altura del carril es siempre la misma.
¿Puedo comparar el nivel de dos carriles?
No con seguridad: lo comparable es el perfil —cuándo sube y cuándo baja cada serie—, no a qué altura está una frente a otra.
¿Qué forma tiene la tabla?
Ancha: una columna de periodo en texto y una columna numérica por serie, cuyo nombre rotula el carril. No se lee una columna con el nombre de la serie.
¿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 360 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