Gantt

import { Gantt } from '@hanzo/ui'

Default

One row per task, each with a progress track and its date range.

Project Planning100%

1/1/20241/15/2024

Design Phase75%

1/10/20242/5/2024

Development45%

2/1/20244/30/2024

Testing0%

4/15/20245/15/2024

export function Default() {
  return (
    <YStack width="100%" maxW={640}>
      <Gantt tasks={tasks} />
    </YStack>
  )
}

With no tasks the chart shows a placeholder instead of nothing.

No tasks available. Add tasks to display Gantt chart.

export function Empty() {
  return (
    <YStack width="100%" maxW={640}>
      <Gantt tasks={[]} />
    </YStack>
  )
}

export interface GanttTask {
  id: string
  name: string
  start: Date
  end: Date
  /** 0–100. Defaults to 0. */
  progress?: number
}

export type GanttProps = Omit<import('react').ComponentProps<typeof GanttFrame>, 'children'> & {
  tasks?: GanttTask[]
}

Gantttype GanttPropstype GanttTask