Element: <oj-gantt>

Oracle® JavaScript Extension Toolkit (JET)
18.0.0
G12199-01

Since:
  • 2.1.0
Module:
  • ojgantt

QuickNav

Slots

Attributes


Context Objects

Events

Methods

Type Definitions

Other Topics


JET Gantt

Description:

A JET Gantt is a themable, WAI-ARIA compliant element that illustrates the start and finish dates of tasks.

The SVG DOM that this component generates should be treated as a black box, as it is subject to change.


<oj-gantt
  start='2017-01-01T05:00:00.000Z'
  end='2017-12-31T05:00:00.000Z'
  major-axis='{"scale": "months"}'
  minor-axis='{"scale": "weeks"}'
  row-data='[[dataProvider]]'>
</oj-gantt>

Accessibility

The application is responsible for populating the shortDesc value in the component properties object with meaningful descriptors when the component does not provide a default descriptor. Since component terminology for keyboard and touch shortcuts can conflict with those of the application, it is the application's responsibility to provide these shortcuts, possibly via a help popup.

The application is also responsible for including contextual information for screen readers using one or more the following methods as appropriate: aria-label, aria-labelledby, aria-describedby.

If minor axis and/or major axis drilling is enabled, the application should ensure that the effect of the drill is communicated to the user by the screen reader. A best practice is to update a live region upon drill so that the screen reader announces this information.

Date and Time Formats

The Gantt supports a simplified version of the ISO 8601 extended date/time format. The format is as follows: YYYY-MM-DDTHH:mm:ss.sssZ

Symbol Description Values Examples
-, :, .,TCharacters actually in the string. T specifies the start of a time.
YYYYYear2013-03-22
2014-02
MMMonth01 to 12
DDDay of the month01 to 31
HHHours00 to 242013-02-04T15:20Z
2013-02-10T15:20:45.300Z
mmMinutes00 to 59
ssSeconds. The seconds and milliseconds are optional if a time is specified.00 to 59
sssMilliseconds00 to 999
ZThe value in this position can be one of the following. If the value is omitted, character 'Z' should be used to specify UTC time.
  • Z indicates UTC time.
  • +hh:mm indicates that the input time is the specified offset after UTC time.
  • -hh:mm indicates that the input time is the absolute value of the specified offset before UTC time.
 2013-02-04T15:20:00-07:00
2013-02-04T15:20:00+05:00
2013-02-04T15:20:00Z

The ISO format support short notations where the string must only include the date and not time, as in the following formats: YYYY, YYYY-MM, YYYY-MM-DD.

The ISO format does not support time zone names. You can use the Z position to specify an offset from UTC time. If you do not include a value in the Z position, UTC time is used. The correct format for UTC should always include character 'Z' if the offset time value is omitted. The date-parsing algorithms are browser-implementation-dependent and, for example, the date string '2013-02-27T17:00:00' will be parsed differently in Chrome vs Firefox vs IE.

You can specify midnight by using 00:00, or by using 24:00 on the previous day. The following two strings specify the same time: 2010-05-25T00:00Z and 2010-05-24T24:00Z.

Touch End User Information

Target Gesture Action
Task Tap Select when selection-mode is enabled.
Drag Move when dnd.move.tasks is enabled. Resize if start or end edge of task is dragged and task-defaults.resizable is enabled.
Press & Hold Display tooltip.
Display context menu on release.
Time Axis Label Tap Drill when major-axis.drillable or minor-axis.drillable is "on".
Chart Area Drag Pan.
Pinch-close Zoom Out.
Spread-open Zoom In.
Zoom Control Tap on "+" element Zoom In.
Tap on "-" element Zoom Out.

Keyboard End User Information

Key Action
Tab Move focus to next element.
Shift + Tab Move focus to previous element.
= or + Zoom in one level.
- or _ Zoom out one level.
PageUp or PageDown
  • Pan up / down.
  • If currently in move (or resize) mode (see Ctrl + m, Alt + s, Alt + e), select the amount of time greater / less than the current move by amount in the following ramp: years, quarters, months, weeks, days, hours, minutes, seconds, milliseconds. For example, if the current move by amount is weeks, PageUp or PageDown would change the amount to months or days respectively.
Shift + PageUp or PageDown Pan left/right (RTL: Pan right/left).
LeftArrow
  • When focus is on a task, move focus and selection to the task on the left within the same row. In LTR reading direction, if this is the first task within the row, then move focus and selection to the last task in the previous row. In RTL reading direction, if this is the last task within the row, then move focus and selection to the first task in the next row.
  • When focus is on a dependency line (see Alt + < and Alt + >), move focus to the predecessor task (RTL: successor task).
  • If currently in move (or resize) mode (see Ctrl + m, Alt + s, Alt + e), move the candidate position to the left by some amount of time. Upon entering move (or resize) mode, the amount of time is set to the scale of the minor axis. See PageUp or PageDown for information on changing the amount of time to move by.
  • When focus is on a time axis label, move focus to the next visible label on the left.
RightArrow
  • When focus is on a task, move focus and selection to the task on the right within the same row. In LTR reading direction, if this is the last task within the row, then move focus and selection to the first task in the next row. In RTL reading direction, if this is the first task within the row, then move focus and selection to the last task in the previous row.
  • When focus is on a dependency line (see Alt + < and Alt + >), move focus to the successor task (RTL: predecessor task).
  • If currently in move (or resize) mode (see Ctrl + m, Alt + s, Alt + e), move the candidate position to the right by some amount of time. Upon entering move (or resize) mode, the amount of time is set to the scale of the minor axis. See PageUp or PageDown for information on changing the amount of time to move by.
  • When focus is on a time axis label, move focus to the next visible label on the right.
UpArrow
  • When focus is on a task, move focus and selection to first task in the previous row.
  • When focus is on a dependency line (see Alt + < and Alt + >), move focus to the previous dependency line with the same predecessor/successor.
  • If currently in move mode (see Ctrl + m), move the candidate position to the row above, preserving current time position.
  • If focus is on a minor axis label, and axis-position is set to "top", and there is a major axis with major-axis.drillable set to "on", then move focus to a major axis label. The specific label that gets focus is determined as follows:
    • If a label on a time interval exists on the major axis that contains the start time of the originating minor axis label interval, focus moves to that label.
    • If no such label exists, focus moves to the chronologically closest interval to the start time of the originating minor axis label interval.
  • If focus is on a major axis label, and axis-position is set to "bottom", and there is a minor axis with minor-axis.drillable set to "on", then move focus to a minor axis label. The specific label that gets focus is determined as follows:
    • If a label on a time interval exists on the minor axis that contains the start time of the originating major axis label interval, focus moves to that label.
    • If no such label exists, focus moves to the chronologically closest interval to the start time of the originating major axis label interval.
DownArrow
  • When focus is on a task, move focus and selection to first task in the next row.
  • When focus is on a dependency line (see Alt + < and Alt + >), move focus to the next dependency line with the same predecessor/successor.
  • If currently in move mode (see Ctrl + m), move the candidate position to the row below, preserving current time position.
  • If focus is on a major axis label, and axis-position is set to "top", and there is a minor axis with minor-axis.drillable set to "on", then move focus to a minor axis label. The specific label that gets focus is determined as follows:
    • If a label on a time interval exists on the minor axis that contains the start time of the originating major axis label interval, focus moves to that label.
    • If no such label exists, focus moves to the chronologically closest interval to the start time of the originating major axis label interval.
  • If focus is on a minor axis label, and axis-position is set to "bottom", and there is a major axis with major-axis.drillable set to "on", then move focus to a major axis label. The specific label that gets focus is determined as follows:
    • If a label on a time interval exists on the major axis that contains the start time of the originating minor axis label interval, focus moves to that label.
    • If no such label exists, focus moves to the chronologically closest interval to the start time of the originating minor axis label interval.
Ctrl + Shift + Space When focus is on a task, toggles expand/collapse on the containing row.
Ctrl + Space Multi-select task with focus.
Shift + <task navigation shortcut> Move focus and multi-select a task.
Ctrl + <task navigation shortcut> Move focus to a task but do not select.
Alt + UpArrow
  • When focus is on a task, and axis-position is set to "top", the following rules determine how focus moves to a time axis label if at least one time axis has drillable set to "on":
    • Both minor and major axes are drillable: Focus moves to a minor axis label.
    • Only major axis is drillable: Focus moves to a major axis label.
    The specific label that gets focus is determined as follows:
    • If a label on a time interval exists on the selected axis that contains the start time of the originating task, focus moves to that label.
    • If no such label exists, focus moves to the chronologically closest interval to the start time of the originating task.
  • When focus is on a time axis label, and axis-position is set to "bottom", move focus to a task. The rules for determining which task receives focus are identical to those described for Alt + DownArrow when focus is on a time axis label and axis-position is set to "top" (see its documentation for details).
Alt + DownArrow
  • When focus is on a task, and axis-position is set to "bottom", and at least one time axis has drillable set to "on", then move focus to a time axis label. The rules for determining which label receives focus are identical to those described for Alt + UpArrow when focus is on a task and axis-position is set to "top" (see its documentation for details).
  • When focus is on a time axis label, and axis-position is set to "top", move focus to a task. The task that gets focus is determined as follows. Note that "closest in time" refers to the task with the smallest absolute time difference between its start time and the originating time axis label's interval start time. "Visible task" means the task is visible in the current viewport:
    • In the row of the previously focused task, move focus to the closest visible task in time.
    • If such a task doesn't exist:
      • Of all the visible tasks that overlap the time interval of the originating time axis label, move focus to the closest task in time.
      • If there are no such visible task, then move focus to the closest visible task in time.
    • If no visible tasks exist, move focus to the previously focused task.
Alt + LeftArrow When focus is on a task and if row labels are rendered, move focus to the row label. In RTL reading direction, the opposite happens: if focus is on a row label, move focus to the last focused task in the same row (or the first task in the row if there are no previously focused task from the row).
Alt + RightArrow When focus is on a row label move focus to the last focused task in the same row (or the first task in the row if there are no previously focused task from the row). In RTL reading direction, the opposite happens: if focus is on a task and if row labels are rendered, move focus to the row label.
Ctrl + LeftArrow When focus is on a row label, collapse the row if it's currently expanded.
Ctrl + RightArrow When focus is on a row label, expand the row if it's currently collapsed.
Alt + < or Alt + , Move focus from a task to an associated dependency line connecting to a predecessor task (RTL: successor task). Note that the dependency line must have been created referencing the task's ID in its predecessor/successorTask objects for an association to exist. Also note that when focus is on a dependency line, the UpArrow and DownArrow keys are used to move focus to the next dependency line with the same predecessor/successor.
Alt + > or Alt + . Move focus from a task to an associated dependency line connecting to a successor task (RTL: predecessor task). Note that the dependency line must have been created referencing the task's ID in its predecessor/successorTask objects for an association to exist. Also note that when focus is on a dependency line, the UpArrow and DownArrow keys are used to move focus to the next dependency line with the same predecessor/successor.
Ctrl + Mousewheel Up Zoom In.
Ctrl + Mousewheel Down Zoom Out.
Ctrl + m When focus is on a selected task and dnd.move.tasks is enabled, enter move mode. See also the UpArrow, DownArrow, LeftArrow, RightArrow, PageUp or PageDown, Esc, and Enter sections for more information.
Alt + s When focus is on a selected task and task-defaults.resizable is enabled, enter resize (start) mode. See also the LeftArrow, RightArrow, PageUp or PageDown, Esc, and Enter sections for more information.
Alt + e When focus is on a selected task and task-defaults.resizable is enabled, enter resize (end) mode. See also the LeftArrow, RightArrow, PageUp or PageDown, Esc, and Enter sections for more information.
Esc Cancel drag, or exit move or resize mode, if currently dragging, or in move mode (see Ctrl + m) or resize mode (see Alt + s and Alt + e).
Enter
  • If currently in move mode (see Ctrl + m) or resize mode (see Alt + s and Alt + e), finalize the move or resize respectively.
  • If focus is on a time axis label, and if the time axis has drillable set to "on", then drill on the label. Afterwards, the focus is determined as follows:
    • If the label that was drilled on still exists, then focus continues to remain on that label.
    • If the label doesn't exist, move focus to the first visible and drill-able label in the current time axis.
    • If such a label doesn't exist, move focus to the first visible and drill-able label in the other time axis.
    • If such a label doesn't exist, move focus to the previously focused task.
    • If the previously focused task doesn't exist anymore, move focus to the first task of the first row.

Performance

Animation

Animation should only be enabled for visualizations of small to medium data sets.

Data Set Size

As a rule of thumb, it's recommended that applications limit the amount of data to display. It's important to note, that the gantt tries to limit rendering to only rows that are visible on the screen at any given time, but entire rows are still rendered, so limiting the number of tasks per row would tend to yield more performance gains than limiting the number of gantt rows in the dataset. Applications can, for example, use a filter to only show tasks for a specific set of time ranges.

Tracking Resize

By default, the element will track resizes and render at the new size. This functionality adds a small overhead to the initial render for simple elements like gauges or spark charts, which become noticable when using large numbers of these simple elements. To disable resize tracking, set trackResize to off. The application can manually request a re-render at any time by calling the refresh function.

Reading direction

As with any JET component, in the unusual case that the directionality (LTR or RTL) changes post-init, the component must be refresh()ed.


Usage

Signature:

interface GanttElement<K1, K2, D1 extends ojGantt.Dependency<K1, K2>|any, D2 extends ojGantt.DataTask|any, K3, D3 extends ojGantt.DataRow|any>

Generic Parameters
ParameterDescription
K1Type of key of the dependencyData dataprovider
K2Type of key of the task
K3Type of key of the rowData dataprovider
D1Type of data from the dependencyData dataprovider
D2Type of data of the task
D3Type of data from the rowData dataprovider
Typescript Import Format
//To typecheck the element APIs, import as below.
import { GanttElement } from "ojs/ojgantt";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojgantt";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

contextMenu

The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.

The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.

To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details.

Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

dependencyContentTemplate

The dependencyContentTemplate slot is used to specify custom dependency lines. The slot content must be a single <template> element.

Note that the content should be wrapped with a svg element in order to have the SVG namespace. The component will insert the entire SVG structure into DOM including the outer svg element.

When the template is executed, the component's binding context is extended with the following properties:

Properties of $current:
Name Type Description
content Object An object that describes the child content.
Properties
Name Type Description
predecessorX number The x coordinate of the predecessor task endpoint.
predecessorY number The y coordinate of the predecessor task endpoint.
successorX number The x coordinate of the successor task endpoint.
successorY number The y coordinate of the successor task endpoint.
data oj.ojGantt.Dependency.<K1, K2> The data object of the dependency.
itemData D1 The data provider row data object for the dependency.
state Object An object that reflects the current state of the dependency.
Properties
Name Type Description
focused boolean True if the dependency is focused.
hovered boolean True if the dependency is hovered.

dependencyTemplate

The dependencyTemplate slot is used to specify the template for creating each dependency line of the gantt. The slot content must be a single <template> element. The content of the template should only be one <oj-gantt-dependency> element. The reference data provider is that of the dependency-data attribute. See the oj-gantt-dependency doc for more details.

When the template is executed for each task, it will have access to the gantt's binding context containing the following properties:

  • $current - an object that contains information for the current dependency. (See oj.ojGantt.DependencyTemplateContext or the table below for a list of properties available on $current)
  • alias - if data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
componentElement Element The <oj-gantt> custom element
Deprecated:
Since Description
16.0.0 The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
data D1 The data object for the current dependency
index number The zero-based index of the current dependency
key K1 The key of the current dependency

referenceObjectMappingTemplate

The referenceObjectMappingTemplate slot is used to specify the template for generating the row reference object properties of the gantt. The slot content must be a <template> element. The content of the template should only be one <oj-gantt-reference-object> element. The reference data provider is that of the row-data attribute. See the oj-gantt-row doc for more details.

When the template is executed for each reference object, it will have access to the gantt's binding context containing the following properties:

Properties of $current:
Name Type Description
data Object The data object for the current reference object.
index number The index of the current reference object.
rowData Object The data object for the row the reference object belongs to.

rowAxisLabelTemplate

The rowAxisLabelTemplate slot is used to specify custom row axis label content. The slot content must be a single <template> element. This slot takes precedence over the rowAxis.label.renderer property if specified.

When the template is executed, the component's binding context is extended with the following properties:

Properties of $current:
Name Type Description
componentElement Element The gantt element.
Deprecated:
Since Description
16.0.0 The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
data D3 | null The data object for the row from the row-data DataProvider.
depth number The depth of the row. The depth of the outermost row under the invisible root is 1. This is available if the supplied row-data DataProvider is a TreeDataProvider.
itemData D2[] An array of the data provider data objects associated with the tasks belonging to the gantt row.
leaf boolean True if the current row is a leaf row. This is available if the supplied row-data DataProvider is a TreeDataProvider.
maxHeight number The maximum available height in px.
maxWidth number The maximum available width in px, as constrained by the row-axis.width and row-axis.max-width values. If row-axis.width is 'max-content' and row-axis.max-width is 'none', then this is -1, and the component will automatically allocate enough width space to accommodate the content.
parentElement Element A parent group element that takes a custom SVG fragment as the row label content. Modifications of the parentElement are not supported.
parentKey any The key of the parent row. The parent key is null for (the invisible) root. This is available if the supplied row-data DataProvider is a TreeDataProvider.
rowData oj.ojGantt.Row.<K2, D2, K3, D3> The data for the row.

rowMappingTemplate

The rowMappingTemplate slot is used to specify the template for generating the row properties of the gantt. The slot content must be a <template> element. The content of the template should only be one <oj-gantt-row> element. The reference data provider is that of the row-data attribute. See the oj-gantt-row doc for more details.

When the template is executed for each row, it will have access to the gantt's binding context containing the following properties:

Properties of $current:
Name Type Description
data D3 The data object for the row.
depth number The depth of the row. The depth of the outermost row under the invisible root is 1. This is available if the supplied row-data DataProvider is a TreeDataProvider.
index number The row index
key K3 The key of the row.
leaf boolean True if the current row is a leaf row. This is available if the supplied row-data DataProvider is a TreeDataProvider.
parentKey K3 The key of the parent row. The parent key is null for (the invisible) root. This is available if the supplied row-data DataProvider is a TreeDataProvider.

rowTemplate

The rowTemplate slot is used to specify the template for generating the row properties of the gantt. The slot content must be a <template> element. The content of the template should only be one <oj-gantt-row> element.See the oj-gantt-row doc for more details. See also the taskTemplate regarding showing empty rows. Note that the rows will render following the order in which they are found in the data.

When the template is executed for each row, it will have access to the gantt's binding context containing the following properties:

  • $current - an object that contains information for the current row. (See oj.ojGantt.RowTemplateContext or the table below for a list of properties available on $current)
  • alias - if data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
componentElement Element The <oj-gantt> custom element
id any The row id, if specified in the task template. Otherwise, it's the single task per row case, and this would be the task id.
index number The row index
tasks Array.<Object> The array of objects which are gantt tasks that belong to this row. The objects will have the following properties
Properties
Name Type Description
data Object The data object for the task
index number The zero-based index of the task
key any The key of the task
parentData Array.<Object> An array of data objects of the outermost to innermost parents of the task.
parentKey any The key of the parent task. The parent key is null for root tasks.

taskContentTemplate

The taskContentTemplate slot is used to specify custom content to be placed inside the taskbar. The slot content must be a single <template> element.

Note that the content should be wrapped with a svg element in order to have the SVG namespace. The component will insert the entire SVG structure into DOM including the outer svg element.

Note also that the (0,0) point is at the top left corner of the task in left-to-right reading direction, and at the top right corner in right-to-left reading direction.

When the template is executed, the component's binding context is extended with the following properties:

Properties of $current:
Name Type Description
content Object An object that describes the child content.
Properties
Name Type Description
height number Height of the child content in pixels.
width number Width of the child content in pixels.
data oj.ojGantt.RowTask.<K2, D2> The data object of the task.
itemData D2 The data provider data object for the task.
rowData oj.ojGantt.Row.<K2, D2, K3, D3> The data for the row the task belongs to.
state Object An object that reflects the current state of the task.
Properties
Name Type Description
expanded boolean True if the task is expanded.
focused boolean True if the task is focused.
hovered boolean True if the task is hovered.
selected boolean True if the task is selected.

taskMappingTemplate

The taskMappingTemplate slot is used to specify the template for creating each task of the gantt. The slot content must be a single <template> element. The content of the template should only be one <oj-gantt-task> element. The reference data provider is that of the row-data attribute. See the oj-gantt-task doc for more details. Note that if invalid values for both task start and end are specified, then the task is not rendered.

When the template is executed for each task, it will have access to the gantt's binding context containing the following properties:

Properties of $current:
Name Type Description
data D2 The data object for the current task
index number The index of the current task
rowData D3 The data object for the row the task belongs to.

taskTemplate

The taskTemplate slot is used to specify the template for creating each task of the gantt. The slot content must be a single <template> element. The content of the template should only be one <oj-gantt-task> element. The reference data provider is that of the task-data attribute. See the oj-gantt-task doc for more details. The row-id is optional if there is only one task in the row for every row; otherwise it must be specified. Note that if invalid values for both task start and end are specified, then the task is not rendered; if all the tasks belonging to a row are not rendered, the row will appear as an empty row.

When the template is executed for each task, it will have access to the gantt's binding context containing the following properties:

  • $current - an object that contains information for the current task. (See oj.ojGantt.TaskTemplateContext or the table below for a list of properties available on $current)
  • alias - if data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
componentElement Element The <oj-gantt> custom element
data Object The data object for the current task
index number The zero-based index of the current task
key any The key of the current task
parentData Array.<Object> An array of data objects of the outermost to innermost parents of the task.
parentKey any The key of the parent task. The parent key is null for root tasks.

tooltipTemplate

The tooltipTemplate slot is used to specify custom tooltip content. The slot content must be a single <template> element. This slot takes precedence over the tooltip.renderer property if specified.

When the template is executed, the component's binding context is extended with the following properties:

  • $current - an object that contains information for the current task. (See oj.ojGantt.TooltipContext or the table below for a list of properties available on $current)
Properties of $current:
Name Type Description
color string The color of the hovered task.
componentElement Element The gantt element.
Deprecated:
Since Description
16.0.0 The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
data oj.ojGantt.RowTask.<K2, D2> The data object of the hovered task.
itemData D2 The data provider data object for the hovered task.
parentElement Element The tooltip element. This can be used to change the tooltip border or background color.
rowData oj.ojGantt.Row.<K2, D2, K3, D3> The data for the row the hovered task belongs to.

Attributes

animation-on-data-change :"auto"|"none"

Defines the animation that is applied on data changes.
Supported Values:
Value
auto
none
Default Value:
  • "none"
Names
Item Name
Property animationOnDataChange
Property change event animationOnDataChangeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-animation-on-data-change-changed

animation-on-display :"auto"|"none"

Defines the animation that is shown on initial display.
Supported Values:
Value
auto
none
Default Value:
  • "none"
Names
Item Name
Property animationOnDisplay
Property change event animationOnDisplayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-animation-on-display-changed

as :string

An alias for the $current context variable passed to slot content for the dependencyTemplate, taskTemplate, or rowTemplate slots.
Default Value:
  • ""
Names
Item Name
Property as
Property change event asChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-as-changed

axis-position :"bottom"|"top"

The position of the major and minor axis.
Supported Values:
Value
bottom
top
Default Value:
  • "top"
Names
Item Name
Property axisPosition
Property change event axisPositionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-axis-position-changed

(nullable) dependencies :(Array.<oj.ojGantt.Dependency.<K1, K2>>|Promise.<Array.<oj.ojGantt.Dependency.<K1, K2>>>|null)

An array of objects that defines dependencies between tasks. Also accepts a Promise that will resolve with an array for deferred data rendering. No data will be rendered if the Promise is rejected.
Type details
Setter Type(Array.<oj.ojGantt.Dependency.<K1, K2>>|Promise.<Array.<oj.ojGantt.Dependency.<K1, K2>>>|null)
Getter Type(Promise.<Array.<oj.ojGantt.Dependency.<K1, K2>>>|null)
Default Value:
  • null
Names
Item Name
Property dependencies
Property change event dependenciesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-dependencies-changed

(nullable) dependency-data :(DataProvider<K1, D1>)

The DataProvider for the dependencies of the gantt. It should provide data rows where each row maps data for a single gantt dependency line. The row key will be used as the id for dependency lines. The DataProvider can either have an arbitrary data shape, in which case a template for the dependencyTemplate slot must be provided, or it can have ojGantt.Dependency as its data shape, in which case no template is required.
Default Value:
  • null
Names
Item Name
Property dependencyData
Property change event dependencyDataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-dependency-data-changed

dependency-line-shape :"rectilinear"|"straight"

Specifies the shape of the dependency lines.
Supported Values:
Value
rectilinear
straight
Default Value:
  • "rectilinear"
Names
Item Name
Property dependencyLineShape
Property change event dependencyLineShapeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-dependency-line-shape-changed

dnd :Object

Enables drag and drop functionality.
Names
Item Name
Property dnd
Property change event dndChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-dnd-changed

(nullable) dnd.move :Object

Defines a subset of high level configurations for moving elements to another location of some row within the gantt.

See the dnd attribute for usage examples.
Names
Item Name
Property dnd.move

(nullable) dnd.move.tasks :string

Enable or disable moving the non-baseline portions of selected tasks to a different location of some row within the same gantt using drag and drop or equivalent keyboard actions (See Keyboard End User Information). See also ojMove.

See the dnd attribute for usage examples.
Supported Values:
Value Description
disabled Disable moving selected tasks
enabled Enable moving selected tasks
Default Value:
  • "disabled"
Names
Item Name
Property dnd.move.tasks

drag-mode :"pan"|"select"

The action that is performed when a drag occurs on the gantt. "select" denotes marquee select, and is only available if multiple selection is turned on.
Supported Values:
Value
pan
select
Default Value:
  • "pan"
Names
Item Name
Property dragMode
Property change event dragModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-drag-mode-changed

end :string

The end time of the Gantt. A valid value is required in order for the Gantt to properly render. See Date and Time Formats for more details on the required string formats.
Default Value:
  • ""
Names
Item Name
Property end
Property change event endChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-end-changed

expanded :oj.KeySet<K3|K2>

Specifies the key set containing the ids of tasks that should be expanded on initial render. Use the KeySetImpl class to specify tasks to expand. Use the AllKeySetImpl class to expand all tasks.
Default Value:
  • new KeySetImpl()
Supports writeback:
  • true
Names
Item Name
Property expanded
Property change event expandedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-expanded-changed

gridlines :Object

An object specifying whether to display or hide the horizontal and vertical grid lines.
Names
Item Name
Property gridlines
Property change event gridlinesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-gridlines-changed

(nullable) gridlines.horizontal :string

Horizontal gridlines. The default value is "auto", which means Gantt will decide whether the grid lines should be made visible or hidden.

See the gridlines attribute for usage examples.
Supported Values:
Value
auto
hidden
visible
Default Value:
  • "auto"
Names
Item Name
Property gridlines.horizontal

(nullable) gridlines.vertical :string

Vertical gridlines. The default value is "auto", which means Gantt will decide whether the grid lines should be made visible or hidden.

See the gridlines attribute for usage examples.
Supported Values:
Value
auto
hidden
visible
Default Value:
  • "auto"
Names
Item Name
Property gridlines.vertical

(nullable) major-axis :Object

An object with the following properties, used to define the major time axis. If not specified, no major time axis is shown.
Names
Item Name
Property majorAxis
Property change event majorAxisChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-major-axis-changed

(nullable) major-axis.converter :(oj.ojTimeAxis.Converters|oj.Converter.<string>)

A converter (an instance that duck types oj.Converter) used to format the labels of the major axis for all 'scale' values, or an object literal whose keys are 'scale' values that map specific converters for scale specific formatting (see oj.ojTimeAxis.Converters). The single converter option has been deprecated as of 11.0.0. Please avoid using this type as it will be removed in the future. See also oj.DateTimeConverter.

See the major-axis attribute for usage examples.
Default Value:
  • {"default": null, "seconds": new DateTimeConverter.IntlDateTimeConverter({'hour': 'numeric', 'minute': '2-digit', 'second': '2-digit'}), "minutes": new DateTimeConverter.IntlDateTimeConverter({'hour': 'numeric', 'minute': '2-digit'}), "hours": new DateTimeConverter.IntlDateTimeConverter({'hour': 'numeric'}), "days": new DateTimeConverter.IntlDateTimeConverter({'month': 'numeric', 'day': '2-digit'}), "weeks": new DateTimeConverter.IntlDateTimeConverter({'month': 'numeric', 'day': '2-digit'}), "months": new DateTimeConverter.IntlDateTimeConverter({'month': 'long'}), "quarters": new DateTimeConverter.IntlDateTimeConverter({'month': 'long'}), "years": new DateTimeConverter.IntlDateTimeConverter({'year': 'numeric'})}
Names
Item Name
Property majorAxis.converter

(nullable) major-axis.drillable :string

Specifies whether label drilling is enabled. When a label is drilled, an ojMajorAxisDrill event is fired. Note that only visible labels can be drilled.

See the major-axis attribute for usage examples.
Supported Values:
Value
off
on
Default Value:
  • "off"
Names
Item Name
Property majorAxis.drillable

(nullable) major-axis.height :number

Specifies the height of the major axis in pixels. If not specified or if the height specified is less than the inherent minimum height (which is a function of the axis label sizes), a default value will be used. Applications should make sure not to set heights that would make the total axes height too large for the viewport to accomodate.

See the major-axis attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property majorAxis.height

(nullable) major-axis.scale :(string|DvtTimeComponentScale)

The time scale used for the major axis.

See the major-axis attribute for usage examples. The scale must either be a scale string (see acceptable values) or a custom instance of DvtTimeComponentScale.
Supported Values:
Value
days
hours
minutes
months
quarters
seconds
weeks
years
Default Value:
  • null
Names
Item Name
Property majorAxis.scale

(nullable) major-axis.zoom-order :Array.<(string|DvtTimeComponentScale)>

An array of strings or instances of DvtTimeComponentScale used for zooming from longest to shortest. If not specified, the 'scale' specified on the axis will be used at all zoom levels.

See the major-axis attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property majorAxis.zoomOrder

minor-axis :Object

An object with the following properties, used to define the minor time axis. This is required for the Gantt to render properly.
Names
Item Name
Property minorAxis
Property change event minorAxisChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-minor-axis-changed

(nullable) minor-axis.converter :(oj.ojTimeAxis.Converters|oj.Converter.<string>)

A converter (an instance that duck types oj.Converter) used to format the labels of the minor axis for all 'scale' values, or an object literal whose keys are 'scale' values that map specific converters for scale specific formatting (see oj.ojTimeAxis.Converters). The single converter option has been deprecated as of 11.0.0. Please avoid using this type as it will be removed in the future. See also oj.DateTimeConverter.

See the minor-axis attribute for usage examples.
Default Value:
  • {"default": null, "seconds": new DateTimeConverter.IntlDateTimeConverter({'hour': 'numeric', 'minute': '2-digit', 'second': '2-digit'}), "minutes": new DateTimeConverter.IntlDateTimeConverter({'hour': 'numeric', 'minute': '2-digit'}), "hours": new DateTimeConverter.IntlDateTimeConverter({'hour': 'numeric'}), "days": new DateTimeConverter.IntlDateTimeConverter({'month': 'numeric', 'day': '2-digit'}), "weeks": new DateTimeConverter.IntlDateTimeConverter({'month': 'numeric', 'day': '2-digit'}), "months": new DateTimeConverter.IntlDateTimeConverter({'month': 'long'}), "quarters": new DateTimeConverter.IntlDateTimeConverter({'month': 'long'}), "years": new DateTimeConverter.IntlDateTimeConverter({'year': 'numeric'})}
Names
Item Name
Property minorAxis.converter

(nullable) minor-axis.drillable :string

Specifies whether label drilling is enabled. When a label is drilled, an ojMinorAxisDrill event is fired. Note that only visible labels can be drilled.

See the minor-axis attribute for usage examples.
Supported Values:
Value
off
on
Default Value:
  • "off"
Names
Item Name
Property minorAxis.drillable

(nullable) minor-axis.height :number

Specifies the height of the minor axis in pixels. If not specified or if the height specified is less than the inherent minimum height (which is a function of the axis label sizes), a default value will be used. Applications should make sure not to set heights that would make the total axes height too large for the viewport to accomodate.

See the minor-axis attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property minorAxis.height

(nullable) minor-axis.scale :(string|DvtTimeComponentScale)

The time scale used for the minor axis. This is required in order for the Gantt to render properly.

See the minor-axis attribute for usage examples. The scale must either be a scale string (see acceptable values) or a custom instance of DvtTimeComponentScale.
Supported Values:
Value
days
hours
minutes
months
quarters
seconds
weeks
years
Default Value:
  • null
Names
Item Name
Property minorAxis.scale

(nullable) minor-axis.zoom-order :Array.<(string|DvtTimeComponentScale)>

An array of strings or instances of DvtTimeComponentScale used for zooming from longest to shortest. If not specified, the 'scale' specified on the axis will be used at all zoom levels.

See the minor-axis attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property minorAxis.zoomOrder

reference-objects :Array.<oj.ojGantt.ReferenceObject>

The array of reference objects associated with the gantt. For each reference object, a line is rendered at the specified value. Currently only the first reference object in the array is supported. Any additional objects supplied in the array will be ignored.
Default Value:
  • []
Names
Item Name
Property referenceObjects
Property change event referenceObjectsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-reference-objects-changed

row-axis :Object

An object defining properties for the row labels region.
Names
Item Name
Property rowAxis
Property change event rowAxisChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-row-axis-changed

(nullable) row-axis.label :Object

An object defining the properties of the row labels.

See the row-axis attribute for usage examples.
Names
Item Name
Property rowAxis.label

(nullable) row-axis.label.renderer :((context: ojGantt.RowAxisLabelRendererContext<K2, D2>) => ({insert: Element}))

An optional function that returns custom content for the row label. The custom content must be an SVG element.

See the row-axis attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property rowAxis.label.renderer

(nullable) row-axis.max-width :string

Defines the maximum width of the region in pixels (e.g. '50px') or percent (e.g. '15%') of the element width. If 'none' is specified, then the width has no maximum value. Default labels will truncate to fit.

See the row-axis attribute for usage examples.
Default Value:
  • "none"
Names
Item Name
Property rowAxis.maxWidth

(nullable) row-axis.rendered :string

Defines whether row labels are rendered.

See the row-axis attribute for usage examples.
Supported Values:
Value
off
on
Default Value:
  • "off"
Names
Item Name
Property rowAxis.rendered

(nullable) row-axis.width :string

Defines the width of the region in pixels (e.g. '50px') or percent (e.g. '15%') of the element width. If 'max-content' is specified, then the intrinsic width of the widest label content is used. Default labels will truncate to fit.

See the row-axis attribute for usage examples.
Default Value:
  • "max-content"
Names
Item Name
Property rowAxis.width

(nullable) row-data :(DataProvider<K3, D3>)

The DataProvider for the rows of the gantt. It should provide data rows where each maps data for a single gantt row. This DataProvider takes precedence over the task-data DataProvider if specified. If the nature of the data is hierarchical, it's recommended that applications turn on row labels via the row-axis.rendered attribute to show the expand and collapse affordances. The DataProvider can either have an arbitrary data shape, in which case a template for the rowMappingTemplate slot for generating gantt row properties and a template for the taskMappingTemplate slot for generating gantt task properties must be provided, or it can have ojGantt.DataRow as its data shape, in which case no template is required. Providing a template for the referenceObjectMappingTemplate slot for generating the gantt row reference object properties is optional.
Default Value:
  • null
Names
Item Name
Property rowData
Property change event rowDataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-row-data-changed

row-defaults :Object

An object with the following properties, used to define default styling for rows in the Gantt.
Names
Item Name
Property rowDefaults
Property change event rowDefaultsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-row-defaults-changed

(nullable) row-defaults.height :number

The height of the row in pixels. If specified, tasks are vertically middle aligned within the row. Since task heights can also be set, via the task-defaults.height attribute or in the data definition, applications typically should make sure that their task heights are less than the row height. If not specified, a default height is calculated based on the height of the tasks within the row.

See the row-defaults attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property rowDefaults.height

(nullable) rows :(Array.<oj.ojGantt.Row.<K2, D2, K3, D3>>|Promise.<Array.<oj.ojGantt.Row.<K2, D2, K3, D3>>>|null)

An array of objects with the following properties, used to define rows and tasks within rows. Also accepts a Promise that will resolve with an array for deferred data rendering. No data will be rendered if the Promise is rejected.
Type details
Setter Type(Array.<oj.ojGantt.Row.<K2, D2, K3, D3>>|Promise.<Array.<oj.ojGantt.Row.<K2, D2, K3, D3>>>|null)
Getter Type(Promise.<Array.<oj.ojGantt.Row.<K2, D2, K3, D3>>>|null)
Default Value:
  • null
Names
Item Name
Property rows
Property change event rowsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-rows-changed

scroll-position :Object

The current scroll position of Gantt. The scroll position is updated when the vertical scroll position has changed. The value contains the y scroll position, the index of the row closest to the top of the viewport, and the vertical offset from the position of the row to the actual scroll position.

The default value contains just the scroll position. If there is no data then the 'rowIndex' sub-property will not be available.

When setting the scrollPosition property, applications can change any combination of the sub-properties. If multiple sub-properties are set at once they will be used in rowIndex, pixel order where the latter serves as hints. If offsetY is specified, it will be used to adjust the scroll position from the position where the index of the row is located.

If a sparse object is set the other sub-properties will be populated and updated once Gantt has scrolled to that position.

Default Value:
  • {"y": 0}
Supports writeback:
  • true
Names
Item Name
Property scrollPosition
Property change event scrollPositionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scroll-position-changed

(nullable) scroll-position.offset-y :number

The vertical offset in pixels relative to the row identified by scroll-position.rowIndex.

See the scroll-position attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property scrollPosition.offsetY

(nullable) scroll-position.row-index :number

The zero-based index of the row.

See the scroll-position attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property scrollPosition.rowIndex

(nullable) scroll-position.y :number

The vertical position in pixels.

See the scroll-position attribute for usage examples.
Default Value:
  • 0
Names
Item Name
Property scrollPosition.y

selection :K2[]

An array containing the ids of the initially selected tasks.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property selection
Property change event selectionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-changed

selection-behavior :"highlightDependencies"|"normal"

Defines the visual behavior upon task selection.
Supported Values:
Value Description
highlightDependencies All dependency lines are initially not shown, but upon selection of a task, its dependent tasks and associated dependency lines are highlighted.
normal There are no additional visual treatments beyond the normal task selection
Default Value:
  • "normal"
Names
Item Name
Property selectionBehavior
Property change event selectionBehaviorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-behavior-changed

selection-mode :"none"|"single"|"multiple"

The type of selection behavior that is enabled on the Gantt. This attribute controls the number of selections that can be made via selection gestures at any given time.

If single or multiple is specified, selection gestures will be enabled, and the Gantt's selection styling will be applied to all items specified by the selection attribute. If none is specified, selection gestures will be disabled, and the Gantt's selection styling will not be applied to any items specified by the selection attribute.

Changing the value of this attribute will not affect the value of the selection attribute.

Supported Values:
Value Description
multiple Multiple items can be selected at the same time.
none Selection is disabled.
single Only a single item can be selected at a time.
Default Value:
  • "none"
Names
Item Name
Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-mode-changed

start :string

The start time of the Gantt. A valid value is required for the Gantt to render properly. See Date and Time Formats for more details on the required string formats.
Default Value:
  • ""
Names
Item Name
Property start
Property change event startChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-start-changed

task-aggregation :"on"|"off"

Specifies whether to apply a horizontally stacked visual treatment to chronologically adjacent tasks, i.e. when the end time of a previous task is equal to the start time of the next task.
Supported Values:
Value
off
on
Default Value:
  • "off"
Names
Item Name
Property taskAggregation
Property change event taskAggregationChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-task-aggregation-changed

(nullable) task-data :(DataProvider<K2, D2>)

The DataProvider for the tasks of the gantt. It should provide data rows where each row maps data for a single gantt task. The row key will be used as the id for gantt tasks. If the nature of the data is hierarchical, it's recommended that applications turn on row labels via the row-axis.rendered attribute to show the expand and collapse affordances. The DataProvider can either have an arbitrary data shape, in which case a template for the taskTemplate slot must be provided, or it can have ojGantt.DataTask as its data shape, in which case no template is required. Providing a template for the rowTemplate slot for generating the gantt row properties is optional.
Default Value:
  • null
Names
Item Name
Property taskData
Property change event taskDataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-task-data-changed

task-defaults :Object

An object with the following properties, used to define default styling for tasks in the Gantt. Properties specified on this object may be overridden by specifications on individual tasks.
Names
Item Name
Property taskDefaults
Property change event taskDefaultsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-task-defaults-changed

(nullable) task-defaults.attribute :Object

An object with the following properties, used to define default styling for task attribute elements.

See the task-defaults attribute for usage examples.
Names
Item Name
Property taskDefaults.attribute

(nullable) task-defaults.attribute.svg-class-name :string

A space delimited list of CSS style classes defining the style of the attribute.

See the task-defaults attribute for usage examples.
Default Value:
  • ""
Names
Item Name
Property taskDefaults.attribute.svgClassName

(nullable) task-defaults.attribute.svg-style :Partial<CSSStyleDeclaration>

The CSS style defining the style of the attribute. Only SVG CSS style properties are supported.

See the task-defaults attribute for usage examples.
Default Value:
  • {}
Names
Item Name
Property taskDefaults.attribute.svgStyle

(nullable) task-defaults.baseline :Object

An object with the following properties, used to define default styling for task baseline elements.

See the task-defaults attribute for usage examples.
Names
Item Name
Property taskDefaults.baseline

(nullable) task-defaults.baseline.border-radius :string

The border radius of the baseline. Accepts values allowed in CSS border-radius attribute. The default value comes from the CSS and varies based on theme.

See the task-defaults attribute for usage examples.
Names
Item Name
Property taskDefaults.baseline.borderRadius

(nullable) task-defaults.baseline.height :number

The height of the baseline in pixels. If not specified, a default height is used based upon the baseline type.

See the task-defaults attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property taskDefaults.baseline.height

(nullable) task-defaults.baseline.svg-class-name :string

A space delimited list of CSS style classes defining the style of the baseline.

See the task-defaults attribute for usage examples.
Default Value:
  • ""
Names
Item Name
Property taskDefaults.baseline.svgClassName

(nullable) task-defaults.baseline.svg-style :Partial<CSSStyleDeclaration>

The CSS style defining the style of the baseline. Only SVG CSS style properties are supported.

See the task-defaults attribute for usage examples.
Default Value:
  • {}
Names
Item Name
Property taskDefaults.baseline.svgStyle

(nullable) task-defaults.border-radius :string

The border radius of the task. Accepts values allowed in CSS border-radius attribute. The default value comes from the CSS and varies based on theme.

See the task-defaults attribute for usage examples.
Names
Item Name
Property taskDefaults.borderRadius

(nullable) task-defaults.downtime :Object

An object with the following properties, used to define default styling for task downtime elements.

See the task-defaults attribute for usage examples.
Names
Item Name
Property taskDefaults.downtime

(nullable) task-defaults.downtime.svg-class-name :string

A space delimited list of CSS style classes defining the style of the downtime.

See the task-defaults attribute for usage examples.
Default Value:
  • ""
Names
Item Name
Property taskDefaults.downtime.svgClassName

(nullable) task-defaults.downtime.svg-style :Partial<CSSStyleDeclaration>

The CSS style defining the style of the downtime. Only SVG CSS style properties are supported.

See the task-defaults attribute for usage examples.
Default Value:
  • {}
Names
Item Name
Property taskDefaults.downtime.svgStyle

(nullable) task-defaults.height :number

The height of the task in pixels. If not specified, a default height is used depending on the task type, and whether the baseline is specified. Since row heights can also be set via the row-defaults.height attribute, applications typically should make sure that their task heights are less than the row height.

See the task-defaults attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property taskDefaults.height

(nullable) task-defaults.label-position :(string|Array<string>)

The position of the label relative to the task. An array of values is also supported. If an array is specified, then the values are traversed until a position that can fully display the label is found. If 'max' is specified in the array, then of all the positions evaluated up to that point of the traversal, the one with the largest space is used (label is truncated to fit). Naturally, 'max' is ignored if it's specified as the first value of the array. If the last value of the array is reached, but the label cannot be fully displayed, then the label is placed at that position, truncated to fit. Due to space constraints in the milestone and task with progress cases, the inner positions will exhibit the following behaviors:
  • For milestones, specifying 'innerStart', 'innerEnd', or 'innerCenter' would be equivalent to specifying 'start', 'end', and 'end' respectively.
  • For tasks with progress, 'innerCenter' means the label will be aligned to the end of the progress bar, either placed inside or outside of the progress, whichever is the larger space. 'innerStart' and 'innerEnd' positions are honored when there is enough space to show the label at those positions. Otherwise, the aforementioned 'innerCenter' behavior is exhibited.


See the task-defaults attribute for usage examples.
Supported Values:
Value
end
innerCenter
innerEnd
innerStart
none
start
Default Value:
  • ["end", "innerCenter", "start", "max"]
Names
Item Name
Property taskDefaults.labelPosition

(nullable) task-defaults.overlap :Object

An object with the following properties, used to configure the placements of chronologically overlapping tasks.

See the task-defaults attribute for usage examples.
Names
Item Name
Property taskDefaults.overlap

(nullable) task-defaults.overlap.behavior :string

The behavior when a task (task2) overlaps a chronologically previous adjacent task (task1).
  • 'stack': task2 is placed above task1 if there is no chronological conflict with previous tasks. Otherwise, task2 is shifted down relative to task1 by the specified offset amount.
  • 'stagger': task2 is shifted up or down relative to its normal position by the specified offset amount, depending on whether task1 was shifted down or up respectively, such that the chain of overlapping tasks it participates in forms a zigzag pattern. If task1 is the first task of the chain, then task2 is shifted down.
  • 'overlay': task2 remains in its normal position (ignoring the specified offset amount), and is placed above all tasks it overlaps with.
  • 'auto': The behavior depends on the row-defaults.height value: the behavior is 'stack' if row height is not specified or null, and the behavior is 'stagger' otherwise.


See the task-defaults attribute for usage examples.
Supported Values:
Value
auto
overlay
stack
stagger
Default Value:
  • "auto"
Names
Item Name
Property taskDefaults.overlap.behavior

(nullable) task-defaults.overlap.offset :number

The vertical offset amount in pixels, to be used to lay out overlapping tasks as per overlap.behavior. If not specified or null, a default amount is used depending on the row-defaults.height value.

See the task-defaults attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property taskDefaults.overlap.offset

(nullable) task-defaults.overtime :Object

An object with the following properties, used to define default styling for task overtime elements.

See the task-defaults attribute for usage examples.
Names
Item Name
Property taskDefaults.overtime

(nullable) task-defaults.overtime.svg-class-name :string

A space delimited list of CSS style classes defining the style of the overtime.

See the task-defaults attribute for usage examples.
Default Value:
  • ""
Names
Item Name
Property taskDefaults.overtime.svgClassName

(nullable) task-defaults.overtime.svg-style :Partial<CSSStyleDeclaration>

The CSS style defining the style of the overtime. Only SVG CSS style properties are supported.

See the task-defaults attribute for usage examples.
Default Value:
  • {}
Names
Item Name
Property taskDefaults.overtime.svgStyle

(nullable) task-defaults.progress :Object

An object with the following properties, used to define default styling for progress bars on non-milestone tasks.

See the task-defaults attribute for usage examples.
Names
Item Name
Property taskDefaults.progress

(nullable) task-defaults.progress.border-radius :string

The border radius of the progress bar. Accepts values allowed in CSS border-radius attribute. The default value comes from the CSS and varies based on theme.

See the task-defaults attribute for usage examples.
Names
Item Name
Property taskDefaults.progress.borderRadius

(nullable) task-defaults.progress.height :string

Specifies the height of the progress bar in pixels (e.g. '50px') or percent of the associated task bar (e.g. '15%').

See the task-defaults attribute for usage examples.
Default Value:
  • "100%"
Names
Item Name
Property taskDefaults.progress.height

(nullable) task-defaults.progress.svg-class-name :string

A space delimited list of CSS style classes to apply to the progress bar. Note that only CSS style applicable to SVG elements can be used.

See the task-defaults attribute for usage examples.
Default Value:
  • ""
Names
Item Name
Property taskDefaults.progress.svgClassName

(nullable) task-defaults.progress.svg-style :Partial<CSSStyleDeclaration>

The CSS inline style to apply to the progress bar. Only CSS style applicable to SVG elements can be used. Only SVG CSS style properties are supported.

See the task-defaults attribute for usage examples.
Default Value:
  • {}
Names
Item Name
Property taskDefaults.progress.svgStyle

(nullable) task-defaults.resizable :string

Enable or disable resizing the non-baseline portions of selected tasks. See also ojResize.

See the task-defaults attribute for usage examples.
Supported Values:
Value Description
disabled Disable selected tasks resize
enabled Enable selected tasks resize
Default Value:
  • "disabled"
Names
Item Name
Property taskDefaults.resizable

(nullable) task-defaults.svg-class-name :string

A space delimited list of CSS style classes defining the style of the task.

See the task-defaults attribute for usage examples.
Default Value:
  • ""
Names
Item Name
Property taskDefaults.svgClassName

(nullable) task-defaults.svg-style :Partial<CSSStyleDeclaration>

The CSS style defining the style of the task. Only SVG CSS style properties are supported.

See the task-defaults attribute for usage examples.
Default Value:
  • {}
Names
Item Name
Property taskDefaults.svgStyle

(nullable) task-defaults.type :string

Defines the task type to be rendered.

If "milestone", and if the task's "start" and "end" values are specified and unequal, the "start" value is used to evaluate position.

If "auto", the type is inferred from the data:
  • If "start" and "end" values are specified and unequal, "normal" type is assumed.
  • Otherwise, "milestone" type is assumed.
See the task-defaults attribute for usage examples.
Supported Values:
Value
auto
milestone
normal
summary
Default Value:
  • "auto"
Names
Item Name
Property taskDefaults.type

time-cursor :"on"|"off"

Specifies whether the time cursor is enabled.
Supported Values:
Value
off
on
Default Value:
  • "off"
Names
Item Name
Property timeCursor
Property change event timeCursorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-time-cursor-changed

tooltip :Object

An object containing an optional callback function for tooltip customization.
Names
Item Name
Property tooltip
Property change event tooltipChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-tooltip-changed

(nullable) tooltip.renderer :((context: ojGantt.TooltipRendererContext<K2, D2, K3, D3>) => ({insert: Element|string}|{preventDefault: boolean}))

A function that returns a custom tooltip. Note that the default is for a tooltip to be displayed.

See the tooltip attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property tooltip.renderer

track-resize :"on"|"off"

Defines whether the element will automatically render in response to changes in size. If set to off, then the application is responsible for calling refresh to render the element at the new size.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property trackResize
Property change event trackResizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-track-resize-changed

translations :object|null

A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

If the component does not contain any translatable resource, the default value of this attribute will be null. If not, an object containing all resources relevant to the component.

If this component has translations, their documentation immediately follows this doc entry.

Names
Item Name
Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-translations-changed

(nullable) translations.accessible-contains-controls :string

Used to describe a container that contains controls.

See the translations attribute for usage examples.

Since:
  • 13.0.0
Names
Item Name
Property translations.accessibleContainsControls

(nullable) translations.accessible-dependency-info :string

Provides properties to customize the screen reader text describing a specific dependency.

See the translations attribute for usage examples.

Default Value:
  • "Dependency type {0}, connects {1} to {2}"
Since:
  • 2.3.0
Names
Item Name
Property translations.accessibleDependencyInfo

(nullable) translations.accessible-predecessor-info :string

Provides properties to customize the screen reader text describing predecessors of a task.

See the translations attribute for usage examples.

Default Value:
  • "{0} predecessors"
Since:
  • 2.3.0
Names
Item Name
Property translations.accessiblePredecessorInfo

(nullable) translations.accessible-successor-info :string

Provides properties to customize the screen reader text describing successors of a task.

See the translations attribute for usage examples.

Default Value:
  • "{0} successors"
Since:
  • 2.3.0
Names
Item Name
Property translations.accessibleSuccessorInfo

(nullable) translations.accessible-task-type-milestone :string

Used to describe milestone task type for accessibility.

See the translations property for usage examples.

Default Value:
  • "Milestone"
Since:
  • 5.0.0
Names
Item Name
Property translations.accessibleTaskTypeMilestone

(nullable) translations.accessible-task-type-summary :string

Used to describe summary task type for accessibility.

See the translations property for usage examples.

Default Value:
  • "Summary"
Since:
  • 5.0.0
Names
Item Name
Property translations.accessibleTaskTypeSummary

(nullable) translations.component-name :string

Used to describe the data visualization type for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Gantt"
Names
Item Name
Property translations.componentName

(nullable) translations.finish-finish-dependency-aria-desc :string

Used to describe finish to finish dependency type for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "finish to finish"
Since:
  • 2.3.0
Names
Item Name
Property translations.finishFinishDependencyAriaDesc

(nullable) translations.finish-start-dependency-aria-desc :string

Used to describe finish to start dependency type for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "finish to start"
Since:
  • 2.3.0
Names
Item Name
Property translations.finishStartDependencyAriaDesc

(nullable) translations.label-and-value :string

Used to display a label and its value.

See the translations attribute for usage examples.

Default Value:
  • "{0}: {1}"
Names
Item Name
Property translations.labelAndValue

(nullable) translations.label-attribute :string

Used for the default tooltip label for task attribute information.

See the translations attribute for usage examples.

Default Value:
  • "Attribute"
Since:
  • 12.0.0
Names
Item Name
Property translations.labelAttribute

(nullable) translations.label-baseline-date :string

Used for the default tooltip label for baseline milestone information.

See the translations attribute for usage examples.

Default Value:
  • "Baseline Date"
Since:
  • 4.0.0
Names
Item Name
Property translations.labelBaselineDate

(nullable) translations.label-baseline-end :string

Used for the default tooltip label for baseline end time information.

See the translations attribute for usage examples.

Default Value:
  • "Baseline End"
Since:
  • 4.0.0
Names
Item Name
Property translations.labelBaselineEnd

(nullable) translations.label-baseline-start :string

Used for the default tooltip label for baseline start time information.

See the translations attribute for usage examples.

Default Value:
  • "Baseline Start"
Since:
  • 4.0.0
Names
Item Name
Property translations.labelBaselineStart

(nullable) translations.label-clear-selection :string

Text shown for clearing multiple selection on touch devices.

See the translations attribute for usage examples.

Default Value:
  • "Clear Selection"
Names
Item Name
Property translations.labelClearSelection

(nullable) translations.label-count-with-total :string

Used to display a count out of a total.

See the translations attribute for usage examples.

Default Value:
  • "{0} of {1}"
Names
Item Name
Property translations.labelCountWithTotal

(nullable) translations.label-data-visualization :string

Label for data visualizations used for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Data Visualization"
Names
Item Name
Property translations.labelDataVisualization

(nullable) translations.label-date :string

Used for the default tooltip label for milestone information.

See the translations attribute for usage examples.

Default Value:
  • "Date"
Since:
  • 4.0.0
Names
Item Name
Property translations.labelDate

(nullable) translations.label-downtime-end :string

Used for the default tooltip label for downtime end time information.

See the translations attribute for usage examples.

Default Value:
  • "Downtime End"
Since:
  • 12.0.0
Names
Item Name
Property translations.labelDowntimeEnd

(nullable) translations.label-downtime-start :string

Used for the default tooltip label for downtime start time information.

See the translations attribute for usage examples.

Default Value:
  • "Downtime Start"
Since:
  • 12.0.0
Names
Item Name
Property translations.labelDowntimeStart

(nullable) translations.label-end :string

Used for the default tooltip label for end time information.

See the translations attribute for usage examples.

Default Value:
  • "End"
Since:
  • 2.3.0
Names
Item Name
Property translations.labelEnd

(nullable) translations.label-invalid-data :string

Text shown when the component receives invalid data.

See the translations attribute for usage examples.

Default Value:
  • "Invalid data"
Names
Item Name
Property translations.labelInvalidData

(nullable) translations.label-label :string

Used for the default tooltip label for task label information.

See the translations attribute for usage examples.

Default Value:
  • "Label"
Since:
  • 2.3.0
Names
Item Name
Property translations.labelLabel

(nullable) translations.label-level :string

Used to describe row level in a hierarchical gantt for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Level"
Since:
  • 6.1.0
Names
Item Name
Property translations.labelLevel

(nullable) translations.label-move-by :string

Used for the default tooltip label for task move scale change.

See the translations attribute for usage examples.

Default Value:
  • "Move By"
Since:
  • 5.1.0
Names
Item Name
Property translations.labelMoveBy

(nullable) translations.label-no-data :string

Text shown when the component receives no data.

See the translations attribute for usage examples.

Default Value:
  • "No data to display"
Names
Item Name
Property translations.labelNoData

(nullable) translations.label-overtime-end :string

Used for the default tooltip label for overtime end time information.

See the translations attribute for usage examples.

Default Value:
  • "Overtime End"
Since:
  • 12.0.0
Names
Item Name
Property translations.labelOvertimeEnd

(nullable) translations.label-overtime-start :string

Used for the default tooltip label for overtime start time information.

See the translations attribute for usage examples.

Default Value:
  • "Overtime Start"
Since:
  • 12.0.0
Names
Item Name
Property translations.labelOvertimeStart

(nullable) translations.label-progress :string

Used for the default tooltip label for task progress information.

See the translations attribute for usage examples.

Default Value:
  • "Progress"
Since:
  • 4.0.0
Names
Item Name
Property translations.labelProgress

(nullable) translations.label-resize-by :string

Used for the default tooltip label for task resize scale change.

See the translations attribute for usage examples.

Default Value:
  • "Resize By"
Since:
  • 7.0.0
Names
Item Name
Property translations.labelResizeBy

(nullable) translations.label-row :string

Used for the default tooltip label for row information.

See the translations attribute for usage examples.

Default Value:
  • "Row"
Since:
  • 2.3.0
Names
Item Name
Property translations.labelRow

(nullable) translations.label-start :string

Used for the default tooltip label for start time information.

See the translations attribute for usage examples.

Default Value:
  • "Start"
Since:
  • 2.3.0
Names
Item Name
Property translations.labelStart

(nullable) translations.row-axis-label :string

Used to describe the row axis for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Row labels"
Since:
  • 17.1.0
Names
Item Name
Property translations.rowAxisLabel

(nullable) translations.start-finish-dependency-aria-desc :string

Used to describe start to finish dependency type for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "start to finish"
Since:
  • 2.3.0
Names
Item Name
Property translations.startFinishDependencyAriaDesc

(nullable) translations.start-start-dependency-aria-desc :string

Used to describe start to start dependency type for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "start to start"
Since:
  • 2.3.0
Names
Item Name
Property translations.startStartDependencyAriaDesc

(nullable) translations.state-collapsed :string

Used to describe the collapsed state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Collapsed"
Names
Item Name
Property translations.stateCollapsed

(nullable) translations.state-drillable :string

Used to describe a drillable object for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Drillable"
Names
Item Name
Property translations.stateDrillable

(nullable) translations.state-expanded :string

Used to describe the expanded state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Expanded"
Names
Item Name
Property translations.stateExpanded

(nullable) translations.state-hidden :string

Used to describe the hidden state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Hidden"
Names
Item Name
Property translations.stateHidden

(nullable) translations.state-isolated :string

Used to describe the isolated state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Isolated"
Names
Item Name
Property translations.stateIsolated

(nullable) translations.state-maximized :string

Used to describe the maximized state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Maximized"
Names
Item Name
Property translations.stateMaximized

(nullable) translations.state-minimized :string

Used to describe the minimized state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Minimized"
Names
Item Name
Property translations.stateMinimized

(nullable) translations.state-selected :string

Used to describe the selected state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Selected"
Names
Item Name
Property translations.stateSelected

(nullable) translations.state-unselected :string

Used to describe the unselected state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Unselected"
Names
Item Name
Property translations.stateUnselected

(nullable) translations.state-visible :string

Used to describe the visible state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Visible"
Names
Item Name
Property translations.stateVisible

(nullable) translations.task-move-cancelled :string

Used to indicate task move is cancelled for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Task move cancelled"
Since:
  • 5.1.0
Names
Item Name
Property translations.taskMoveCancelled

(nullable) translations.task-move-finalized :string

Used to indicate task move is finalized for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Task move finalized"
Since:
  • 5.1.0
Names
Item Name
Property translations.taskMoveFinalized

(nullable) translations.task-move-initiated :string

Used to indicate task move is initiated for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Task move initiated"
Since:
  • 5.1.0
Names
Item Name
Property translations.taskMoveInitiated

(nullable) translations.task-move-initiated-instruction :string

Used to indicate task move instructions for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Use the arrow keys to move"
Since:
  • 5.1.0
Names
Item Name
Property translations.taskMoveInitiatedInstruction

(nullable) translations.task-move-selection-info :string

Used to indicate whether other tasks are also selected during move.

See the translations attribute for usage examples.

Default Value:
  • "{0} others selected"
Since:
  • 5.1.0
Names
Item Name
Property translations.taskMoveSelectionInfo

(nullable) translations.task-resize-cancelled :string

Used to indicate task resize is cancelled for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Task resize cancelled"
Since:
  • 7.0.0
Names
Item Name
Property translations.taskResizeCancelled

(nullable) translations.task-resize-end-handle :string

Used to indicate task end resize handle for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Task resize end handle"
Since:
  • 7.0.0
Names
Item Name
Property translations.taskResizeEndHandle

(nullable) translations.task-resize-end-initiated :string

Used to indicate task resize end is initiated for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Task resize end initiated"
Since:
  • 7.0.0
Names
Item Name
Property translations.taskResizeEndInitiated

(nullable) translations.task-resize-finalized :string

Used to indicate task resize is finalized for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Task resize finalized"
Since:
  • 7.0.0
Names
Item Name
Property translations.taskResizeFinalized

(nullable) translations.task-resize-initiated-instruction :string

Used to indicate task resize instructions for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Use the arrow keys to resize"
Since:
  • 7.0.0
Names
Item Name
Property translations.taskResizeInitiatedInstruction

(nullable) translations.task-resize-selection-info :string

Used to indicate whether other tasks are also selected during task resize.

See the translations attribute for usage examples.

Default Value:
  • "{0} others selected"
Since:
  • 7.0.0
Names
Item Name
Property translations.taskResizeSelectionInfo

(nullable) translations.task-resize-start-handle :string

Used to indicate task start resize handle for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Task resize start handle"
Since:
  • 7.0.0
Names
Item Name
Property translations.taskResizeStartHandle

(nullable) translations.task-resize-start-initiated :string

Used to indicate task resize start is initiated for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Task resize start initiated"
Since:
  • 7.0.0
Names
Item Name
Property translations.taskResizeStartInitiated

(nullable) translations.tooltip-zoom-in :string

Used for the zoom in tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Zoom In"
Names
Item Name
Property translations.tooltipZoomIn

(nullable) translations.tooltip-zoom-out :string

Used for the zoom out tooltip.

See the translations attribute for usage examples.

Default Value:
  • "Zoom Out"
Names
Item Name
Property translations.tooltipZoomOut

value-formats :Object

An object specifying value formatting and tooltip behavior, whose keys generally correspond to task properties.
Names
Item Name
Property valueFormats
Property change event valueFormatsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-value-formats-changed

(nullable) value-formats.attribute :Object

Specifies tooltip behavior for the attribute value.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.attribute

(nullable) value-formats.attribute.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.attribute.tooltipDisplay

(nullable) value-formats.attribute.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelAttribute.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.attribute.tooltipLabel

(nullable) value-formats.baseline-date :Object

Specifies tooltip behavior for the date value of the milestone baseline.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.baselineDate

(nullable) value-formats.baseline-date.converter :(Converter<string>)

A converter (an instance that duck types oj.Converter) used to format the label. If not specified, a default converter depending on the axes scale is used. See also oj.DateTimeConverter.

See the value-formats attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property valueFormats.baselineDate.converter

(nullable) value-formats.baseline-date.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.baselineDate.tooltipDisplay

(nullable) value-formats.baseline-date.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelBaselineDate.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.baselineDate.tooltipLabel

(nullable) value-formats.baseline-end :Object

Specifies tooltip behavior for the end value of the baseline.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.baselineEnd

(nullable) value-formats.baseline-end.converter :(Converter<string>)

A converter (an instance that duck types oj.Converter) used to format the label. If not specified, a default converter depending on the axes scale is used. See also oj.DateTimeConverter.

See the value-formats attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property valueFormats.baselineEnd.converter

(nullable) value-formats.baseline-end.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.baselineEnd.tooltipDisplay

(nullable) value-formats.baseline-end.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelBaselineEnd.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.baselineEnd.tooltipLabel

(nullable) value-formats.baseline-start :Object

Specifies tooltip behavior for the start value of the baseline.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.baselineStart

(nullable) value-formats.baseline-start.converter :(Converter<string>)

A converter (an instance that duck types oj.Converter) used to format the label. If not specified, a default converter depending on the axes scale is used. See also oj.DateTimeConverter.

See the value-formats attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property valueFormats.baselineStart.converter

(nullable) value-formats.baseline-start.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.baselineStart.tooltipDisplay

(nullable) value-formats.baseline-start.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelBaselineStart.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.baselineStart.tooltipLabel

(nullable) value-formats.date :Object

Specifies tooltip behavior for the date value of a milestone task.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.date

(nullable) value-formats.date.converter :(Converter<string>)

A converter (an instance that duck types oj.Converter) used to format the label. If not specified, a default converter depending on the axes scale is used. See also oj.DateTimeConverter.

See the value-formats attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property valueFormats.date.converter

(nullable) value-formats.date.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.date.tooltipDisplay

(nullable) value-formats.date.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelDate.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.date.tooltipLabel

(nullable) value-formats.downtime-end :Object

Specifies tooltip behavior for the end value of the downtime.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.downtimeEnd

(nullable) value-formats.downtime-end.converter :(Converter<string>)

A converter (an instance that duck types oj.Converter) used to format the label. If not specified, a default converter depending on the axes scale is used. See also oj.DateTimeConverter.

See the value-formats attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property valueFormats.downtimeEnd.converter

(nullable) value-formats.downtime-end.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.downtimeEnd.tooltipDisplay

(nullable) value-formats.downtime-end.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelDowntimeEnd.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.downtimeEnd.tooltipLabel

(nullable) value-formats.downtime-start :Object

Specifies tooltip behavior for the start value of the downtime.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.downtimeStart

(nullable) value-formats.downtime-start.converter :(Converter<string>)

A converter (an instance that duck types oj.Converter) used to format the label. If not specified, a default converter depending on the axes scale is used. See also oj.DateTimeConverter.

See the value-formats attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property valueFormats.downtimeStart.converter

(nullable) value-formats.downtime-start.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.downtimeStart.tooltipDisplay

(nullable) value-formats.downtime-start.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelDowntimeStart.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.downtimeStart.tooltipLabel

(nullable) value-formats.end :Object

Specifies tooltip behavior for the end value.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.end

(nullable) value-formats.end.converter :(Converter<string>)

A converter (an instance that duck types oj.Converter) used to format the label. If not specified, a default converter depending on the axes scale is used. See also oj.DateTimeConverter.

See the value-formats attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property valueFormats.end.converter

(nullable) value-formats.end.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.end.tooltipDisplay

(nullable) value-formats.end.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelEnd.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.end.tooltipLabel

(nullable) value-formats.label :Object

Specifies tooltip behavior for the label value.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.label

(nullable) value-formats.label.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.label.tooltipDisplay

(nullable) value-formats.label.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelLabel.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.label.tooltipLabel

(nullable) value-formats.overtime-end :Object

Specifies tooltip behavior for the end value of the overtime.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.overtimeEnd

(nullable) value-formats.overtime-end.converter :(Converter<string>)

A converter (an instance that duck types oj.Converter) used to format the label. If not specified, a default converter depending on the axes scale is used. See also oj.DateTimeConverter.

See the value-formats attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property valueFormats.overtimeEnd.converter

(nullable) value-formats.overtime-end.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.overtimeEnd.tooltipDisplay

(nullable) value-formats.overtime-end.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelOvertimeEnd.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.overtimeEnd.tooltipLabel

(nullable) value-formats.overtime-start :Object

Specifies tooltip behavior for the start value of the overtime.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.overtimeStart

(nullable) value-formats.overtime-start.converter :(Converter<string>)

A converter (an instance that duck types oj.Converter) used to format the label. If not specified, a default converter depending on the axes scale is used. See also oj.DateTimeConverter.

See the value-formats attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property valueFormats.overtimeStart.converter

(nullable) value-formats.overtime-start.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.overtimeStart.tooltipDisplay

(nullable) value-formats.overtime-start.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelOvertimeStart.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.overtimeStart.tooltipLabel

(nullable) value-formats.progress :Object

Specifies tooltip behavior for the progress value.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.progress

(nullable) value-formats.progress.converter :(Converter<number>)

A converter (an instance that duck types oj.Converter) used to format the label. See also oj.NumberConverter.

See the value-formats attribute for usage examples.
Default Value:
  • new NumberConverter.IntlNumberConverter({style: 'percent'})
Names
Item Name
Property valueFormats.progress.converter

(nullable) value-formats.progress.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.progress.tooltipDisplay

(nullable) value-formats.progress.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelProgress.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.progress.tooltipLabel

(nullable) value-formats.row :Object

Specifies tooltip behavior for the row value.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.row

(nullable) value-formats.row.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.row.tooltipDisplay

(nullable) value-formats.row.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelRow.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.row.tooltipLabel

(nullable) value-formats.start :Object

Specifies tooltip behavior for the start value.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.start

(nullable) value-formats.start.converter :(Converter<string>)

A converter (an instance that duck types oj.Converter) used to format the label. If not specified, a default converter depending on the axes scale is used. See also oj.DateTimeConverter.

See the value-formats attribute for usage examples.
Default Value:
  • null
Names
Item Name
Property valueFormats.start.converter

(nullable) value-formats.start.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.
Supported Values:
Value
auto
off
Default Value:
  • "auto"
Names
Item Name
Property valueFormats.start.tooltipDisplay

(nullable) value-formats.start.tooltip-label :string

A string representing the label that is displayed before the value in the tooltip. The default value comes from oj.ojGantt#translations.labelStart.

See the value-formats attribute for usage examples.
Names
Item Name
Property valueFormats.start.tooltipLabel

viewport-end :string

The end time of the Gantt's viewport. If not specified or invalid, this will default to a value determined by the initial 'scale' of the minor axis and the width of the Gantt. See Date and Time Formats for more details on the required string formats.
Default Value:
  • ""
Names
Item Name
Property viewportEnd
Property change event viewportEndChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-viewport-end-changed

viewport-start :string

The start time of the Gantt's viewport. If not specified or invalid, this will default to a value determined by the initial 'scale' of the minor axis and the width of the Gantt. See Date and Time Formats for more details on the required string formats.
Default Value:
  • ""
Names
Item Name
Property viewportStart
Property change event viewportStartChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-viewport-start-changed

zooming :"on"|"off"

Specifies whether zooming is allowed on the Gantt. When 'off', gestures that perform zooming are disabled, and zoom controls are not rendered.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property zooming
Property change event zoomingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-zooming-changed

Context Objects

Each context object contains, at minimum, a subId property, whose value is a string that identifies a particular DOM node in this element. It can have additional properties to further specify the desired node. See getContextByNode for more details.

Properties:
Name Type Description
subId string Sub-id string to identify a particular dom node.

Following are the valid subIds:

oj-gantt-row-label

Context for Gantt row label at a specified index.

Properties:
Name Type
index number

oj-gantt-taskbar

Context for Gantt task at a specified index.

Properties:
Name Type
index number
rowIndex number

Events

ojMajorAxisDrill

Triggered by a major axis drill gesture. See also the major-axis.drillable attribute.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
intervalEnd string the end time of the interval in ISO date format.
intervalStart string the start time of the interval in ISO date format.

ojMinorAxisDrill

Triggered by a minor axis drill gesture. See also the minor-axis.drillable attribute.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
intervalEnd string the end time of the interval in ISO date format.
intervalStart string the start time of the interval in ISO date format.

ojMove

Triggered after tasks are moved to a different location of some row within the gantt via drag and drop or equivalent keyboard actions (See Keyboard End User Information). See also the dnd.move.tasks attribute.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
baselineEnd string The end value of the baseline, if the source task were to move to the target position. This is null if baseline is not defined on the task. See Date and Time Formats for more details on the ISO string format.
baselineStart string The start value of the baseline, if the source task were to move to the target position. This is null if baseline is not defined on the task. See Date and Time Formats for more details on the ISO string format.
end string The end value of the task, if the source task were to move to the target position. See Date and Time Formats for more details on the ISO string format.
rowContext {rowData: oj.ojGantt.Row.<K2, D2, K3, D3>, componentElement: Element} The data context for the row at the target position.
Properties
Name Type Description
componentElement Element The gantt element.
rowData oj.ojGantt.Row.<K2, D2, K3, D3> The data for the target row.
start string The start value of the task, if the source task were to move to the target position. See Date and Time Formats for more details on the ISO string format.
taskContexts Array<{data: ojGantt.RowTask<K2,D2>, rowData: ojGantt.Row<K2,D2,K3,D3>, itemData: D2 | null, color: string}> An array of dataContexts of the moved tasks. The first dataContext of the array corresponds to the source task where the move was initiated (e.g. the task directly under the mouse when drag started).
Properties
Name Type Description
color string The color of the source task.
data oj.ojGantt.RowTask.<K2, D2> The data object of the source task.
itemData Object | null The data provider data object for the source task.
rowData oj.ojGantt.Row.<K2, D2, K3, D3> The data for the row the source task belongs to.
value string The value at the target position the source task is moved to. See Date and Time Formats for more details on the ISO string format.

ojResize

Triggered after tasks are resized. See also the task-defaults.resizable attribute.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
end string The end value of the task (always chronologically after, or equivalent to, the start value), if the resize happened. See Date and Time Formats for more details on the ISO string format.
start string The start value of the task (always chronologically before, or equivalent to, the end value), if the resize happened. See Date and Time Formats for more details on the ISO string format.
taskContexts Array<{data: ojGantt.RowTask<K2,D2>, rowData: ojGantt.Row<K2,D2,K3,D3>, itemData: D2 | null, color: string}> An array of dataContexts of the resized tasks. The first dataContext of the array corresponds to the source task where the resize was initiated (e.g. the task directly under the mouse when drag started).
Properties
Name Type Description
color string The color of the source task.
data oj.ojGantt.RowTask.<K2, D2> The data object of the source task.
itemData Object | null The data provider data object for the source task.
rowData oj.ojGantt.Row.<K2, D2, K3, D3> The data for the row the source task belongs to.
type string The type of resize, either 'start' or 'end'.
value string The value at the target position. See Date and Time Formats for more details on the ISO string format.

ojViewportChange

Triggered after the viewport is changed due to a zoom or scroll operation. If the viewport changes the minor (and/or major) axis scale into a custom timescale instance of DvtTimeComponentScale, then the minorAxisScale (and/or majorAxisScale) will be the "name" field value of the instance.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
majorAxisScale string the time scale of the majorAxis
minorAxisScale string the time scale of the minorAxis
viewportEnd string the end of the new viewport on a gantt chart
viewportStart string the start of the new viewport on a gantt chart

Methods

getContextByNode(node) : {({subId: 'oj-gantt-row-label', index: number}|{subId: 'oj-gantt-taskbar', rowIndex: number, index: number}|null)}

Returns an object with context for the given child DOM node. This will always contain the subid for the node, defined as the 'subId' property on the context object. Additional component specific information may also be included. For more details on returned objects, see context objects.
Parameters:
Name Type Argument Description
node Element <not nullable>
 The child DOM node
Returns:

The context for the DOM node, or null when none is found.

Type
({subId: 'oj-gantt-row-label', index: number}|{subId: 'oj-gantt-taskbar', rowIndex: number, index: number}|null)

getProperty(property) : {any}

Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Since:
  • 4.0.0
Returns:
Type
any
Example

Get a single subproperty of a complex property:

let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

refresh : {void}

Refreshes the component.
Returns:
Type
void

setProperties(properties) : {void}

Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value) : {void}

Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");

Type Definitions

DataRow<K3=any, D3=any, K2=any, D2=any>

Object type that defines a gantt data row item for the no template case, when data is set using the row-data attribute.
Properties:
Name Type Argument Default Description
label string <optional>
 "" The label associated with the row.
labelStyle ?Partial<CSSStyleDeclaration> <optional>
 {} The CSS style defining the style of the label. Only CSS style applicable to SVG elements can be used. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
referenceObjects Array.<Partial.<oj.ojGantt.ReferenceObject>> <optional>
 An array of reference objects associated with the row.
shortDesc ?(string | ((context: ojGantt.RowShortDescContext<K3,D3>) => string)) <optional>
 null The description of the row. This is used for accessibility.
tasks Array.<oj.ojGantt.DataTask.<K2, D2>> <optional>
 The tasks associated with the row.

DataTask<K2=any, D2=any>

Object type that defines a gantt data task item for the no template case.
Properties:
Name Type Argument Default Description
attribute Object <optional>
 Specifies the attribute of the task.
Properties
Name Type Argument Default Description
rendered "on" | "off" <optional>
 "off" Specifies whether the attribute bar is rendered.

See the attribute attribute for usage examples.
shortDesc ?(string | ((context: ojGantt.TaskShortDescContext<K2,D2) => string)) <optional>
 null The description of the attribute. This is used for accessibility. If the top level shortDesc is also specified, then this one is not used.

See the attribute attribute for usage examples.
svgClassName string <optional>
 A space delimited list of CSS style classes defining the style of the attribute. The default value comes from the gantt's task-defaults.attribute.svg-class-name.

See the attribute attribute for usage examples.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS style defining the style of the attribute. The default value comes from the gantt's task-defaults.attribute.svg-style.

See the attribute attribute for usage examples. Only SVG CSS style properties are supported.
baseline Object <optional>
 Specifies the baseline of the task. When only one of 'start' or 'end' value is specified, or when 'start' and 'end' values are equal, the baseline is considered a milestone baseline.
Properties
Name Type Argument Default Description
borderRadius string <optional>
 The border radius of the baseline. Accepts values allowed in CSS border-radius attribute. The default value comes from the gantt's task-defaults.baseline.border-radius.

See the baseline attribute for usage examples.
end string <optional>
 "" The end time of the baseline. Optional if baseline is a milestone. Either start or end has to be defined in order for the baseline to properly render. See Date and Time Formats for more details on the required string formats.

See the baseline attribute for usage examples.
height number <optional>
 The height of the baseline in pixels. The default value comes from the gantt's task-defaults.baseline.height.

See the baseline attribute for usage examples.
start string <optional>
 "" The start time of the baseline. Optional if baseline is a milestone. Either start or end has to be defined in order for the baseline to properly render. See Date and Time Formats for more details on the required string formats.

See the baseline attribute for usage examples.
svgClassName string <optional>
 A space delimited list of CSS style classes defining the style of the baseline. The default value comes from the gantt's task-defaults.baseline.svg-class-name.

See the baseline attribute for usage examples.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS style defining the style of the baseline. The default value comes from the gantt's task-defaults.baseline.svg-style.

See the baseline attribute for usage examples. Only SVG CSS style properties are supported.
borderRadius string <optional>
 The border radius of the task. Accepts values allowed in CSS border-radius attribute. The default value comes from the gantt's task-defaults.border-radius.
downtime Object <optional>
 Specifies the downtime of the task.
Properties
Name Type Argument Default Description
end string <optional>
 "" The end time of the downtime. Both the start and end has to be defined in order for the downtime to properly render. See Date and Time Formats for more details on the required string formats.

See the downtime attribute for usage examples.
start string <optional>
 "" The start time of the downtime. Both the start and end has to be defined in order for the downtime to properly render. See Date and Time Formats for more details on the required string formats.

See the downtime attribute for usage examples.
svgClassName string <optional>
 A space delimited list of CSS style classes defining the style of the downtime. The default value comes from the gantt's task-defaults.downtime.svg-class-name.

See the downtime attribute for usage examples.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS style defining the style of the downtime. The default value comes from the gantt's task-defaults.downtime.svg-style.

See the downtime attribute for usage examples. Only SVG CSS style properties are supported.
end string <optional>
 "" The end time of this task. Optional if task is a single date event like Milestone. Either start or end has to be defined in order for the task to properly render. See Date and Time Formats for more details on the required string formats.
height number <optional>
 The height of the task in pixels. Since row heights can also be set via the gantt's row-defaults.height attribute, applications typically should make sure that their task heights are less than the row height. The default value comes from the gantt's task-defaults.height.
label string <optional>
 "" The label associated with the task.
labelPosition "start" | "innerCenter" | "innerStart" | "innerEnd" | "end" | "none" <optional>
 The position of the label relative to the task. An array of values is also supported. If an array is specified, then the values are traversed until a position that can fully display the label is found. If 'max' is specified in the array, then of all the positions evaluated up to that point of the traversal, the one with the largest space is used (label is truncated to fit). Naturally, 'max' is ignored if it's specified as the first value of the array. If the last value of the array is reached, but the label cannot be fully displayed, then the label is placed at that position, truncated to fit. Due to space constraints in the milestone and task with progress cases, the inner positions will exhibit the following behaviors:
  • For milestones, specifying 'innerStart', 'innerEnd', or 'innerCenter' would be equivalent to specifying 'start', 'end', and 'end' respectively.
  • For tasks with progress, 'innerCenter' means the label will be aligned to the end of the progress bar, either placed inside or outside of the progress, whichever is the larger space. 'innerStart' and 'innerEnd' positions are honored when there is enough space to show the label at those positions. Otherwise, the aforementioned 'innerCenter' behavior is exhibited.
The default value comes from the gantt's task-defaults.label-position.
labelStyle ?Partial<CSSStyleDeclaration> <optional>
 {} The CSS style defining the style of the label. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
overlap Object <optional>
 Configures the placement of this task relative to a task it overlaps with.
Properties
Name Type Argument Description
behavior "stack" | "stagger" | "overlay" | "auto" <optional>
 The behavior when this task (task2) overlaps a chronologically previous adjacent task (task1).
  • 'stack': task2 is placed above task1 if there is no chronological conflict with previous tasks. Otherwise, task2 is shifted down relative to task1 by the specified offset amount.
  • 'stagger': task2 is shifted up or down relative to its normal position by the specified offset amount, depending on whether task1 was shifted down or up respectively, such that the chain of overlapping tasks it participates in forms a zigzag pattern. If task1 is the first task of the chain, then task2 is shifted down.
  • 'overlay': task2 remains in its normal position (ignoring the specified offset amount), and is placed above all tasks it overlaps with.
  • 'auto': The behavior depends on the row-defaults.height value: the behavior is 'stack' if row height is not specified or null, and the behavior is 'stagger' otherwise.
The default value comes from the gantt's task-defaults.overlap.behavior.

See the overlap attribute for usage examples.
overtime Object <optional>
 Specifies the overtime of the task.
Properties
Name Type Argument Default Description
end string <optional>
 "" The end time of the overtime. Both the start and end has to be defined in order for the overtime to properly render. See Date and Time Formats for more details on the required string formats.

See the overtime attribute for usage examples.
start string <optional>
 "" The start time of the overtime. Both the start and end has to be defined in order for the overtime to properly render. See Date and Time Formats for more details on the required string formats.

See the overtime attribute for usage examples.
svgClassName string <optional>
 A space delimited list of CSS style classes defining the style of the overtime. The default value comes from the gantt's task-defaults.overtime.svg-class-name.

See the overtime attribute for usage examples.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS style defining the style of the overtime. The default value comes from the gantt's task-defaults.overtime.svg-style.

See the overtime attribute for usage examples. Only SVG CSS style properties are supported.
progress Object <optional>
 Specifies the progress of the task. This property is ignored if the task is a milestone.
Properties
Name Type Argument Default Description
borderRadius string <optional>
 The border radius of the progress bar. Accepts values allowed in CSS border-radius attribute. The default value comes from the gantt's task-defaults.progress.border-radius.

See the progress attribute for usage examples.
height string <optional>
 Specifies the height of the progress bar in pixels (e.g. '50px') or percent of the associated task bar (e.g. '15%'). The default value comes from the gantt's task-defaults.progress.height.

See the progress attribute for usage examples.
svgClassName string <optional>
 A space delimited list of CSS style classes to apply to the progress bar. Note that only CSS style applicable to SVG elements can be used. The default value comes from the gantt's task-defaults.progress.svg-class-name.

See the progress attribute for usage examples.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS inline style to apply to the progress bar. Only CSS style applicable to SVG elements can be used. The default value comes from the gantt's task-defaults.progress.svg-style.

See the progress attribute for usage examples. Only SVG CSS style properties are supported.
value number <optional>
 null The value of the progress between 0 and 1 inclusive. If not specified or invalid, no progress will be shown.

See the progress attribute for usage examples.
rowId any <optional>
 The id for the row the task belongs to, if the data is set using the task-data attribute.
shortDesc ?(string | ((context: ojGantt.TaskShortDescContext<K2,D2>) => string)) <optional>
 null The description of the task. This is used for accessibility and for customizing the tooltip text.
start string <optional>
 "" The start time of this task. Optional if task is a single date event like Milestone. Either start or end has to be defined in order for the task to properly render. See Date and Time Formats for more details on the required string formats.
svgClassName string <optional>
 A space delimited list of CSS style classes defining the style of the task. The default value comes from the gantt's task-defaults.svg-class-name.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS style defining the style of the task. The default value comes from the gantt's task-defaults.svg-style. Only SVG CSS style properties are supported.
taskId string <optional>
 The id for the task, if the data is set using the row-data attribute.
type "normal" | "milestone" | "summary" | "auto" <optional>
 Defines the task type to be rendered.

If "milestone", and if 'start' and 'end' values are specified and unequal, the 'start' value is used to evaluate position.

If "auto", the type is inferred from the data:
  • If 'start' and 'end' values are specified and unequal, "normal" type is assumed.
  • Otherwise, "milestone" type is assumed.
The default value comes from the gantt's task-defaults.type.

Dependency<K1, K2=any>

Properties:
Name Type Argument Default Description
id K1 The identifier for the dependency line. This must be unique across all dependency lines in Gantt. The id should be set by the application if the dependency-data DataProvider is not being used. The row key will be used as id in the case.
predecessorTaskId K2 The identifier for the predecessor task. This must reference a task in Gantt.
shortDesc string <optional>
 null The description of the dependency line. This is used for accessibility.
successorTaskId K2 The identifier for the successor task. This must reference a task in Gantt.
svgClassName string <optional>
 "" A space delimited list of CSS style classes to apply to the dependency line.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 {} The CSS style defining the style of the dependency line. Only SVG CSS style properties are supported.
type "finishStart" | "finishFinish" | "startStart" | "startFinish" <optional>
 "finishStart" The type of dependency.

DependencyContentTemplateContext<K1, K2=any, D1=any>

Properties:
Name Type Description
content Object An object that describes the child content.
Properties
Name Type Description
predecessorX number The x coordinate of the predecessor task endpoint.
predecessorY number The y coordinate of the predecessor task endpoint.
successorX number The x coordinate of the successor task endpoint.
successorY number The y coordinate of the successor task endpoint.
data oj.ojGantt.Dependency.<K1, K2> The data object of the dependency.
itemData D1 The data provider row data object for the dependency.
state Object An object that reflects the current state of the dependency.
Properties
Name Type Description
focused boolean True if the dependency is focused.
hovered boolean True if the dependency is hovered.

DependencyTemplateContext<K1, D1>

Properties:
Name Type Description
componentElement Element The <oj-gantt> custom element
Deprecated:
Since Description
16.0.0 The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
data D1 The data object for the current dependency
index number The zero-based index of the current dependency
key K1 The key of the current dependency

ReferenceObject

Properties:
Name Type Argument Default Description
end string <optional>
 The end time value of this reference object. See Date and Time Formats for more details on required string formats, and see type for more details.
label string <optional>
 The label of this reference object to be shown. This is not supported for type "area".
shortDesc string <optional>
 The description of this object. This is used for accessibility and also for customizing the tooltip text.
start string <optional>
 The start time value of this reference object. See Date and Time Formats for more details on required string formats, and see type for more details.
svgClassName string <optional>
 A space delimited list of CSS style classes defining the style of the reference object. Note that only CSS style applicable to SVG elements can be used.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS style defining the style of the reference object. Only SVG CSS style properties are supported.
type "area" | "line" <optional>
 "line" The type of reference object being shown. If the value is set to "area", use the start and end properties of the reference object. Otherwise, use the value property.
value string <optional>
 The time value of this reference object. If not specified, no reference object will be shown. See Date and Time Formats for more details on required string formats.

ReferenceObjectMappingTemplateContext

Properties:
Name Type Description
data Object The data object for the current reference object.
index number The index of the current reference object.
rowData Object The data object for the row the reference object belongs to.

Row<K2=any, D2=any, K3=any, D3=any>

Properties:
Name Type Argument Default Description
id any <optional>
 The identifier for the row. Optional if the row contains only one task. This must be unique across all rows in Gantt.
label string <optional>
 "" The label associated with the row.
labelStyle ?Partial<CSSStyleDeclaration> <optional>
 {} The CSS style defining the style of the label. Only CSS style applicable to SVG elements can be used. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
referenceObjects Array.<Partial.<oj.ojGantt.ReferenceObject>> <optional>
 An array of reference objects associated with the row.
shortDesc ?(string | ((context: ojGantt.RowShortDescContext<K3,D3>) => string)) <optional>
 null The description of the row. This is used for accessibility.
tasks Array.<oj.ojGantt.RowTask.<K2, D2>> <optional>
 An array of tasks. If not specified, no data will be shown.
When only one of 'start' or 'end' value is specified, or when 'start' and 'end' values are equal, the task is considered a milestone task. Note that values of analogous properties from task-defaults are used for any unspecified properties on the task, and values of any specified properties would override those from task-defaults.

RowAxisLabelRendererContext<K2=any, D2=any, K3=any, D3=any>

Properties:
Name Type Description
componentElement Element The gantt element.
data D3 | null The data object for the row from the row-data DataProvider.
depth number The depth of the row. The depth of the outermost row under the invisible root is 1. This is available if the supplied row-data DataProvider is a TreeDataProvider.
itemData D2[] An array of the data provider data objects associated with the tasks belonging to the gantt row.
leaf boolean True if the current row is a leaf row. This is available if the supplied row-data DataProvider is a TreeDataProvider.
maxHeight number The maximum available height in px.
maxWidth number The maximum available width in px, as constrained by the row-axis.width and row-axis.max-width values. If row-axis.width is 'max-content' and row-axis.max-width is 'none', then this is -1, and the component will automatically allocate enough width space to accommodate the content.
parentElement Element A parent group element that takes a custom SVG fragment as the row label content. Modifications of the parentElement are not supported.
parentKey any The key of the parent row. The parent key is null for (the invisible) root. This is available if the supplied row-data DataProvider is a TreeDataProvider.
rowData oj.ojGantt.Row.<K2, D2, K3, D3> The data for the row.

RowAxisLabelTemplateContext<K2=any, D2=any, K3=any, D3=any>

Properties:
Name Type Description
componentElement Element The gantt element.
Deprecated:
Since Description
16.0.0 The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
data D3 | null The data object for the row from the row-data DataProvider.
depth number The depth of the row. The depth of the outermost row under the invisible root is 1. This is available if the supplied row-data DataProvider is a TreeDataProvider.
itemData D2[] An array of the data provider data objects associated with the tasks belonging to the gantt row.
leaf boolean True if the current row is a leaf row. This is available if the supplied row-data DataProvider is a TreeDataProvider.
maxHeight number The maximum available height in px.
maxWidth number The maximum available width in px, as constrained by the row-axis.width and row-axis.max-width values. If row-axis.width is 'max-content' and row-axis.max-width is 'none', then this is -1, and the component will automatically allocate enough width space to accommodate the content.
parentElement Element A parent group element that takes a custom SVG fragment as the row label content. Modifications of the parentElement are not supported.
parentKey any The key of the parent row. The parent key is null for (the invisible) root. This is available if the supplied row-data DataProvider is a TreeDataProvider.
rowData oj.ojGantt.Row.<K2, D2, K3, D3> The data for the row.

