Gráfico de escalones
Valores que cambian a saltos.
Definición
El gráfico de escalones dibuja un valor que se mantiene plano hasta que cambia de golpe, en lugar de unir los puntos con una línea inclinada. Cada escalón dice cuándo cambió el valor y cuánto duró cada nivel. Se usa para precios, tarifas, tipos de interés o plantillas que cambian por decisión.
- Datos
- label · x · value
- Buena para
- Enseñar cuándo cambió un valor y cuánto tiempo se mantuvo cada nivel.
- Evítala cuando
- Cuando el valor cambia de forma continua: los escalones sugieren saltos que no ocurrieron.
- Se lee bien
- Entre 3 y 100 elementos; dibuja hasta 1000
- 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 | El rótulo del punto (alias por defecto de `findStringColumn`, con caída a la primera columna de texto). Opcional: sin él la pieza dibuja igual. |
x · opcional | number | El instante del escalón: la PRIMERA columna numérica, sin buscarla por nombre. |
value · opcional | number | El nivel que se mantiene hasta el escalón siguiente: la SEGUNDA columna numérica. |
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
¿El valor se mantiene hasta que alguien lo cambia?
Si varía de forma continua entre medidas, un gráfico de líneas es lo honrado.
Sí: quédate con gráfico de escalones
No: usa Gráfico de líneas
¿Es un nivel numérico, no un estado con nombre?
Si lo que cambia es un estado («activo», «parado»), la línea de estados lo pinta por tramos.
Sí: quédate con gráfico de escalones
No: usa Línea de estados
¿Importan el nivel y su duración, no sólo los hitos que los provocaron?
Si sólo interesan las fechas de los cambios, basta una línea de hitos.
Sí: quédate con gráfico de escalones
No: usa Línea de hitos
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('stepline');
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
¿Qué columnas usa?
La primera columna numérica es el instante y la segunda el nivel. Una columna de texto opcional rotula cada punto.
¿Por qué no unir los puntos con una línea normal?
Porque la recta inventaría valores intermedios que nunca existieron: entre dos cambios, el precio era el mismo.
¿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