Photonix

GanttChart

Visualizes project schedule and dependencies.

Preview

June 2026
Month
00:50
Task Name
01Mon
02Tue
03Wed
04Thu
05Fri
06Sat
07Sun
08Mon
09Tue
10Wed
11Thu
12Fri
13Sat
14Sun
15Mon
16Tue
17Wed
18Thu
19Fri
20Sat
21Sun
22Mon
23Tue
24Wed
25Thu
26Fri
27Sat
28Sun
29Mon
30Tue
Project Planning
Project Planning
12d • Jun 1 - Jun 5
Design Phase
Design Phase
21d • Jun 3 - Jun 10
Development
Development
36d • Jun 8 - Jun 20
Client Meeting
Client Meeting
0d • Jun 12 - Jun 12
Testing
Testing
21d • Jun 18 - Jun 25
Usage
import { GanttChart } from '@photonix/ultimate';

<GanttChart tasks={taskList} />

Component API

GanttChart

Prop
Type
Default
Description
tasks
GanttTask[]
-
defaultView
GanttViewMode
'Month'
className
string
-
style
React.CSSProperties
-
workingHoursPerDay
number
8
Number of working hours in a day for duration calculation (e.g. 8). Defaults to 24.
hideTitle
boolean
false
Hide the date/time title (e.g. "January 2026"). Actions remain visible. Defaults to false.
headerExtraContent
React.ReactNode
-
Extra content to display in the header (e.g. custom filters)
borderless
boolean
false
If true, removes left, right, and bottom borders for use inside other containers.
viewMode
GanttViewMode
-
External view mode control
onViewModeChange
((view: GanttViewMode) => void)
-
Callback when view mode changes
currentDate
Date
-
External date control
onDateChange
((date: Date) => void)
-
Callback when date changes
hideHeader
boolean
false
Completely hides the internal header (controls + title).

Variants

Grouped Tasks

Tasks can be organized into collapsible groups using the groupName property.

June 2026
Month
00:50
Group
Task Name
01Mon
02Tue
03Wed
04Thu
05Fri
06Sat
07Sun
08Mon
09Tue
10Wed
11Thu
12Fri
13Sat
14Sun
15Mon
16Tue
17Wed
18Thu
19Fri
20Sat
21Sun
22Mon
23Tue
24Wed
25Thu
26Fri
27Sat
28Sun
29Mon
30Tue
Phase 1
Project Planning
Project Planning
12d • Jun 1 - Jun 5
Design Phase
Design Phase
21d • Jun 3 - Jun 10
Phase 2
Development
Development
36d • Jun 8 - Jun 20
Client Meeting
Client Meeting
0d • Jun 12 - Jun 12
Phase 3
Testing
Testing
21d • Jun 18 - Jun 25
Grouped Tasks
const groupedTasks = [
    { id: '1', name: 'Task 1', groupName: 'Group A', ... },
    { id: '2', name: 'Task 2', groupName: 'Group A', ... },
    { id: '3', name: 'Task 3', groupName: 'Group B', ... },
];

<GanttChart tasks={groupedTasks} />

Week View

Initialize the chart in Week view mode.

June 2026
Week
00:50
Task Name
01Mon
02Tue
03Wed
04Thu
05Fri
06Sat
07Sun
Project Planning
Project Planning
12d • Jun 1 - Jun 5
Design Phase
Design Phase
21d • Jun 3 - Jun 10
Week View
<GanttChart tasks={tasks} defaultView="Week" />

On this page

Preview
Component API
Variants
Photonix UI - React Components, Templates & Figma Design System