GitLab Gantt Chart Component Demo

This page demonstrates the GitLab Gantt Chart component that can fetch and display GitLab issues in a Gantt chart timeline format.

Basic Examples

Weekly View Example

Loading GitLab Gant data...

Daily View Example (Default)

Loading GitLab Gant data...

Props Reference

Prop	Type	Default	Description
gitlabUrl	string	-	GitLab instance URL (fallback only)
apiToken	string	-	Deprecated and ignored (proxy is used)
projectId	string/number	-	Project ID or path
startDate	string	Today	Start date (ISO format)
durationMonths	number	3	Timeline duration in months
labels	string	-	Comma-separated labels filter
milestones	string	-	Comma-separated milestones filter
autoMilestones	boolean	false	Auto-filter by period milestones
chartTitle	string	-	Optional chart title
showLabels	boolean	false	Show labels column
showMilestones	boolean	false	Show milestones row
groupBy	string	-	Group by field (e.g., 'milestone ASC')
state	string	'opened'	Issue state filter
filterByStartDueDate	boolean	false	Filter issues by start and due date presence
showOnlyWeeks	boolean	false	Show weeks instead of individual days

Features

Timeline Visualization

• Day Headers: German single-letter day names (M, D, M, D, F, S, S)
• Week Headers: Week numbers (KW 21, KW 22) with date range tooltips (when showOnlyWeeks={true})
• Weekend Highlighting: Weekends shown in red (day view only)
• Current Indicators: Today marked with red dotted line (day view), current week highlighted with yellow background in header and red vertical line in timeline rows (week view). When current week intersects with issue work periods, both blue progress line and red current week line are shown together.
• Progress Bars: Blue horizontal line for active issue periods

Date Handling

• Start Date: Uses issue start_date or defaults to today
• Due Date: Uses issue due_date or defaults to start_date + 6 days
• Plan Date Override: Extracts dates from issue description patterns
  • _PLANSTART:YYYY-MM-DD_ overrides start date
  • _PLANDUE:YYYY-MM-DD_ overrides due date
• Sorting: Issues sorted by start date, then alphabetically

Responsive Design

• Desktop: Full Gantt chart with horizontal scrolling
• Mobile: Vertical layout optimized for small screens
• Fixed Columns: Task names stay visible during scroll