Diagrama de Gantt

Tareas y plazos de un proyecto.

Definición

Un diagrama de Gantt pone cada tarea como una barra que va de su fecha de inicio a su fecha de fin sobre un calendario. Se lee cómo se solapan las tareas y qué ocupa cada tramo del plazo. Se usa para planificar y seguir proyectos.

Editar con tus datos SVG Spec JSON

Datos: start · end · label · group · value
Buena para: Enseñar qué tareas coinciden en el tiempo y cómo se reparte el plazo de un proyecto.
Evítala cuando: Cuando lo que importa son las dependencias entre tareas y no sus fechas.
Se lee bien: Entre 2 y 20 elementos; dibuja hasta 50
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é
`start` · opcional	date	Inicio del intervalo, cadena ISO. Sin una columna que case por nombre la pieza FALLA con la cifra (`requireColumn`): antes `findColumn` caía a la primera columna de texto y resolvía inicio y fin a la MISMA columna, y salía un marco vacío con código 0.
`end` · opcional	date	Fin del intervalo. Es lo que hace barra a la marca: sin él no hay anchura que dibujar, y por eso se exige por nombre y tiene que ser una columna DISTINTA de la de inicio.
`label` · opcional	string	Nombre de la tarea, en el canalón izquierdo. Ausente, la barra se dibuja sin rótulo.
`group` · opcional	string	La fase o carril. Es lo que consume el eje `lanes` de `variants`.
`value` · opcional	number	Avance en PORCENTAJE (se divide entre 100, data.ts:97). Ausente vale 0, y 0 se dibuja como «nada hecho».

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 · 528 × 570 px

Escritorio · 848 × 642 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Las tareas duran, con un inicio y un fin?

Si son fechas puntuales sin duración, un gráfico de hitos las pone en la línea del tiempo.

Sí: quédate con diagrama de gantt

No: usa Línea de hitos

¿Importa cómo se solapan en el calendario?

Si lo que importa es qué tarea depende de cuál, una red PERT dibuja las dependencias.

Sí: quédate con diagrama de gantt

No: usa Red PERT

¿Quieres ver el plan tarea a tarea?

Si basta con saber cuánto trabajo queda frente al plazo, un burndown lo resume en una línea.

Sí: quédate con diagrama de gantt

No: usa Burndown

Código

La misma pieza, con tus datos

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

const spec = await getPreset('gantt');
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 necesita?

Una de inicio y otra de fin, en fecha ISO, que se reconozcan por su nombre y sean distintas. Sin ellas la pieza falla en vez de dibujar un marco vacío.

¿Cómo se marca el avance?

Con una columna en porcentaje. Si no la traes vale 0 y la barra se dibuja como nada hecho.

¿Puedo agrupar tareas por fases?

Sí, con una columna de fase o carril.

¿Qué hace si faltan datos?

Se niega a dibujar y dice qué valor falta.

¿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