GanttChart

visual

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

100%

스프린트 일정

기획
개발
QA

그리드·마커 없이

단순 타임라인

기획
개발
QA

테스트 커버리지

2026년 7월 9일

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

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

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

GanttChart Props

Prop	타입	기본값	설명
`data`*	`GanttTask[]`	—	태스크 배열 (name, start, end, group, color)
`rowHeight`	`number`	`28`	행 높이(px)
`min`	`number`	—	시간축 최소값 (기본: 데이터 최소 start를 깔끔한 눈금으로 내림)
`max`	`number`	—	시간축 최대값 (기본: 데이터 최대 end를 깔끔한 눈금으로 올림)
`showGrid`	`boolean`	`true`	세로 그리드 표시 여부. 눈금 레이블은 항상 남는다
`marker`	`number`	—	기준선 위치 (예: 오늘)
`markerLabel`	`string`	—	marker 위치에 붙일 레이블. 눈금 레이블과 다른 줄에 놓인다
`showLegend`	`boolean`	—	그룹 범례 표시 여부. 기본은 그룹이 둘 이상일 때만
`valueFormatter`	`(value: number) => string`	—	값을 표시 문자열로 바꾸는 함수. 기본은 locale 인식 숫자 포맷
`accessibleTable`	`boolean`	`false`	스크린 리더용으로 숨긴 데이터 표를 함께 렌더링
`labels`	`GanttChartLabels`	—	지역화 문자열 (empty·summaryCaption·chartName·taskColumn·groupColumn·start·end·legendAriaLabel)
`locale`	`string`	—	기본 숫자 포맷에 쓰는 locale. 생략하면 런타임 locale
`loading`	`boolean`	`false`	새 데이터를 불러오는 동안 현재 렌더를 흐리게 유지
`emptyState`	`React.ReactNode`	—	데이터가 없을 때 보여줄 내용. 기본은 labels.empty
`className`	`string`	—	루트 요소에 붙는 CSS 클래스
`aria-label`	`string`	—	스크린 리더용 레이블. 생략하면 차트 종류와 항목 이름으로 만든다
`aria-describedby`	`string`	—	차트를 설명하는 요소의 id

Import

tsx

import { GanttChart } from "@reopt-ai/opt-ui";