Build interactive project timelines with the V2 JSON Layout API
The Gantt chart component can be rendered declaratively using the V2 JSON Layout API with type: "gantt".
Pass your tasks array directly in the configuration and the component handles the rest.
A simple project timeline with tasks, dependencies, and progress tracking. Tasks are defined as an array in the JSON configuration.
const config = {
version: 2,
layoutId: "project-gantt",
breakpoints: { xs: 1 },
items: [{
content: {
type: "gantt",
zoom: "week",
height: "400px",
tasks: [
{ id: "1", name: "Planning", start: "2024-12-01", end: "2024-12-05", progress: 100, color: "blue" },
{ id: "2", name: "Design", start: "2024-12-06", end: "2024-12-12", progress: 80, depends: "1", color: "purple" },
{ id: "3", name: "Development", start: "2024-12-13", end: "2024-12-23", progress: 40, depends: "2", color: "green" },
{ id: "4", name: "Testing", start: "2024-12-24", end: "2024-12-30", progress: 0, depends: "3", color: "orange" },
{ id: "5", name: "Launch", start: "2024-12-31", end: "2024-12-31", progress: 0, type: "milestone", depends: "4" }
]
}
}]
};
RSL.JSONLayout.renderLayout('#container', config);A non-editable timeline for displaying project status. Set editable: false to disable drag-and-drop editing.
const config = {
version: 2,
layoutId: "readonly-gantt",
breakpoints: { xs: 1 },
items: [{
content: {
type: "gantt",
zoom: "month",
editable: false,
height: "350px",
tasks: [
{ id: "p1", name: "Research Phase", start: "2024-11-01", end: "2024-11-15", progress: 100, color: "blue" },
{ id: "p2", name: "Design Phase", start: "2024-11-16", end: "2024-12-05", progress: 100, color: "purple" },
{ id: "p3", name: "Development", start: "2024-12-06", end: "2024-12-25", progress: 65, color: "teal" },
{ id: "p4", name: "QA Testing", start: "2024-12-26", end: "2025-01-10", progress: 20, color: "orange" },
{ id: "m1", name: "Release", start: "2025-01-15", end: "2025-01-15", type: "milestone" }
]
}
}]
};
RSL.JSONLayout.renderLayout('#container', config);Organize tasks into groups with parent-child relationships using type: "group" and parentId.
const config = {
version: 2,
layoutId: "hierarchical-gantt",
breakpoints: { xs: 1 },
items: [{
content: {
type: "gantt",
zoom: "week",
height: "450px",
tasks: [
// Parent group
{ id: "g1", name: "Website Redesign", type: "group", start: "2024-12-01", end: "2024-12-31", progress: 55 },
// Child tasks
{ id: "t1", name: "Wireframes", parentId: "g1", start: "2024-12-01", end: "2024-12-07", progress: 100, color: "blue" },
{ id: "t2", name: "UI Design", parentId: "g1", start: "2024-12-08", end: "2024-12-14", progress: 80, depends: "t1", color: "purple" },
{ id: "t3", name: "Frontend Dev", parentId: "g1", start: "2024-12-15", end: "2024-12-25", progress: 40, depends: "t2", color: "green" },
{ id: "t4", name: "Backend API", parentId: "g1", start: "2024-12-18", end: "2024-12-28", progress: 30, color: "teal" },
{ id: "m1", name: "Launch", type: "milestone", start: "2024-12-31", end: "2024-12-31", depends: "t3,t4" }
]
}
}]
};
RSL.JSONLayout.renderLayout('#container', config);Render multiple Gantt charts in a responsive grid layout for comparing different projects or teams.
const config = {
version: 2,
layoutId: "multi-gantt",
breakpoints: { xs: 1, lg: 2 },
gap: "2rem",
items: [
{
content: {
type: "card",
title: "Team Alpha",
customContent: {
type: "gantt",
zoom: "week",
editable: false,
showToolbar: false,
height: "250px",
tasks: [
{ id: "a1", name: "Sprint 1", start: "2024-12-01", end: "2024-12-14", progress: 100, color: "blue" },
{ id: "a2", name: "Sprint 2", start: "2024-12-15", end: "2024-12-28", progress: 60, color: "green" }
]
}
}
},
{
content: {
type: "card",
title: "Team Beta",
customContent: {
type: "gantt",
zoom: "week",
editable: false,
showToolbar: false,
height: "250px",
tasks: [
{ id: "b1", name: "Phase 1", start: "2024-12-01", end: "2024-12-10", progress: 100, color: "purple" },
{ id: "b2", name: "Phase 2", start: "2024-12-11", end: "2024-12-31", progress: 45, color: "orange" }
]
}
}
}
]
};
RSL.JSONLayout.renderLayout('#container', config);