Options

Color theme preset.

Available Options:

• light (default)
• dark

Width of the chart. Accepts a pixel number or a CSS string.

Height of the chart. Accepts a pixel number or a CSS string.

Arbitrary CSS injected onto the root container element.

Initial zoom level expressed as pixels per day. Continuous — the timeline header automatically picks calendar tiers (year, quarter, month, week, day, halfday, hour, minute) based on the current value. Bounds are clamped to roughly [0.25, 1280] px/day.

Reference values calibrated against the legacy presets:

• Year ≈ 0.5
• Quarter ≈ 1.6
• Month ≈ 4.9
• Week ≈ 25.7
• Day = 80

When omitted, the chart auto-fits the full data range into the visible timeline area on first render. Supply an explicit value (or use the toolbar zoom controls) to take control.

Background color of the whole chart container.

Background color of the timeline and task-list header row.

Color of the cell and row divider lines.

Border color for all cells in the task table and timeline grid.

CSS border-width for all cell lines.

Whether to draw vertical lines between timeline columns. Set to false for a cleaner aesthetic that keeps only the horizontal row dividers.

Available Options:

• true (default)
• false

dayjs-compatible format string used to parse startTime / endTime values. Include time tokens (e.g. 'YYYY-MM-DD HH:mm') to enable sub-day scheduling; end-times are then treated as exclusive timestamps and inline editors switch to datetime-local inputs.

Initial pixel width of the task-list panel.

Allow the task-list panel to be resized by dragging the divider.

Show the SVG export button in the toolbar.

Color of dependency arrows between tasks.

Default background fill color for task bars. Theme-aware: a different default applies in the dark theme.

CSS border-radius applied to task bars.

Top and bottom margin inside each row for the task bar in pixels.

Text color rendered inside task bars.

Fill color for summary (group) bars. Renders distinct from regular task bars to make the parent/child hierarchy visually obvious. Theme-aware.

Fill color for milestone diamonds. Theme-aware.

Per-task bar label. By default the task name renders to the right of the bar so narrow bars don't clip their text. Set position: 'inside' to render centered inside the bar, 'auto' to pick automatically based on bar width, or supply render to compose names with chips, icons, or owner info.

barLabel: {
  position: 'auto',
  render: (task) => `<span>${task.name} · ${task.progress}%</span>`,
}

Where to render the label relative to the bar.

Available Options:

• right (default) — rendered immediately to the right of the bar; always visible regardless of bar width
• inside — centered inside the bar; clipped when the bar is narrower than the text
• left — rendered immediately to the left of the bar
• auto — inside when the label fits, otherwise right

Task field whose value populates the label when render is not set.

Custom renderer for the bar label. Receives the resolved task and returns an HTML string (assigned via innerHTML — escape user input yourself) or an HTMLElement. Returning null or undefined falls back to rendering barLabel.field.

Extra CSS class added to the label element.

Pixels of empty space added to the start of the timeline so left-side labels have room to render without being hidden behind the task-list panel. Auto-defaults to 120 when position is 'left', and 0 otherwise. Set explicitly to 0 to disable the padding.

Alternating row background colors. The pattern cycles automatically.

Height of each task row in pixels.

Allow tasks to be reordered by dragging rows in the task list.

Show the inline task-edit form when a task row is clicked.

Allow editing task fields directly in task-list cells. When true, double-clicking a name, startTime, endTime, duration, or progress cell swaps the cell for an input — commit with Enter or blur, cancel with Escape. Summary rows, milestones, and empty rows are not editable. Auto-enabled when enableTaskEdit is true unless explicitly set to false.

Available Options:

• false (default)
• true

Allow task bars to be resized by dragging their handles.

Allow editing task progress by dragging the small handle at the bottom of the bar. The handle becomes visible on bar hover and snaps to whole percent on commit. Emits a taskProgressChanged event.

Available Options:

• true (default)
• false

Granularity at which task drag, resize, and inline edits snap. Affects data updates only — the timeline header tier follows pixelsPerDay independently. Use 'hour' or 'minute' together with snapValue for sub-day scheduling; end-times are treated as exclusive timestamps when inputDateFormat includes time tokens.

Available Options:

• day (default)
• hour
• minute

Multiplier applied to snapUnit. Examples: snapUnit: 'minute', snapValue: 15 snaps to 15-minute increments; snapUnit: 'hour', snapValue: 6 snaps to 6-hour increments.

