reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-charts40
GanttChart
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

GanttChart

Chart

Visualize schedules and roadmaps with responsive task bars on a time axis, group legends, titles, and keyboard focus.

cartesian
Related docs
bun add @reopt-ai/opt-charts
Install and import
bash
bun add @reopt-ai/opt-charts
tsx
import { GanttChart } from "@reopt-ai/opt-charts";

Live preview

Change the width and theme, then interact with the components.

100%

스프린트 일정

D0D5D10D15D20오늘요구 분석요구 분석 (기획): Start D0, End D3설계설계 (기획): Start D2, End D5구현구현 (개발): Start D5, End D11코드 리뷰코드 리뷰 (개발): Start D10, End D13QAQA (QA): Start D12, End D15배포배포 (QA): Start D15, End D16
  • 기획
  • 개발
  • QA

그리드·마커 없이

단순 타임라인

D0D5D10D15D20요구 분석요구 분석 (기획): Start D0, End D3설계설계 (기획): Start D2, End D5구현구현 (개발): Start D5, End D11코드 리뷰코드 리뷰 (개발): Start D10, End D13QAQA (QA): Start D12, End D15배포배포 (QA): Start D15, End D16
  • 기획
  • 개발
  • QA

GanttChart

PropTypeDefaultDescription
dataRequiredGanttTask[]—태스크 배열 (name, start, end, group, color)
rowHeightnumber28행 높이(px)
minnumber—시간축 최소값 (기본: 데이터 최소 start를 깔끔한 눈금으로 내림)
maxnumber—시간축 최대값 (기본: 데이터 최대 end를 깔끔한 눈금으로 올림)
showGridbooleantrue세로 그리드 표시 여부. 눈금 레이블은 항상 남는다
markernumber—기준선 위치 (예: 오늘)
markerLabelstring—marker 위치에 붙일 레이블. 눈금 레이블과 다른 줄에 놓인다
showLegendboolean—그룹 범례 표시 여부. 기본은 그룹이 둘 이상일 때만
valueFormatter(value: number) => string—값을 표시 문자열로 바꾸는 함수. 기본은 locale 인식 숫자 포맷
accessibleTablebooleanfalse스크린 리더용으로 숨긴 데이터 표를 함께 렌더링
labelsGanttChartLabels—지역화 문자열 (empty·summaryCaption·chartName·taskColumn·groupColumn·start·end·legendAriaLabel)
localestring—기본 숫자 포맷에 쓰는 locale. 생략하면 런타임 locale
loadingbooleanfalse새 데이터를 불러오는 동안 현재 렌더를 흐리게 유지
emptyStateReact.ReactNode—데이터가 없을 때 보여줄 내용. 기본은 labels.empty
classNamestring—루트 요소에 붙는 CSS 클래스
aria-labelstring—스크린 리더용 레이블. 생략하면 차트 종류와 항목 이름으로 만든다
aria-describedbystring—차트를 설명하는 요소의 id
View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

GanttChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

opt-charts

LineChart

Charts

Visualize trends and changes over time with a line chart for continuous data.

opt-charts

BarChart

Charts

Compare values across categories with a bar chart.

opt-charts

AreaChart

Charts

Display trends and time series with filled areas and optional gradients.

opt-charts

Sparkline

Charts

Show compact inline trends in stat cards, table cells, and other small spaces.

opt-charts

ScatterChart

Charts

Compare two variables in a scatter plot and optionally size points with zKey.

opt-charts

WaterfallChart

Charts

Explain changes from a starting value to a total with step bars and distinct increase, decrease, and total colors.

PreviousDataBarNextSunburst