Photonix UI - React Components, Templates & Figma Design System

GanttChart

Visualizes project schedule and dependencies.

Preview

June 2026

01:58

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

12d • Jun 1 - Jun 5

Design Phase

21d • Jun 3 - Jun 10

Development

36d • Jun 8 - Jun 20

Client Meeting

0d • Jun 12 - Jun 12

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

01:58

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

12d • Jun 1 - Jun 5

Design Phase

21d • Jun 3 - Jun 10

Phase 2

Development

36d • Jun 8 - Jun 20

Client Meeting

0d • Jun 12 - Jun 12

Phase 3

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

01:58

Task Name

01Mon

02Tue

03Wed

04Thu

05Fri

06Sat

07Sun

Project Planning

12d • Jun 1 - Jun 5

Design Phase

21d • Jun 3 - Jun 10

Week View

<GanttChart tasks={tasks} defaultView="Week" />

GanttChart

Preview

Component API

GanttChart

Variants

Grouped Tasks

Week View

On this page