Enable row selection (click, Ctrl+Click, Shift+Click, keyboard).

Show a checkbox column for multi-select. Only applies when enableSelection is true.

When true, calculates and highlights the critical path through dependent tasks.

Fill color for task bars on the critical path (requires enableCriticalPath: true).

Stroke color for dependency arrows on the critical path.

When true, summary (parent) rows display thin rollup markers below the summary bar at each leaf descendant's date range — a glance-able overview of children that stays visible even when the parent is collapsed.

Available Options:

• false (default)
• true

Baseline options. When enabled is true, tasks with a baseline field render a thin bar below the actual bar to show schedule variance.

Whether to render baseline bars below actual bars.

Color of the baseline bar.

Visual and interaction options for dependency arrows. Tune cornerRadius for tighter or looser joints, set hitWidth to add an invisible thicker target zone for hover/click on thin strokes, and use tooltipTemplate / classBuilder for per-arrow content and styling.

dependencies: {
  cornerRadius: 6,
  hitWidth: 12,
  classBuilder: (ctx) => ctx.fromTask.team !== ctx.toTask.team ? 'cross-team' : '',
  tooltipTemplate: (ctx) => `<b>${ctx.fromTask.name}</b> → <b>${ctx.toTask.name}</b>`,
}

Pixel radius for rounded joints on dependency arrows. 0 produces sharp 90° corners; larger values produce smoother arcs (clamped per-corner to half the shorter adjacent segment so an arc never overshoots).

Invisible hit-area thickness in pixels. When greater than 0, each arrow renders an additional transparent path of this width that captures pointer events, making the thin visible stroke easier to hover or click. Required for tooltipTemplate to fire.

Returns CSS class name(s) for each arrow. Receives a DependencyContext (fromTask, toTask, type, lag) and returns a class name string, an array of class names, or undefined. Use to tag arrows by relationship — cross-team, blocked, optional — and style them via custom CSS.

Returns an HTML string shown when the user hovers an arrow. Receives a DependencyContext (fromTask, toTask, type, lag). Requires a non-zero hitWidth so the hover hit area is large enough to register reliably.

Show a vertical crosshair line that follows the cursor across the timeline, with a label displaying the precise date or time at the pointer position.

Available Options:

• false (default)
• true

Color of the crosshair line and label background. Theme-aware.

Custom formatter for the crosshair label text. Receives the date under the cursor and the current sub-tier of the timeline header ('minute' | 'hour' | 'halfday' | 'day' | 'week' | 'month' | 'quarter' | 'year'). When omitted, the label auto-adapts to the active tier — coarse formats for week-and-above, HH:mm for halfday, hour, or minute tiers.

crosshairLabelFormat(date, tier) {
  return `${tier}: ${date.toISOString()}`;
}

Show a tooltip on task-bar hover.

HTML id for the tooltip container element.

Custom function returning an HTML string for the task tooltip.

tooltipTemplate(task, dateFormat) {
  return `
    <div>
      <div><strong>Task:</strong> ${task.name}</div>
      <div><strong>Start:</strong> ${task.startTime}</div>
      <div><strong>End:</strong> ${task.endTime}</div>
      <div><strong>Progress:</strong> ${task.progress}%</div>
    </div>
  `;
}

Background color of the hover tooltip.

Border color of the hover tooltip.

Color for all text in the chart.

CSS font-family for the chart. Falls back to the page default when empty.

CSS font-size for the chart.

CSS font-weight for the chart.

Background color of annotation markers.

Border color of annotation markers.

SVG stroke-dasharray for annotation borders, e.g. [6, 3].

Border width of annotation markers in pixels.

Whether annotation lines are drawn horizontally or vertically.

Available Options:

• horizontal (default)
• vertical

When true, two vertical lines mark the project's earliest start and latest end across all rows. Auto-recomputes when tasks are added, removed, or rescheduled.

Available Options:

• false (default)
• true

Stroke color for the project-boundary lines. Falls back to annotationBorderColor when omitted.

Custom column definitions for the task-list panel. When omitted, all default columns are shown.

Column identifier. Use a ColumnKey value for built-ins ('name', 'startTime', 'endTime', 'duration', 'progress', 'progressRing', 'wbs') or any other string for a custom column paired with a render function.

Header label displayed at the top of the column.

CSS min-width for the column, e.g. '120px'.

CSS flex-grow factor for the column.

Whether the column is visible. Defaults to true.

