Gantt

import { Gantt } from '@enmovil/ui-design-system';

A Gantt chart of rows, such as zones or sub-locations, with status-coloured bars for tasks. It has a today line, hover tooltips, an optional progress overlay and a day, week or month zoom.

Properties

Property	Type	Required	Default	Allowed values	Description
className	string	No	—	—	Extra CSS class added to the chart's outer element.
rows	GanttRow[]	Yes	—	—	Rows of the chart, each with its label and bars. With no rows the chart shows only the empty message; without startDate and endDate the visible range spans all bars plus two days on each side.
startDate	string | Date	No	—	—	Viewport start. Defaults to earliest bar start.
endDate	string | Date	No	—	—	Viewport end. Defaults to latest bar end.
zoom	string	No	'week'	'month', 'week', 'day'	Column granularity. Default "week".
zoomSelector	boolean	No	true	—	Allow user to switch zoom from the toolbar. Default true.
showToday	boolean	No	true	—	Show vertical today line. Default true.
showLegend	boolean	No	true	—	Show legend strip at the bottom. Default true.
rowLabelWidth	number	No	220	—	Width of the row label column. Default 220px.
rowHeight	number	No	44	—	Height of each timeline row. Default 44px.
columnWidth	number	No	60	—	Width of one time column. Default 60px.
rowGroupLabel	string	No	'Zone'	—	Heading shown in the row-label slot of the time header. Default "Zone".
empty	ReactNode	No	'No tasks scheduled yet.'	—	Empty-state message.

rows

An array of objects (GanttRow). Each object has these fields:

Field	Type	Required	Description
id	string	Yes	Identifies the row. Also its React key, so ids must be unique.
label	string	Yes	Row name shown in the label column on the left.
sublabel	string	No	Smaller second line under the row name. Nothing is shown when it is absent.
bars	GanttBar[]	Yes	Bars drawn in the row's lane.

rows.bars

An array of objects (GanttBar). Each object has these fields:

Field	Type	Required	Description
id	string	Yes	Identifies the bar. Also its React key, so ids must be unique within a row.
name	string	Yes	Text shown on the bar and at the top of its hover tooltip.
start	Date | string	Yes	Start of the bar, as a Date or a date string. Also shown in the tooltip.
end	Date | string	Yes	End of the bar, as a Date or a date string. Also shown in the tooltip.
status	GanttStatus	Yes	Sets the bar's colour and the status shown in its tooltip: planned, in_progress, completed, blocked, on_hold or cancelled.
progress	number	No	0-100 progress overlay
meta	any	No	Arbitrary data passed back on click

Events

Name	Signature	When it fires
onBarClick	((bar: GanttBar, row: GanttRow) => void)	Fires when a bar is clicked.
onBarMouseEnter	((bar: GanttBar, row: GanttRow, event: MouseEvent<HTMLDivElement, MouseEvent>) => void)	Fires when the pointer enters a bar.
onBarMouseLeave	((bar: GanttBar, row: GanttRow, event: MouseEvent<HTMLDivElement, MouseEvent>) => void)	Fires when the pointer leaves a bar.
onRowClick	((row: GanttRow, event: MouseEvent<HTMLDivElement, MouseEvent>) => void)	Fires when a row's label is clicked.
onZoomChange	((zoom: GanttZoom) => void)	Fires when the toolbar zoom selector changes the zoom.

Children

Gantt does not accept children.

Type definitions

Shapes used by the properties above.

GanttZoom

type GanttZoom = "day" | "week" | "month";

GanttStatus

type GanttStatus = | "planned"
  | "in_progress"
  | "completed"
  | "blocked"
  | "on_hold"
  | "cancelled";

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Project Timeline example.

Loading playground…

Storybook

Open Gantt in Storybook to try every story with the full set of controls.