GanttChart
Interactive Gantt chart for project scheduling with task dependencies, milestone markers, drag-to-resize bars, and timeline zoom
GanttChart Component
Timeline planning for projects, releases, and cross-team execution.
Basic Usage
Render a simple project plan with three tasks.
Implementation Notes
- • Start with a few tasks to validate visual flow.
- • Use clear task names for cross-team readability.
- • Keep date ranges close to real project cadence.
Normal Usage
Constrain chart window for a focused sprint view.
Implementation Notes
- • Use focused windows for sprint-level planning.
- • Keep one source of truth for task arrays.
- • Use clear naming for alternate timeline views.
Advanced Usage
Tune row height and custom coloring for denser roadmaps.
Current row height: 42px
Implementation Notes
- • Row density should match data volume and viewport height.
- • Use custom task colors for stream ownership.
- • Keep dependency chains explicit in data models.
Real-Life Use Cases
Used for release coordination, campaign planning, and migration timelines.
Product Release Roadmap
Implementation Sprint
Implementation Notes
- • Use separate boards for sprint and release cadences.
- • Keep dependency assumptions documented for handoffs.
- • Share timeline snapshots during planning rituals.
Related Components
View allCollapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
User avatar with image loading, fallback text generation, status indicators, and shape variants
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Status indicator with variant system, dot mode, positioning, and pulsing animation support