Custom cell renderer. Required for custom columns; ignored for built-in columns. Receives a context object (task, options, rowIndex, isSummary, isMilestone) and the cell element. Return an HTML string to set innerHTML, return void if you mounted DOM yourself, or return a cleanup function () => void that the library will invoke on row eviction, full re-render, and destroy() — required for framework adapters (React.createRoot().unmount(), Vue.app.unmount(), etc.).

Extracts the underlying value of the cell from the task. Used by SVG export and reserved for future sort/filter features.

Custom controls rendered in the toolbar alongside the built-in zoom and export buttons. Each item can be a ToolbarButton, ToolbarSelect, or ToolbarSeparator. Use position: 'left' to insert before the built-in controls (default is 'right').

aria-label for the task-list table, used by screen readers.

Field-mapping config to parse non-standard task shapes without manual data transformation.

parsing: {
  id: 'task_id',
  name: 'title',
  startTime: 'start_date',
  endTime: 'end_date',
  progress: { key: 'pct_complete', transform: Number },
}

Path to the unique task identifier in the raw data object.

Path to the task display name in the raw data object.

Path to the task start date in the raw data object.

Path to the task end date in the raw data object.

Path to the task progress value in the raw data object.

Path to the task type ('task' or 'milestone') in the raw data object.

Path to the parent task ID in the raw data object.

Path to the dependency field in the raw data object.

Path to a per-task bar color override in the raw data object.

Path to a per-task row background color override in the raw data object.

Path to the collapsed state in the raw data object.

Task data array. Each item must satisfy TaskInput, or use parsing to map custom field names.

series: [
  {
    id: 'task-1',
    name: 'Design Phase',
    startTime: '01-01-2026',
    endTime: '01-15-2026',
    progress: 65,
  },
  {
    id: 'task-2',
    name: 'Development',
    startTime: '01-10-2026',
    endTime: '02-01-2026',
    parentId: 'task-1',
    progress: 30,
    dependency: 'task-1',
  },
]

Unique identifier for the task. Must be stable across renders.

Display name shown in the task list column and task bar.

Task start date string. Parsed using inputDateFormat.

Task end date string. Parsed using inputDateFormat. When omitted, the task renders as a milestone on startTime.

Completion percentage (0–100). Renders a filled progress portion inside the task bar.

Visual type of the task.

Available Options:

• task — renders a bar (default)
• milestone — renders a diamond marker

ID of the parent task. Nested tasks are rendered as children in the task list.

Dependency on another task. Accepts either a plain task ID string (treated as Finish-to-Start with 0 lag) or a full TaskDependency object for typed dependency with lag/lead support.

// Simple string dependency
dependency: 'task-2'

// Full dependency object
dependency: { taskId: 'task-2', type: 'FS', lag: 2 }

Override the task bar fill color for this specific task.

Override the row background color for this specific task row.

Baseline (planned) dates for comparison against actual dates. Rendered as a thin bar below the actual task bar when baseline.enabled is true.

Planned (baseline) start date of the task.

Planned (baseline) end date of the task.

Whether this task's child tasks are collapsed (hidden) in the task list.

When true (the default), a task with children renders as a summary (group) bar whose date range is automatically computed from the earliest start and latest end of all its descendants — the task's own startTime / endTime are ignored. Drag, resize, and progress edits are disabled on summary bars. Set to false to opt the parent out of the auto-derived summary bar and render it as a normal task bar instead.

People (or teams) assigned to this task. Consumed by the built-in renderers.avatars column renderer; ignored unless an avatar-style column is configured via columnConfig. Each Assignee carries name, optional avatarUrl, optional initials, and optional fallback color.

Array of annotation objects to overlay on the timeline.

annotations: [
  {
    x1: '01-15-2026',
    x2: '01-20-2026',
    label: { text: 'Sprint Review' },
  },
  {
    x1: '02-01-2026',
    label: { text: 'Deadline' },
  },
]

Start date of annotation.

End date of annotation. If present, draws a rect from x1 to x2. If null or omitted, only draws a line on x1.

Background color of this annotation. Overrides the global annotationBgColor.

Border color of this annotation. Overrides the global annotationBorderColor.

SVG stroke-dasharray for this annotation's border.

Border width of this annotation in pixels.

Label configuration for the annotation.

Label text for the annotation.

Font color for the annotation label.

Font family for the annotation label.

Font size for the annotation label.

Font weight for the annotation label.

Text orientation of the annotation label.

Available Options:

• horizontal
• vertical