GanttChart

Data Visualization

visx 기반 간트 차트.

Usage

작업별 시작일·종료일과 일정의 겹침을 시간축에서 계획할 때 사용한다.

import

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

API Reference

GanttChart Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

endKey

필수

string

지정 안 함

startKey

필수

string

지정 안 함

taskKey

필수

string

지정 안 함

barHeightRatio

number

0.6

className

string

지정 안 함

colors

string[]

지정 안 함

groupKey

string

지정 안 함

legendPosition

"bottom" | "left" | "right" | "top"

bottom

margin

Partial<ChartMargin>

지정 안 함

paints

ChartPaint[]

지정 안 함

periodLabel

string

기간

showGrid

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

showXAxis

boolean

true

xTickFormat

(value: number | Date) => string

지정 안 함

예제

기본

코드

Open in Playground

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

// 신규 단원 콘텐츠 제작 프로젝트 일정
const projectTasks = [
  { task: '단원 기획', start: '2026-03-02', end: '2026-03-06', team: '기획' },
  { task: '문항 출제', start: '2026-03-05', end: '2026-03-13', team: '콘텐츠' },
  { task: '문항 검수', start: '2026-03-12', end: '2026-03-17', team: '콘텐츠' },
  { task: '베타 테스트', start: '2026-03-16', end: '2026-03-24', team: '운영' },
  { task: '정식 오픈', start: '2026-03-24', end: '2026-03-27', team: '운영' },
];

const GanttChartDefaultExample = () => <GanttChart data={projectTasks} taskKey="task" startKey="start" endKey="end" />;

export default GanttChartDefaultExample;

그룹 색상 + 범례

코드

Open in Playground

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

// 신규 단원 콘텐츠 제작 프로젝트 일정
const projectTasks = [
  { task: '단원 기획', start: '2026-03-02', end: '2026-03-06', team: '기획' },
  { task: '문항 출제', start: '2026-03-05', end: '2026-03-13', team: '콘텐츠' },
  { task: '문항 검수', start: '2026-03-12', end: '2026-03-17', team: '콘텐츠' },
  { task: '베타 테스트', start: '2026-03-16', end: '2026-03-24', team: '운영' },
  { task: '정식 오픈', start: '2026-03-24', end: '2026-03-27', team: '운영' },
];

const GanttChartGroupedWithLegendExample = () => (
    <GanttChart
      data={projectTasks}
      taskKey="task"
      startKey="start"
      endKey="end"
      groupKey="team"
      showLegend
      showTooltip
    />
  );

export default GanttChartGroupedWithLegendExample;

Hover Tooltip

코드

Open in Playground

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

// 신규 단원 콘텐츠 제작 프로젝트 일정
const projectTasks = [
  { task: '단원 기획', start: '2026-03-02', end: '2026-03-06', team: '기획' },
  { task: '문항 출제', start: '2026-03-05', end: '2026-03-13', team: '콘텐츠' },
  { task: '문항 검수', start: '2026-03-12', end: '2026-03-17', team: '콘텐츠' },
  { task: '베타 테스트', start: '2026-03-16', end: '2026-03-24', team: '운영' },
  { task: '정식 오픈', start: '2026-03-24', end: '2026-03-27', team: '운영' },
];

const GanttChartHoverTooltipExample = () => (
    <GanttChart data={projectTasks} taskKey="task" startKey="start" endKey="end" showTooltip />
  );

export default GanttChartHoverTooltipExample;

숫자 축 (주차 단위)

코드

Open in Playground

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

// 숫자 축 — 단원별 학습 주차 계획
const weekPlan = [
  { unit: '1단원 문법 기초', startWeek: 1, endWeek: 3 },
  { unit: '2단원 독해 전략', startWeek: 3, endWeek: 6 },
  { unit: '3단원 어휘 확장', startWeek: 5, endWeek: 8 },
  { unit: '4단원 실전 모의고사', startWeek: 8, endWeek: 12 },
];

const GanttChartNumericAxisExample = () => (
    <GanttChart data={weekPlan} taskKey="unit" startKey="startWeek" endKey="endWeek" showTooltip />
  );

export default GanttChartNumericAxisExample;

막대 두께 조절

코드

Open in Playground

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

// 신규 단원 콘텐츠 제작 프로젝트 일정
const projectTasks = [
  { task: '단원 기획', start: '2026-03-02', end: '2026-03-06', team: '기획' },
  { task: '문항 출제', start: '2026-03-05', end: '2026-03-13', team: '콘텐츠' },
  { task: '문항 검수', start: '2026-03-12', end: '2026-03-17', team: '콘텐츠' },
  { task: '베타 테스트', start: '2026-03-16', end: '2026-03-24', team: '운영' },
  { task: '정식 오픈', start: '2026-03-24', end: '2026-03-27', team: '운영' },
];

const GanttChartThinBarsExample = () => (
    <GanttChart
      data={projectTasks}
      taskKey="task"
      startKey="start"
      endKey="end"
      barHeightRatio={0.3}
    />
  );

export default GanttChartThinBarsExample;

빈 데이터

코드

Open in Playground

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

const GanttChartEmptyExample = () => <GanttChart data={[]} taskKey="task" startKey="start" endKey="end" />;

export default GanttChartEmptyExample;

데이터 1개 + 기간 0

코드

Open in Playground

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

const GanttChartSingleAndZeroDurationExample = () => (
    <GanttChart
      data={[{ task: '개강일 안내', start: '2026-03-02', end: '2026-03-02' }]}
      taskKey="task"
      startKey="start"
      endKey="end"
      showTooltip
    />
  );

export default GanttChartSingleAndZeroDurationExample;

반응형 (너비 자동 조정)

코드

Open in Playground

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

// 신규 단원 콘텐츠 제작 프로젝트 일정
const projectTasks = [
  { task: '단원 기획', start: '2026-03-02', end: '2026-03-06', team: '기획' },
  { task: '문항 출제', start: '2026-03-05', end: '2026-03-13', team: '콘텐츠' },
  { task: '문항 검수', start: '2026-03-12', end: '2026-03-17', team: '콘텐츠' },
  { task: '베타 테스트', start: '2026-03-16', end: '2026-03-24', team: '운영' },
  { task: '정식 오픈', start: '2026-03-24', end: '2026-03-27', team: '운영' },
];

const GanttChartResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([320, 480, 720] as const).map((w) => (
        <div key={w} style={{ width: w, height: 220 }}>
          <GanttChart
            data={projectTasks}
            taskKey="task"
            startKey="start"
            endKey="end"
            groupKey="team"
            showLegend
          />
        </div>
      ))}
    </div>
  );

export default GanttChartResponsiveExample;