Línea de hitos

Fechas clave de un proyecto.

Definición

Una línea de hitos dibuja sobre un eje de fechas las fases de un plan como tramos y los hitos como instantes. Se lee dónde caen los hitos dentro de las fases y en qué estado está cada uno. Sirve para presentar el calendario de un proyecto o un lanzamiento.

Editar con tus datos SVG Spec JSON

Datos: category · label · start · end · value
Buena para: Enseñar un plan con sus fases y los momentos clave que caen en ellas.
Evítala cuando: Cuando hay varios frentes que dependen unos de otros: la línea de hitos no dibuja esperas ni dependencias.
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é
`category` · opcional	string	Qué es la fila: «phase» (o vacío) o «milestone». No es decorativa: es la que reparte las filas entre las dos capas del dibujo, y su vocabulario es CERRADO: cualquier otro valor FALLA con la cifra en vez de dejar la fila fuera de las dos listas.
`label` · opcional	string	El nombre de la fase o del hito.
`start` · opcional	date	Inicio de la fase (o instante del hito). Una fecha ilegible NO se sustituye por hoy —eso daría un SVG distinto cada día— ni se dibuja a NaN: la pieza se NIEGA nombrando la fila y cuántas son.
`end` · opcional	date	Fin de la fase. Los hitos no lo usan.
`value` · opcional	string	Estado: «complete», «active» o «upcoming». Cualquier otra cosa se lee como «upcoming» sin avisar.

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.

Móvil · 408 × 338 px

Escritorio · 848 × 302 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Es un único frente?

Si hay varios frentes que se esperan en puntos compartidos, cada uno va en su línea.

Sí: quédate con línea de hitos

No: usa Mapa de metro

¿Son pocas fases?

Si son muchas tareas con inicio y fin, cada una necesita su fila.

Sí: quédate con línea de hitos

No: usa Diagrama de Gantt

¿Las fechas son reales?

Si es un esquema de pasos sin calendario, no hace falta eje de fechas.

Sí: quédate con línea de hitos

No: usa Pasos e hitos

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('milestone');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →