Options

Options: {
  theme: ThemeMode,
  annotationBgColor: string,
  annotationBorderColor: string,
  annotationBorderDashArray: number[],
  annotationBorderWidth: number,
  annotationOrientation: Orientation,
  annotations: Annotation[],
    bgColor: string,
    borderColor: string,
    borderDashArray: number,
    borderWidth: number,
    label: AnnotationLabel,
      fontColor: string,
      fontFamily: string,
      fontSize: string,
      fontWeight: string,
      orientation: Orientation,
      text: string,
    x1: string,
    x2: null | string,
  arrowColor: string,
  backgroundColor: string,
  barBackgroundColor: string,
  barBorderRadius: string,
  barMargin: number,
  barTextColor: string,
  baseline: { ... },
    enabled: boolean,
    color: string,
  borderColor: string,
  canvasStyle: string,
  criticalBarColor: string,
  criticalArrowColor: string,
  enableCriticalPath: boolean,
  cellBorderColor: string,
  cellBorderWidth: string,
  columnConfig: ColumnListItem[],
    key: ColumnKey,
    title: string,
    minWidth: string,
    flexGrow: number,
    visible: boolean,
  enableSelection: boolean,
  enableExport: boolean,
  enableResize: boolean,
  enableTaskDrag: boolean,
  enableTaskEdit: boolean,
  enableTaskResize: boolean,
  enableTooltip: boolean,
  fontColor: string,
  fontFamily: string,
  fontSize: string,
  fontWeight: string,
  headerBackground: string,
  height: number | string,
  inputDateFormat: string,
  rowBackgroundColors: string[],
  rowHeight: number,
  series: Array,
    id: string,
    name: string,
    startTime: string,
    endTime: string,
    progress: number,
    type: TaskType,
    parentId: string,
    dependency: string | TaskDependency,
    barBackgroundColor: string,
    rowBackgroundColor: string,
    baseline: BaselineInput,
      start: string,
      end: string,
    collapsed: boolean,
  tasksContainerWidth: number,
  tooltipBGColor: string,
  tooltipBorderColor: string,
  tooltipId: string,
  tooltipTemplate: Function,
  viewMode: ViewMode,
  width: number | string,
  parsing: ParsingConfig,
    id: ParsingValue,
    name: ParsingValue,
    startTime: ParsingValue,
    endTime: ParsingValue,
    progress: ParsingValue,
    type: ParsingValue,
    parentId: ParsingValue,
    dependency: ParsingValue,
    barBackgroundColor: ParsingValue,
    rowBackgroundColor: ParsingValue,
    collapsed: ParsingValue,
  showCheckboxColumn: boolean,
  toolbarItems: ToolbarItem[],
  taskListAriaLabel: string,
}

Default: 'light'

Color theme preset.

Available Options:

light (default)
dark

Default: '100%'

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

Default: '500px'

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

Default: 'border: 1px solid #CACED0; box-sizing: border-box'

Arbitrary CSS injected onto the root container element.

Default: 'week'

Timeline granularity.

Available Options:

day
week (default)
month
quarter
year

Default: '#FFFFFF'

Background color of the whole chart container.

Default: '#EBF3FB'

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

Default: '#DFE0E1'

Color of the cell and row divider lines.

Default: '#E3EDF8'

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

Default: '1px'

CSS border-width for all cell lines.

Default: 'MM-DD-YYYY'

dayjs-compatible format string used to parse startTime / endTime values.

Default: 425

Initial pixel width of the task-list panel.

Default: true

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

Default: true

Show the SVG export button in the toolbar.

Default: '#1A6FC4'

Color of dependency arrows between tasks.

Default: '#318CE7'

Default background fill color for task bars.

Default: '5px'

CSS border-radius applied to task bars.

Default: 8

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

Default: '#FFFFFF'

Text color rendered inside task bars.

Default: ['#FFFFFF']

Alternating row background colors. The pattern cycles automatically.

Default: 38

Height of each task row in pixels.

Default: true

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

Default: false

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

Default: true

Allow task bars to be resized by dragging their handles.

Default: false

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

Default: true

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

Default: false

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

Default: '#e53935'

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

Default: '#e53935'

Stroke color for dependency arrows on the critical path.

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

Options.baseline.enabled

Default: false

Whether to render baseline bars below actual bars.

Options.baseline.color

Default: '#b0b8c1'

Color of the baseline bar.

Default: true

Show a tooltip on task-bar hover.

Default: 'apexgantt-tooltip-container'

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>
  `;
}

Default: '#FFFFFF'

Background color of the hover tooltip.

Default: '#BCBCBC'

Border color of the hover tooltip.

Default: '#000000'

Color for all text in the chart.

Default: 'sans-serif'

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

Default: '14px'

CSS font-size for the chart.

Default: '400'

CSS font-weight for the chart.

Default: '#DBEAFE'

Background color of annotation markers.

Default: '#60A5FA'

Border color of annotation markers.

Default: []

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

Default: 2

Border width of annotation markers in pixels.

Default: 'horizontal'

Whether annotation lines are drawn horizontally or vertically.

Available Options:

horizontal (default)
vertical

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

Options.columnConfig.key

Column identifier. One of 'name', 'startTime', 'endTime', 'duration', or 'progress'.

Options.columnConfig.title

Header label displayed at the top of the column.

Options.columnConfig.minWidth

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

Options.columnConfig.flexGrow

CSS flex-grow factor for the column.

Options.columnConfig.visible

Whether the column is visible. Defaults to true.

Default: []

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').

Default: 'Task list'

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 },
}

Options.parsing.id

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

Options.parsing.name

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

Options.parsing.startTime

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

Options.parsing.endTime

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

Options.parsing.progress

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

Options.parsing.type

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

Options.parsing.parentId

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

Options.parsing.dependency

Path to the dependency field in the raw data object.

Options.parsing.barBackgroundColor

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

Options.parsing.rowBackgroundColor

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

Options.parsing.collapsed

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',
  },
]

Options.series.id

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

Options.series.name

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

Options.series.startTime

Task start date string. Parsed using inputDateFormat.

Options.series.endTime

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

Options.series.progress

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

Options.series.type

Visual type of the task.

Available Options:

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

Options.series.parentId

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

Options.series.dependency

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 }

Options.series.barBackgroundColor

Override the task bar fill color for this specific task.

Options.series.rowBackgroundColor

Override the row background color for this specific task row.

Options.series.baseline

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

Options.series.baseline.start

Planned (baseline) start date of the task.

Options.series.baseline.end

Planned (baseline) end date of the task.

Options.series.collapsed

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

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' },
  },
]

Options.annotations.x1

Start date of annotation.

Options.annotations.x2

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

Options.annotations.bgColor

Background color of this annotation. Overrides the global annotationBgColor.

Options.annotations.borderColor

Border color of this annotation. Overrides the global annotationBorderColor.

Options.annotations.borderDashArray

SVG stroke-dasharray for this annotation's border.

Options.annotations.borderWidth

Border width of this annotation in pixels.

Options.annotations.label

Label configuration for the annotation.

Options.annotations.label.text

Label text for the annotation.

Options.annotations.label.fontColor

Font color for the annotation label.

Options.annotations.label.fontFamily

Font family for the annotation label.

Options.annotations.label.fontSize

Font size for the annotation label.

Options.annotations.label.fontWeight

Font weight for the annotation label.

Options.annotations.label.orientation

Text orientation of the annotation label.

Available Options:

horizontal
vertical

Options

Configuration Structure

#theme

#width

#height

#canvasStyle

#viewMode

#backgroundColor

#headerBackground

#borderColor

#cellBorderColor

#cellBorderWidth

#inputDateFormat

#tasksContainerWidth

#enableResize

#enableExport

#arrowColor

#barBackgroundColor

#barBorderRadius

#barMargin

#barTextColor

#rowBackgroundColors

#rowHeight

#enableTaskDrag

#enableTaskEdit

#enableTaskResize

#enableSelection

#showCheckboxColumn

#enableCriticalPath

#criticalBarColor

#criticalArrowColor

#baseline

#enabled

#color

#enableTooltip

#tooltipId

#tooltipTemplate

#tooltipBGColor

#tooltipBorderColor

#fontColor

#fontFamily

#fontSize

#fontWeight

#annotationBgColor

#annotationBorderColor

#annotationBorderDashArray

#annotationBorderWidth

#annotationOrientation

#columnConfig

#key

#title

#minWidth

#flexGrow

#visible

#toolbarItems

#taskListAriaLabel

#parsing

#id

#name

#startTime

#endTime

#progress

#type

#parentId

#dependency

#barBackgroundColor

#rowBackgroundColor

#collapsed

#series

#id

#name

#startTime

#endTime

#progress

#type

#parentId

#dependency

#barBackgroundColor

#rowBackgroundColor

#baseline

`theme`

`width`

`height`

`canvasStyle`

`viewMode`

`backgroundColor`

`headerBackground`

`borderColor`

`cellBorderColor`

`cellBorderWidth`

`inputDateFormat`

`tasksContainerWidth`

`enableResize`

`enableExport`

`arrowColor`

`barBackgroundColor`

`barBorderRadius`

`barMargin`

`barTextColor`

`rowBackgroundColors`

`rowHeight`

`enableTaskDrag`

`enableTaskEdit`

`enableTaskResize`

`enableSelection`

`showCheckboxColumn`

`enableCriticalPath`

`criticalBarColor`

`criticalArrowColor`

`baseline`

`enabled`

`color`

`enableTooltip`

`tooltipId`

`tooltipTemplate`

`tooltipBGColor`

`tooltipBorderColor`

`fontColor`

`fontFamily`

`fontSize`

`fontWeight`

`annotationBgColor`

`annotationBorderColor`

`annotationBorderDashArray`

`annotationBorderWidth`

`annotationOrientation`

`columnConfig`

`key`

`title`

`minWidth`

`flexGrow`

`visible`

`toolbarItems`

`taskListAriaLabel`

`parsing`

`id`

`name`

`startTime`

`endTime`

`progress`

`type`

`parentId`

`dependency`

`barBackgroundColor`

`rowBackgroundColor`

`collapsed`

`series`

`id`

`name`

`startTime`

`endTime`

`progress`

`type`

`parentId`

`dependency`

`barBackgroundColor`

`rowBackgroundColor`

`baseline`

`start`

`end`