Element: <oj-gantt>

Oracle® JavaScript Extension Toolkit (JET)
9.1.0
F30737-01

Signature:

class ojGantt<K1, K2, D1 extends ojGantt.Dependency<K1, K2>|any, D2 extends ojGantt.DataTask|any>

QuickNav

Slots

Attributes


Context Objects

Events

Methods

Type Definitions

JET Custom Elements

JET components are implemented as custom HTML elements. In addition to the component attributes documented in this page, JET components also support standard HTML global attributes like id and aria-label.

The JET data binding syntax can be used to define both component and global attributes through the use of dynamically evaluated expressions. All attributes (component and global) support attribute-level binding by prefixing the attribute name with ":" (e.g. :id="[...]"). When using attribute-level binding, all expression values are treated as strings. Additionally, component attributes support property-level binding by using the attribute name directly with no ":" prefix. When using property-level binding, the expressions should evaluate to the types documented by the corresponding attributes. Property-level binding is strongly recommended over attribute-level binding for component attributes.

A detailed description of working with custom HTML elements can be found in: JET Custom Element Usage.


Version:
  • 9.1.0
Since:
  • 2.1.0
Module:
  • ojgantt

Module usage

See JET Module Loading for an overview of module usage within JET.

Typescript Import Format
//To typecheck the element APIs, import as below.
import {ojGantt} from "ojs/ojgantt";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojgantt";
Generic Parameters
ParameterDescription
K1Type of key of the dependencyData dataprovider
K2Type of key of the taskData dataprovider
D1Type of data from the dependencyData dataprovider
D2Type of data from the taskData dataprovider

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.


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"}'
  rows='[[data]]'>
</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.

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.
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.
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.
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.
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.
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 + < 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 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 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 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 Finalize move or resize, if currently in move mode (see Ctrl + m) or resize mode (see Alt + s and Alt + e) respectively.

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.

Gantt Span

It's recommended that applications limit the number of time intervals that are rendered by the Gantt chart. For example, a Gantt chart spanning one year with a scale of hours will display (365 * 24) 8,760 intervals. Rendering this many intervals can cause severe performance degradation when interacting with the element (scrolling and zooming) regardless of the number of task bars present.

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.

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.

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 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 dependency
index number The zero-based index of the current dependency
key any The key of the current dependency

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
parentElement Element A parent group element that takes a custom SVG fragment as the row label content. Modifications of the parentElement are not supported.
rowData oj.ojGantt.Row.<K2> The data for the row.
itemData D2[] An array of the data provider row data objects associated with the tasks belonging to the gantt row. This will only be set if an DataProvider for task-data is being used.
componentElement Element The gantt element.
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.
maxHeight number The maximum available height in px.

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 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
index number The row index
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.
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.

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 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
parentElement Element The tooltip element. This can be used to change the tooltip border or background color.
data oj.ojGantt.RowTask.<K2> The data object of the hovered task.
rowData oj.ojGantt.Row.<K2> The data for the row the hovered task belongs to.
itemData D2 The data provider row data object for the hovered task. This will only be set if an DataProvider for task-data is being used.
componentElement Element The gantt element.
color string The color of the hovered task.

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.
Deprecated:
Since Description
6.2.0 Set the alias directly on the template element using the data-oj-as attribute instead.
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 :(oj.DataProvider<K1, D1>)

The oj.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 oj.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

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 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 tasks
enabled Enable moving tasks
Default Value:
  • "disabled"
Names
Item Name
Property dnd.move.tasks

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<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). See also 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.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 :seconds|minutes|hours|days|weeks|months|quarters|years

The time scale used for the major axis.

See the major-axis attribute for usage examples.
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>

An array of strings containing the names of scales 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). See also 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.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 :seconds|minutes|hours|days|weeks|months|quarters|years

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