RowMappingTemplateContext<K3, D3>

Properties:
Name Type Description
data D3 The data object for the row.
depth number The depth of the row. The depth of the outermost row under the invisible root is 1. This is available if the supplied row-data DataProvider is a TreeDataProvider.
index number The row index
key K3 The key of the row.
leaf boolean True if the current row is a leaf row. This is available if the supplied row-data DataProvider is a TreeDataProvider.
parentKey K3 The key of the parent row. The parent key is null for (the invisible) root. This is available if the supplied row-data DataProvider is a TreeDataProvider.

RowShortDescContext<K3, D3>

Properties:
Name Type Description
data oj.ojGantt.Row.<any, any, K3, D3> The data for the row.
itemData D3 The data provider data object for the row.

RowTask<K2=any, D2=any>

Properties:
Name Type Argument Default Description
attribute Object <optional>
 Specifies the attribute of the task.
Properties
Name Type Argument Default Description
rendered "on" | "off" <optional>
 "off" Specifies whether the attribute bar is rendered.

See the attribute attribute for usage examples.
shortDesc ?(string | ((context: ojGantt.TaskShortDescContext<K2,D2) => string)) <optional>
 null The description of the attribute. This is used for accessibility. If the top level shortDesc is also specified, then this one is not used.

See the attribute attribute for usage examples.
svgClassName string <optional>
 A space delimited list of CSS style classes defining the style of the attribute. The default value comes from the gantt's task-defaults.attribute.svg-class-name.

See the attribute attribute for usage examples.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS style defining the style of the attribute. The default value comes from the gantt's task-defaults.attribute.svg-style.

See the attribute attribute for usage examples. Only SVG CSS style properties are supported.
baseline Object <optional>
 Specifies the baseline of the task. When only one of 'start' or 'end' value is specified, or when 'start' and 'end' values are equal, the baseline is considered a milestone baseline.
Properties
Name Type Argument Default Description
borderRadius string <optional>
 The border radius of the baseline. Accepts values allowed in CSS border-radius attribute. The default value comes from the gantt's task-defaults.baseline.border-radius.

See the baseline attribute for usage examples.
end string <optional>
 "" The end time of the baseline. Optional if baseline is a milestone. Either start or end has to be defined in order for the baseline to properly render. See Date and Time Formats for more details on the required string formats.

See the baseline attribute for usage examples.
height number <optional>
 The height of the baseline in pixels. The default value comes from the gantt's task-defaults.baseline.height.

See the baseline attribute for usage examples.
start string <optional>
 "" The start time of the baseline. Optional if baseline is a milestone. Either start or end has to be defined in order for the baseline to properly render. See Date and Time Formats for more details on the required string formats.

See the baseline attribute for usage examples.
svgClassName string <optional>
 A space delimited list of CSS style classes defining the style of the baseline. The default value comes from the gantt's task-defaults.baseline.svg-class-name.

See the baseline attribute for usage examples.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS style defining the style of the baseline. The default value comes from the gantt's task-defaults.baseline.svg-style.

See the baseline attribute for usage examples. Only SVG CSS style properties are supported.
borderRadius string <optional>
 The border radius of the task. Accepts values allowed in CSS border-radius attribute. The default value comes from the gantt's task-defaults.border-radius.
downtime Object <optional>
 Specifies the downtime of the task.
Properties
Name Type Argument Default Description
end string <optional>
 "" The end time of the downtime. Both the start and end has to be defined in order for the downtime to properly render. See Date and Time Formats for more details on the required string formats.

See the downtime attribute for usage examples.
start string <optional>
 "" The start time of the downtime. Both the start and end has to be defined in order for the downtime to properly render. See Date and Time Formats for more details on the required string formats.

See the downtime attribute for usage examples.
svgClassName string <optional>
 A space delimited list of CSS style classes defining the style of the downtime. The default value comes from the gantt's task-defaults.downtime.svg-class-name.

See the downtime attribute for usage examples.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS style defining the style of the downtime. The default value comes from the gantt's task-defaults.downtime.svg-style.

See the downtime attribute for usage examples. Only SVG CSS style properties are supported.
end string <optional>
 "" The end time of this task. Optional if task is a single date event like Milestone. Either start or end has to be defined in order for the task to properly render. See Date and Time Formats for more details on the required string formats.
height number <optional>
 The height of the task in pixels. Since row heights can also be set via the gantt's row-defaults.height attribute, applications typically should make sure that their task heights are less than the row height. The default value comes from the gantt's task-defaults.height.
id K2 The identifier for the task. This must be unique across all tasks in the Gantt, and is required in order for the Gantt to properly render.
label string <optional>
 "" The label associated with the task.
labelPosition "start" | "innerCenter" | "innerStart" | "innerEnd" | "end" | "none" <optional>
 The position of the label relative to the task. An array of values is also supported. If an array is specified, then the values are traversed until a position that can fully display the label is found. If 'max' is specified in the array, then of all the positions evaluated up to that point of the traversal, the one with the largest space is used (label is truncated to fit). Naturally, 'max' is ignored if it's specified as the first value of the array. If the last value of the array is reached, but the label cannot be fully displayed, then the label is placed at that position, truncated to fit. Due to space constraints in the milestone and task with progress cases, the inner positions will exhibit the following behaviors:
  • For milestones, specifying 'innerStart', 'innerEnd', or 'innerCenter' would be equivalent to specifying 'start', 'end', and 'end' respectively.
  • For tasks with progress, 'innerCenter' means the label will be aligned to the end of the progress bar, either placed inside or outside of the progress, whichever is the larger space. 'innerStart' and 'innerEnd' positions are honored when there is enough space to show the label at those positions. Otherwise, the aforementioned 'innerCenter' behavior is exhibited.
The default value comes from the gantt's task-defaults.label-position.
labelStyle ?Partial<CSSStyleDeclaration> <optional>
 {} The CSS style defining the style of the label. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
overlap Object <optional>
 Configures the placement of this task relative to a task it overlaps with.
Properties
Name Type Argument Description
behavior "stack" | "stagger" | "overlay" | "auto" <optional>
 The behavior when this task (task2) overlaps a chronologically previous adjacent task (task1).
  • 'stack': task2 is placed above task1 if there is no chronological conflict with previous tasks. Otherwise, task2 is shifted down relative to task1 by the specified offset amount.
  • 'stagger': task2 is shifted up or down relative to its normal position by the specified offset amount, depending on whether task1 was shifted down or up respectively, such that the chain of overlapping tasks it participates in forms a zigzag pattern. If task1 is the first task of the chain, then task2 is shifted down.
  • 'overlay': task2 remains in its normal position (ignoring the specified offset amount), and is placed above all tasks it overlaps with.
  • 'auto': The behavior depends on the row-defaults.height value: the behavior is 'stack' if row height is not specified or null, and the behavior is 'stagger' otherwise.
The default value comes from the gantt's task-defaults.overlap.behavior.

See the overlap attribute for usage examples.
overtime Object <optional>
 Specifies the overtime of the task.
Properties
Name Type Argument Default Description
end string <optional>
 "" The end time of the overtime. Both the start and end has to be defined in order for the overtime to properly render. See Date and Time Formats for more details on the required string formats.

See the overtime attribute for usage examples.
start string <optional>
 "" The start time of the overtime. Both the start and end has to be defined in order for the overtime to properly render. See Date and Time Formats for more details on the required string formats.

See the overtime attribute for usage examples.
svgClassName string <optional>
 A space delimited list of CSS style classes defining the style of the overtime. The default value comes from the gantt's task-defaults.overtime.svg-class-name.

See the overtime attribute for usage examples.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS style defining the style of the overtime. The default value comes from the gantt's task-defaults.overtime.svg-style.

See the overtime attribute for usage examples. Only SVG CSS style properties are supported.
progress Object <optional>
 Specifies the progress of the task. This property is ignored if the task is a milestone.
Properties
Name Type Argument Default Description
borderRadius string <optional>
 The border radius of the progress bar. Accepts values allowed in CSS border-radius attribute. The default value comes from the gantt's task-defaults.progress.border-radius.

See the progress attribute for usage examples.
height string <optional>
 Specifies the height of the progress bar in pixels (e.g. '50px') or percent of the associated task bar (e.g. '15%'). The default value comes from the gantt's task-defaults.progress.height.

See the progress attribute for usage examples.
svgClassName string <optional>
 A space delimited list of CSS style classes to apply to the progress bar. Note that only CSS style applicable to SVG elements can be used. The default value comes from the gantt's task-defaults.progress.svg-class-name.

See the progress attribute for usage examples.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS inline style to apply to the progress bar. Only CSS style applicable to SVG elements can be used. The default value comes from the gantt's task-defaults.progress.svg-style.

See the progress attribute for usage examples. Only SVG CSS style properties are supported.
value number <optional>
 null The value of the progress between 0 and 1 inclusive. If not specified or invalid, no progress will be shown.

See the progress attribute for usage examples.
shortDesc ?(string | ((context: ojGantt.TaskShortDescContext<K2,D2>) => string)) <optional>
 null The description of the task. This is used for accessibility and for customizing the tooltip text.
start string <optional>
 "" The start time of this task. Optional if task is a single date event like Milestone. Either start or end has to be defined in order for the task to properly render. See Date and Time Formats for more details on the required string formats.
svgClassName string <optional>
 A space delimited list of CSS style classes defining the style of the task. The default value comes from the gantt's task-defaults.svg-class-name.
svgStyle ?Partial<CSSStyleDeclaration> <optional>
 The CSS style defining the style of the task. The default value comes from the gantt's task-defaults.svg-style. Only SVG CSS style properties are supported.
type "normal" | "milestone" | "summary" | "auto" <optional>
 Defines the task type to be rendered.

If "milestone", and if 'start' and 'end' values are specified and unequal, the 'start' value is used to evaluate position.

If "auto", the type is inferred from the data:
  • If 'start' and 'end' values are specified and unequal, "normal" type is assumed.
  • Otherwise, "milestone" type is assumed.
The default value comes from the gantt's task-defaults.type.

RowTemplateContext

Properties:
Name Type Description
componentElement Element The <oj-gantt> custom element
id any The row id, if specified in the task template. Otherwise, it's the single task per row case, and this would be the task id.
index number The row index
tasks Array.<Object> The array of objects which are gantt tasks that belong to this row. The objects will have the following properties
Properties
Name Type Description
data Object The data object for the task
index number The zero-based index of the task
key any The key of the task
parentData Array.<Object> An array of data objects of the outermost to innermost parents of the task.
parentKey any The key of the parent task. The parent key is null for root tasks.

TaskContentTemplateContext<K2=any, D2=any, K3=any, D3=any>

Properties:
Name Type Description
content Object An object that describes the child content.
Properties
Name Type Description
height number Height of the child content in pixels.
width number Width of the child content in pixels.
data oj.ojGantt.RowTask.<K2, D2> The data object of the task.
itemData D2 The data provider data object for the task.
rowData oj.ojGantt.Row.<K2, D2, K3, D3> The data for the row the task belongs to.
state Object An object that reflects the current state of the task.
Properties
Name Type Description
expanded boolean True if the task is expanded.
focused boolean True if the task is focused.
hovered boolean True if the task is hovered.
selected boolean True if the task is selected.

TaskMappingTemplateContext<D2, D3>

Properties:
Name Type Description
data D2 The data object for the current task
index number The index of the current task
rowData D3 The data object for the row the task belongs to.

TaskShortDescContext<K2=any, D2=any, K3=any, D3=any>

Properties:
Name Type Description
data oj.ojGantt.RowTask.<K2, D2> The data object of the hovered task.
itemData D2 The data provider data object for the hovered task.
rowData oj.ojGantt.Row.<K2, D2, K3, D3> The data for the row the hovered task belongs to.

TaskTemplateContext

Properties:
Name Type Description
componentElement Element The <oj-gantt> custom element
data Object The data object for the current task
index number The zero-based index of the current task
key any The key of the current task
parentData Array.<Object> An array of data objects of the outermost to innermost parents of the task.
parentKey any The key of the parent task. The parent key is null for root tasks.

TooltipContext<K2=any, D2=any, K3=any, D3=any>

Properties:
Name Type Description
color string The color of the hovered task.
componentElement Element The gantt element.
Deprecated:
Since Description
16.0.0 The componentElement property is deprecated. This shouldn't be needed, as the component template with access to this context is unique to the component.
data oj.ojGantt.RowTask.<K2, D2> The data object of the hovered task.
itemData D2 The data provider data object for the hovered task.
parentElement Element The tooltip element. This can be used to change the tooltip border or background color.
rowData oj.ojGantt.Row.<K2, D2, K3, D3> The data for the row the hovered task belongs to.

TooltipRendererContext<K2=any, D2=any, K3=any, D3=any>

Properties:
Name Type Description
color string The color of the hovered task.
componentElement Element The gantt element.
data oj.ojGantt.RowTask.<K2, D2> The data object of the hovered task.
itemData D2 The data provider data object for the hovered task.
parentElement Element The tooltip element. This can be used to change the tooltip border or background color.
rowData oj.ojGantt.Row.<K2, D2, K3, D3> The data for the row the hovered task belongs to.