Serie temporal anotada
Una serie con los hechos que explican sus cambios.
Definición
Una serie temporal anotada dibuja una medida a lo largo del tiempo y planta sobre la curva los hechos que pudieron moverla, con bandas sombreadas para las etapas. Cada hito va sobre una observación medida, nunca sobre una fecha interpolada, así que se comprueba a la vista si el cambio llegó antes o después del hecho. Sirve para explicar un cambio de nivel en ventas, costes o incidencias.
- Datos
- x · value · label · group
- Buena para
- Comprobar si un cambio en la serie coincide con lo que pasó al lado: una campaña, una renegociación, un cambio de proceso.
- Evítala cuando
- Cuando hay que comparar varias series: admite una sola columna numérica.
- Se lee bien
- Entre 3 y 400 elementos; dibuja hasta 400
- Datos que faltan
- Se niega a dibujar y dice qué valor falta.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x | date | La fecha de cada observación. Una fila por observación; el orden lo pone la fecha, no el fichero. ISO («2025-04-01») es lo más seguro: se ancla en UTC. |
value | number | El valor medido en esa fecha: la curva a la que se anclan los hitos. UNA sola columna numérica — con dos, la figura falla nombrándolas en vez de elegir a cuál atribuir tus hitos. |
label · opcional | string | El hito imputado a esa observación, si lo hay. Va en la MISMA fila que el dato al que se le imputa, porque el marcador se planta sobre la curva y su altura tiene que ser un número medido. Se acepta con los nombres «Hito», «Evento», «Milestone»… |
group · opcional | string | La etapa a la que pertenece esa observación, si pertenece a alguna. Las bandas sombreadas son las RACHAS contiguas de este valor: dos meses con el mismo nombre y un mes en blanco entre medias son dos bandas, no una con un agujero. Se acepta como «Etapa», «Fase», «Periodo»… |
Tamaños
Ancha por necesidad
Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.
A menos de 480 px el motor se niega y explica por qué: annotated-timeseries: 3 de 6 llamadas no caben sin pisar la curva ni otra llamada: «Congelación de nuevas instancias», «Entra el equipo de datos», «Almacén migr
. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.
Cuándo usarla
Tres preguntas antes de elegirla
¿Hay hechos que explicar sobre la serie?
Si la serie se cuenta sola, sin hitos ni etapas, basta un gráfico de líneas.
Sí: quédate con serie temporal anotada
No: usa Gráfico de líneas
¿Es una sola medida?
Si son varias series en escalas distintas, las líneas en base 100 las comparan desde el mismo punto de partida.
Sí: quédate con serie temporal anotada
No: usa Líneas en base 100
¿Importa la curva y no solo las fechas?
Si basta con ordenar los hechos en el tiempo sin medir nada, una línea de hitos es más limpia.
Sí: quédate con serie temporal anotada
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('annotated-timeseries');
spec.data.rows = misFilas; // x, value
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Dónde pongo el hito?
En la misma fila que la observación a la que se atribuye: el marcador se planta sobre la curva y su altura es la cifra medida ese día.
¿Cómo se dibujan las etapas?
Cada racha seguida de filas con el mismo nombre de etapa es una banda. Si hay un periodo en blanco entre medias, salen dos bandas, no una con un agujero.
¿Qué formato de fecha conviene?
ISO, como «2025-04-01». El orden lo ponen las fechas, no el orden de las filas.
¿Qué hace si faltan datos?
Se niega a dibujar y dice qué valor falta.
¿Cómo se ve en el móvil?
A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.
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