An array of strings containing the names of scales 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

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>>|Promise.<Array.<oj.ojGantt.Row.<K2>>>|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>>|Promise.<Array.<oj.ojGantt.Row.<K2>>>|null)
Getter Type(Promise.<Array.<oj.ojGantt.Row.<K2>>>|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 of strings 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-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

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

The oj.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 oj.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.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.

See the task-defaults attribute for usage examples.
Default Value:
  • "0"
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

task-defaults.baseline.svg-style :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.

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

(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.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.

See the task-defaults attribute for usage examples.
Default Value:
  • "0"
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

task-defaults.progress.svg-style :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 tasks. See also ojResize.

See the task-defaults attribute for usage examples.
Supported Values:
Value Description
disabled Disable tasks resize
enabled Enable 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

task-defaults.svg-style :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

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.TooltipContext<K2, D2>) => ({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-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-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-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-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.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.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 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 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 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 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.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 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.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 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 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

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
rowIndex number
index number

Events

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
taskContexts Array<{data: ojGantt.RowTask<K2>, rowData: ojGantt.Row<K2>, 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
data oj.ojGantt.RowTask.<K2> The data object of the source task.
rowData oj.ojGantt.Row.<K2> The data for the row the source task belongs to.
itemData Object | null The data provider row data object for the source task. This will only be set if an oj.DataProvider for task-data is being used.
color string The color of the source task.
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.
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.
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.
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.
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.
rowContext {rowData: oj.ojGantt.Row.<K2>, componentElement: Element} The data context for the row at the target position.
Properties
Name Type Description
rowData oj.ojGantt.Row.<K2> The data for the target row.
componentElement Element The gantt element.

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
taskContexts Array<{data: ojGantt.RowTask<K2>, rowData: ojGantt.Row<K2>, 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
data oj.ojGantt.RowTask.<K2> The data object of the source task.
rowData oj.ojGantt.Row.<K2> The data for the row the source task belongs to.
itemData Object | null The data provider row data object for the source task. This will only be set if an oj.DataProvider for task-data is being used.
color string The color of the source task.
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.
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.
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.

ojViewportChange

Triggered after the viewport is changed due to a zoom or scroll operation.
Properties:

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

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

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

DataTask

Object type that defines a gantt data task item for the no template case.
Properties:
Name Type Argument Default Description
rowId any <optional>
 The id for the row the task belongs to.
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.
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 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.
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.
shortDesc string <optional>
 null The description of the task. This is used for accessibility and for customizing the tooltip text.
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 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.
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 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.
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 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.

Dependency<K1, K2>

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

DependencyTemplateContext

Properties:
Name Type Description
componentElement Element The <oj-gantt> custom element
data Object The data object for the current dependency
index number The zero-based index of the current dependency
key any The key of the current dependency

ReferenceObject

Properties:
Name Type Argument Description
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 CSSStyleDeclaration <optional>
 The CSS style defining the style of the reference object. Only SVG CSS style properties are supported.
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.

Row<K2>

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.
tasks Array.<oj.ojGantt.RowTask.<K2>> <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.
label string <optional>
 "" The label associated with the row.
labelStyle 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.

RowAxisLabelRendererContext<K2, D2>

Properties:
Name Type Description
parentElement Element A parent group element that takes a custom SVG fragment as the row label content. Modifications of the parentElement are not supported.
rowData oj.ojGantt.Row.<K2> The data for the row.
itemData D2[] An array of the data provider row data objects associated with the tasks belonging to the gantt row. This will only be set if an DataProvider for task-data is being used.
componentElement Element The gantt element.
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.
maxHeight number The maximum available height in px.

RowTask<K2>

Properties:
Name Type Argument Default Description
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. The id should be set by the application if the task-data DataProvider is not being used. The row key will be used as id in the case.
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.
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 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.
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.
shortDesc string <optional>
 null The description of the task. This is used for accessibility and for customizing the tooltip text.
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 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.
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 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.
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 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.

RowTemplateContext

Properties:
Name Type Description
componentElement Element The <oj-gantt> custom element
index number The row index
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.
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.

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

Properties:
Name Type Description
parentElement Element The tooltip element. This can be used to change the tooltip border or background color.
data oj.ojGantt.RowTask.<K2> The data object of the hovered task.
rowData oj.ojGantt.Row.<K2> The data for the row the hovered task belongs to.
itemData D2 The data provider row data object for the hovered task. This will only be set if an DataProvider for task-data is being used.
componentElement Element The gantt element.
color string The color of the hovered task.