Photonix UI - React Components, Templates & Figma Design System

GanttChart

Visualizes project schedule and dependencies.

Preview

June 2026

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

Discovery

Research

15d • Jun 1 - Jun 6

Build

Design system docs

33d • Jun 7 - Jun 18

Launch

Release notes

18d • Jun 19 - Jun 25

Usage

"use client";

import { GanttChart, type GanttTask } from '@photonix/ultimate';

const tasks: GanttTask[] = [
    { id: 'research', name: 'Research', startDate: new Date(2026, 5, 1), endDate: new Date(2026, 5, 6), status: 'completed', progress: 100, groupName: 'Discovery' },
    { id: 'design', name: 'Design system docs', startDate: new Date(2026, 5, 7), endDate: new Date(2026, 5, 18), status: 'active', progress: 58, groupName: 'Build' },
    { id: 'release', name: 'Release notes', startDate: new Date(2026, 5, 19), endDate: new Date(2026, 5, 25), status: 'pending', progress: 12, groupName: 'Launch' },
];

export default function GanttChartBasicExample() {
    return <GanttChart tasks={tasks} defaultView="Month" currentDate={new Date(2026, 5, 1)} />;
}

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.

July 2026

16:18

Group

Task Name

01Wed

02Thu

03Fri

04Sat

05Sun

06Mon

07Tue

08Wed

09Thu

10Fri

11Sat

12Sun

13Mon

14Tue

15Wed

16Thu

17Fri

18Sat

19Sun

20Mon

21Tue

22Wed

23Thu

24Fri

25Sat

26Sun

27Mon

28Tue

29Wed

30Thu

31Fri

Grouped Tasks

"use client";

import { Box, GanttChart, type GanttTask } from '@photonix/ultimate';

const tasks: GanttTask[] = [
    { id: 'g1', name: 'Project planning', startDate: new Date(2026, 5, 1), endDate: new Date(2026, 5, 5), type: 'work', progress: 100, groupName: 'Phase 1' },
    { id: 'g2', name: 'Design phase', startDate: new Date(2026, 5, 3), endDate: new Date(2026, 5, 10), type: 'work', progress: 60, groupName: 'Phase 1' },
    { id: 'g3', name: 'Development', startDate: new Date(2026, 5, 8), endDate: new Date(2026, 5, 20), type: 'work', progress: 30, groupName: 'Phase 2' },
    { id: 'g4', name: 'Client meeting', startDate: new Date(2026, 5, 12), endDate: new Date(2026, 5, 12), type: 'personal', groupName: 'Phase 2' },
    { id: 'g5', name: 'Testing', startDate: new Date(2026, 5, 18), endDate: new Date(2026, 5, 25), type: 'work', groupName: 'Phase 3' },
];

export default function GanttChartGroupedTasksExample() {
    return (
        <Box w="100%">
            <GanttChart tasks={tasks} />
        </Box>
    );
}

Week View

Initialize the chart in Week view mode.

June 2026

Group

Task Name

01Mon

02Tue

03Wed

04Thu

05Fri

06Sat

07Sun

Discovery

Research

15d • Jun 1 - Jun 6

Build

Design system docs

33d • Jun 7 - Jun 18

Week View

"use client";

import { Box, GanttChart, type GanttTask } from '@photonix/ultimate';

const tasks: GanttTask[] = [
    { id: 'research', name: 'Research', startDate: new Date(2026, 5, 1), endDate: new Date(2026, 5, 6), status: 'completed', progress: 100, groupName: 'Discovery' },
    { id: 'design', name: 'Design system docs', startDate: new Date(2026, 5, 7), endDate: new Date(2026, 5, 18), status: 'active', progress: 58, groupName: 'Build' },
    { id: 'release', name: 'Release notes', startDate: new Date(2026, 5, 19), endDate: new Date(2026, 5, 25), status: 'pending', progress: 12, groupName: 'Launch' },
];

export default function GanttChartWeekViewExample() {
    return (
        <Box w="100%">
            <GanttChart tasks={tasks} defaultView="Week" currentDate={new Date(2026, 5, 1)} />
        </Box>
    );
}

GanttChart

Preview

Component API

GanttChart

Variants

Grouped Tasks

Week View

On this page