RSL Gantt Chart Playground

Interactive project timeline visualization with zero dependencies

Example 1: Basic Gantt Chart

Create a Gantt chart from an HTML table with data-rsl-gantt

Task Start End Progress
Website Redesign 2024-12-01 2024-12-31 45
Design Mockups 2024-12-01 2024-12-10 100
Frontend Development 2024-12-11 2024-12-20 60
Backend Integration 2024-12-15 2024-12-25 20
Launch 2024-12-31 2024-12-31 0

Example 2: JavaScript API

Create and control Gantt charts programmatically

Example 3: Colorful Timeline (Read-only)

A read-only Gantt chart with custom task colors

Phase Start End Progress
Research & Discovery 2024-11-01 2024-11-15 100
Design Phase 2024-11-16 2024-12-05 100
Development Sprint 1 2024-12-06 2024-12-20 75
Development Sprint 2 2024-12-21 2025-01-10 30
Testing & QA 2025-01-11 2025-01-20 0
Deployment & Training 2025-01-21 2025-01-31 0
Go Live 2025-02-01 2025-02-01 0

Example 4: Event Planning Timeline

Plan events with milestones and dependencies