GanttChart

Horizontal bar timeline for project scheduling and dependencies

Continuous or scheduled time data where sequence and cadence are essential.

How to read this page

Use the sidebar showroom controls to change engine and tenant, then judge whether the chart still reads clearly without extra editorial staging around it.

TierChartA specialized visualization pattern.

FamilyTemporalStart with time pacing.

Best forshowing schedulesCompare against CalendarHeatMap for activity density.

Live preview

Validate the chart in the active showroom runtime

Sidebar engine and tenant drive this

Temporal

This preview should stand on the chart itself: legibility, token use, spacing, and interaction rhythm all need to hold without extra local storytelling chrome.

Loading chart preview...The interactive chart canvas mounts client-side so the docs page stays stable while the preview runtime boots.

ImportPublished package entrypoint, ready to copy.

tsx

1 line

Consumption

Runtime-aware snippet

ImportTSX

Quick copy

import { GanttChart } from '@rottay/design-system';

UsagePaste-ready example that shows the base contract first.

tsx

10 lines

Consumption

Runtime-aware snippet

UsageTSX

Quick copy

<GanttChart
  tasks={[
    { id: '1', name: 'Design', start: '2026-01-01', end: '2026-02-15', progress: 80 },
    { id: '2', name: 'Build', start: '2026-02-01', end: '2026-04-01', progress: 30 },
  ]}
  showProgress
  showToday
  height={300}
  animate
/>

API surface