Gantt Chart Maker
DataA gantt chart maker: bars with start and end, plus optional progress, group, and dependency arrows. Omit move and resize callbacks for a read-only chart.
GanttData · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Gantt from @otfdashkit/ui.
Code
// Gantt — A gantt chart maker: bars with start and end, plus optional progress, group, and dependency arrows. Omit move and resize callbacks for a read-only chart.
//
// Install:
// bun add @otfdashkit/ui
import { Gantt } from '@otfdashkit/ui'
export function Example() {
return (
<Gantt>
{/* your content */}
</Gantt>
)
}Props
Props declared in the Gantt source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | GanttItem[] | ||
| endDate | Date | ||
| onItemClick | (item: GanttItem) => void | ||
| onItemMove | (id: string, newStart: Date, newEnd: Date) => void | Omit = read-only. | |
| onItemResize | (id: string, newEnd: Date) => void | Omit = no resize. | |
| rowHeight | number | ||
| scale | 'days' | 'weeks' | 'months' | 'days' | |
| showDependencies | boolean | true | |
| showProgress | boolean | true | |
| showToday | boolean | true | |
| startDate | Date |
Related
Questions
- What is the gantt chart format?
- Each item needs id, title, start, and end. Optional fields are progress (0 to 100), color, dependsOn (ids), and group. scale is days, weeks, or months, and it defaults to days.
- Is this a gantt chart builder?
- You build the chart by passing items. onItemMove lets a drag set a new start and end, including a drag from the left edge of a bar. onItemResize lets a drag change the end. With neither callback, the bars are read-only. A group row can collapse.
- Is this a gantt chart tool?
- This page is the Gantt component. It is not a separate hosted app. Kits that ship a whole product are linked from the nav at /templates.