Element: <oj-gantt>

Slots

JET elements can have up to two types of child content:

• Any child element with a slot attribute will be moved into that named slot, e.g. <span slot='startIcon'>...</span>. All supported named slots are documented below. Child elements with unsupported named slots will be removed from the DOM.
• Any child element lacking a slot attribute will be moved to the default slot, also known as a regular child.

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

Example

Initialize the component with a context menu:

<oj-some-element>
    <-- use the contextMenu slot to designate this as the context menu for this component -->
    <oj-menu slot="contextMenu" style="display:none" aria-label="Some element's context menu">
...
    </oj-menu>
</oj-some-element>

dependencyTemplate

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

The dependencyTemplate slot is used to specify the template for creating each dependency line of the gantt. The slot must be a <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 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 curent dependency
key	any	The key of the current dependency

Example

Initialize the Gantt with an inline dependency template specified:

<oj-gantt dependency-data="[[dependencyDataProvider]]">
  <template slot="dependencyTemplate">
    <oj-gantt-dependency
      predecessor-task-id="[[$current.data.predecessor]]"
      successor-task-id="[[$current.data.successor]]">
    </oj-gantt-dependency>
  </template>
</oj-gantt>

rowTemplate

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

The rowTemplate slot is used to specify the template for generating the row properties of the gantt. The slot 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 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

Example

Initialize the Gantt with an inline row template specified:

<oj-gantt task-data="[[taskDataProvider]]">
  <template slot="rowTemplate">
    <oj-gantt-row
      label="[[$current.tasks[0].data.resource]]">
    </oj-gantt-row>
  </template>
</oj-gantt>

taskTemplate

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

The taskTemplate slot is used to specify the template for creating each task of the gantt. The slot must be a <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 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 curent task
key	any	The key of the current task

Example

Initialize the Gantt with an inline task template specified:

<oj-gantt task-data="[[taskDataProvider]]">
  <template slot="taskTemplate">
    <oj-gantt-task
      row-id="[[$current.data.resource]]"
      start="[[$current.data.begin]]"
      end="[[$current.data.finish]]">
    </oj-gantt-task>
  </template>
</oj-gantt>

Attributes

animation-on-data-change :string

Defines the animation that is applied on data changes.

Supported Values:

Name	Type
"auto"	string
"none"	string

Default Value:

• "none"

Names

Item	Name
Property	animationOnDataChange
Property change event	animationOnDataChangeChanged
Property change listener attribute (must be of type function)	on-animation-on-data-change-changed

Examples

Initialize the Gantt with the animation-on-data-change attribute specified:

<oj-gantt animation-on-data-change='auto'></oj-gantt>

Get or set the animationOnDataChange property after initialization:

// getter
var value = myGantt.animationOnDataChange;

// setter
myGantt.animationOnDataChange = 'auto';

animation-on-display :string

Defines the animation that is shown on initial display.

Supported Values:

Name	Type
"auto"	string
"none"	string

Default Value:

• "none"

Names

Item	Name
Property	animationOnDisplay
Property change event	animationOnDisplayChanged
Property change listener attribute (must be of type function)	on-animation-on-display-changed

Examples

Initialize the Gantt with the animation-on-display attribute specified:

<oj-gantt animation-on-display='auto'></oj-gantt>

Get or set the animationOnDisplay property after initialization:

// getter
var value = myGantt.animationOnDisplay;

// setter
myGantt.animationOnDisplay = 'auto';

as :string

An alias for the $current context variable passed to slot content for the dependencyTemplate, taskTemplate, or rowTemplate slots.

Default Value:

• ""

Names

Item	Name
Property	as
Property change event	asChanged
Property change listener attribute (must be of type function)	on-as-changed

Example

Initialize the Gantt with the as attribute specified:

<oj-gantt as="item">
  <template slot="dependencyTemplate">
    <oj-gantt-dependency
      predecessor-task-id="[[item.data.predecessor]]"
      successor-task-id="[[item.data.successor]]">
    </oj-gantt-dependency>
  </template>
</oj-gantt>

axis-position :string

The position of the major and minor axis.

Supported Values:

Name	Type
"bottom"	string
"top"	string

Default Value:

• "top"

Names

Item	Name
Property	axisPosition
Property change event	axisPositionChanged
Property change listener attribute (must be of type function)	on-axis-position-changed

Examples

Initialize the Gantt with the axis-position attribute specified:

<oj-gantt axis-position='bottom'></oj-gantt>

Get or set the axisPosition property after initialization:

// getter
var value = myGantt.axisPosition;

// setter
myGantt.axisPosition = 'bottom';

(nullable) dependencies :(Array.<oj.ojGantt.Dependency>|Promise.<Array.<oj.ojGantt.Dependency>>|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.

Default Value:

• null

Names

Item	Name
Property	dependencies
Property change event	dependenciesChanged
Property change listener attribute (must be of type function)	on-dependencies-changed

Examples

Initialize the Gantt with the dependencies attribute specified:

<oj-gantt dependencies='[[myDependencies]]'></oj-gantt>

Get or set the dependencies property after initialization:

// Get all (The dependencies getter always returns a Promise so there is no "get one" syntax)
var values = myGantt.dependencies;

// Set all (There is no permissible "set one" syntax.)
myGantt.dependencies = [
    {
        "id": "d1",
        "predecessorTaskId": "task1",
        "successorTaskId": "task2",
        "svgStyle": {"stroke": "red"},
        "type": "startFinish"
    },
    {
        "id": "d2",
        "predecessorTaskId": "task2",
        "successorTaskId": "task3"
    }
];

(nullable) dependency-data :oj.DataProvider

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. Note that when using this attribute, a template for the dependencyTemplate slot should be provided.

Default Value:

• null

Names

Item	Name
Property	dependencyData
Property change event	dependencyDataChanged
Property change listener attribute (must be of type function)	on-dependency-data-changed

Examples

Initialize the Gantt with the dependency-data attribute specified:

<oj-gantt dependency-data="[[dependencyDataProvider]]">
  <template slot="dependencyTemplate">
    <oj-gantt-dependency
      predecessor-task-id="[[$current.data.predecessor]]"
      successor-task-id="[[$current.data.successor]]">
    </oj-gantt-dependency>
  </template>
</oj-gantt>

Get or set the dependencyData property after initialization:

// getter
var value = myGantt.dependencyData;

// setter
myGantt.dependencyData = dependencyDataProvider;

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)	on-dnd-changed

Examples

Initialize the Gantt with some dnd functionality:

<!-- Using dot notation -->
<oj-gantt dnd.move.tasks='enabled'></oj-gantt>

<!-- Using JSON notation -->
<oj-gantt dnd='{"move": {"tasks": "enabled"}}'></oj-gantt>

Get or set the dnd property after initialization:

// Get one
var value = myGantt.dnd.move;

// Set one, leaving the others intact.
myGantt.setProperty('dnd.move', {"tasks": "enabled"});

// Get all
var values = myGantt.dnd;

// Set all. Must list every dnd functionality, as those not listed are lost.
myGantt.dnd = {
    "move": {"tasks": "enabled"}
};

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

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:

Name	Type	Description
"disabled"	string	Disable moving tasks
"enabled"	string	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)	on-end-changed

Examples

Initialize the Gantt with the end attribute specified:

<oj-gantt end='2017-12-31T05:00:00.000Z'></oj-gantt>

Get or set the end property after initialization:

// getter
var value = myGantt.end;

// setter
myGantt.end = '2017-12-31T05:00:00.000Z';

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)	on-gridlines-changed

Examples

Initialize the Gantt with the gridlines attribute specified:

<!-- Using dot notation -->
<oj-gantt gridlines.horizontal='auto' gridlines.vertical='auto'></oj-gantt>

<!-- Using JSON notation -->
<oj-gantt gridlines='{"horizontal": "auto", "vertical": "auto"}'></oj-gantt>

Get or set the gridlines property after initialization:

// Get one
var value = myGantt.gridlines.horizontal;

// Set one, leaving the others intact.
myGantt.setProperty('gridlines.horizontal', 'auto');

// Get all
var values = myGantt.gridlines;

// Set all. Must list every resource key, as those not listed are lost.
myGantt.gridlines = {
    "horizontal": "auto",
    "vertical": "auto"
};

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:

Name	Type
"auto"	string
"hidden"	string
"visible"	string

Default Value:

• "auto"

Names

Item	Name
Property	gridlines.horizontal

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:

Name	Type
"auto"	string
"hidden"	string
"visible"	string

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)	on-major-axis-changed

Examples

Initialize the Gantt with the major-axis attribute specified:

<!-- Using dot notation -->
<oj-gantt major-axis.converter="[[myConverterObject]]" major-axis.scale="months" major-axis.zoom-order='["quarters", "months", "weeks", "days"]'></oj-gantt>

<!-- Using JSON notation -->
<oj-gantt major-axis='{"scale": "months", "zoomOrder": ["quarters", "months", "weeks", "days"]}'></oj-gantt>

Get or set the majorAxis property after initialization:

// Get one
var value = myGantt.majorAxis.scale;

// Set one, leaving the others intact.
myGantt.setProperty('majorAxis.scale', 'months');

// Get all
var values = myGantt.majorAxis;

// Set all. Must list every resource key, as those not listed are lost.
myGantt.majorAxis = {
    "converter": myConverterObject,
    "scale": "months",
    "zoomOrder": ["quarters", "months", "weeks", "days"]
};

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

A converter (an object literal or 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.Converter). See oj.DateTimeConverterFactory for details on creating built-in datetime converters.

See the major-axis attribute for usage examples.

Default Value:

• {"default": null, "seconds": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'hour': 'numeric', 'minute': '2-digit', 'second': '2-digit'}), "minutes": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'hour': 'numeric', 'minute': '2-digit'}), "hours": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'hour': 'numeric'}), "days": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'numeric', 'day': '2-digit'}), "weeks": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'numeric', 'day': '2-digit'}), "months": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'long'}), "quarters": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'long'}), "years": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'year': 'numeric'})}

Names

Item	Name
Property	majorAxis.converter

(nullable) major-axis.scale :string

The time scale used for the major axis.

See the major-axis attribute for usage examples.

Supported Values:

Name	Type
"days"	string
"hours"	string
"minutes"	string
"months"	string
"quarters"	string
"seconds"	string
"weeks"	string
"years"	string

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 in order for the Gantt to properly render.

Names

Item	Name
Property	minorAxis
Property change event	minorAxisChanged
Property change listener attribute (must be of type function)	on-minor-axis-changed

Examples

Initialize the Gantt with the minor-axis attribute specified:

<!-- Using dot notation -->
<oj-gantt minor-axis.converter="[[myConverterObject]]" minor-axis.scale="weeks" minor-axis.zoom-order='["quarters", "months", "weeks", "days"]'></oj-gantt>

<!-- Using JSON notation -->
<oj-gantt minor-axis='{"scale": "weeks", "zoomOrder": ["quarters", "months", "weeks", "days"]}'></oj-gantt>

Get or set the minorAxis property after initialization:

// Get one
var value = myGantt.minorAxis.scale;

// Set one, leaving the others intact.
myGantt.setProperty('minorAxis.scale', 'weeks');

// Get all
var values = myGantt.minorAxis;

// Set all. Must list every resource key, as those not listed are lost.
myGantt.minorAxis = {
    "converter": myConverterObject,
    "scale": "weeks",
    "zoomOrder": ["quarters", "months", "weeks", "days"]
};

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

A converter (an object literal or 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.Converter). See oj.DateTimeConverterFactory for details on creating built-in datetime converters.

See the minor-axis attribute for usage examples.

Default Value:

• {"default": null, "seconds": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'hour': 'numeric', 'minute': '2-digit', 'second': '2-digit'}), "minutes": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'hour': 'numeric', 'minute': '2-digit'}), "hours": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'hour': 'numeric'}), "days": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'numeric', 'day': '2-digit'}), "weeks": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'numeric', 'day': '2-digit'}), "months": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'long'}), "quarters": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'month': 'long'}), "years": oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_DATETIME).createConverter({'year': 'numeric'})}

Names

Item	Name
Property	minorAxis.converter

(nullable) minor-axis.scale :string

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

See the minor-axis attribute for usage examples.

Supported Values:

Name	Type
"days"	string
"hours"	string
"minutes"	string
"months"	string
"quarters"	string
"seconds"	string
"weeks"	string
"years"	string

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)	on-reference-objects-changed

Examples

Initialize the Gantt with the reference-objects attribute specified:

<oj-gantt reference-objects='[{"value": "2017-04-15T04:00:00.000Z"}]'></oj-gantt>

Get or set the referenceObjects property after initialization:

// Get one
var value = myGantt.referenceObjects[0];

// Get all
var values = myGantt.referenceObjects;

// Set all (There is no permissible "set one" syntax.)
myGantt.referenceObjects = [{
    "value": "2017-04-15T00:00:00.000Z",
    "svgStyle": {"stroke": "red"}
}];

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)	on-row-axis-changed

Examples

Initialize the Gantt with the row-axis attribute specified:

<!-- Using dot notation -->
<oj-gantt row-axis.rendered='on' row-axis.max-width='50px'></oj-gantt>

<!-- Using JSON notation -->
<oj-gantt row-axis='{"rendered": "on", "maxWidth": "50px"}'></oj-gantt>

Get or set the rowAxis property after initialization:

// Get one
var value = myGantt.rowAxis.rendered;

// Set one, leaving the others intact
myGantt.setProperty('rowAxis.rendered', 'on');

// Get all
var values = myGantt.rowAxis;

// Set all (any value not set will be ignored)
myGantt.rowAxis = {
    rendered: "on",
    maxWidth: "50px"
};

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: oj.ojGantt.RowAxisLabelRendererContext) => ({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

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

row-axis.rendered :string

Defines whether row labels are rendered.

See the row-axis attribute for usage examples.

Supported Values:

Name	Type
"off"	string
"on"	string

Default Value:

• "off"

Names

Item	Name
Property	rowAxis.rendered

row-axis.width :string

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

See the row-axis attribute for usage examples.

Default Value:

• "max-content"

Names

Item	Name
Property	rowAxis.width

(nullable) rows :(Array.<oj.ojGantt.Row>|Promise.<Array.<oj.ojGantt.Row>>|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.

Default Value:

• null

Names

Item	Name
Property	rows
Property change event	rowsChanged
Property change listener attribute (must be of type function)	on-rows-changed

Examples

Initialize the Gantt with the rows attribute specified:

<oj-gantt rows='[[myRows]]'></oj-gantt>

Get or set the rows property after initialization:

// Get all (The rows getter always returns a Promise so there is no "get one" syntax)
var values = myGantt.rows;

// Set all (There is no permissible "set one" syntax.)
myGantt.rows = [
    {
        "id": "r1",
        "label": "Row 1",
        "tasks": [
            {
                "id": "task1_1",
                "start": "2017-01-04T17:00:00.000Z",
                "end": "2017-01-10T17:00:00.000Z",
                "label":"Label 1-1"
            },
            {
                "id": "task1_2",
                "start": "2017-02-04T17:00:00.000Z",
                "end": "2017-02-10T17:00:00.000Z",
                "label":"Label 1-2"
            }
        ]
    },
    {
        "id": "r2",
        "label": "Row 2",
        "tasks": [
            {
                "id": "task2_1",
                "start": "2017-01-10T17:00:00.000Z",
                "end": "2017-01-24T17:00:00.000Z",
                "label":"Label 2-1"
            },
            {
                "id": "task2_2",
                "start": "2017-02-10T17:00:00.000Z",
                "end": "2017-02-27T17:00:00.000Z",
                "label":"Label 2-2"
            }
        ]
    }
];

selection :Array.<any>

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)	on-selection-changed

Examples

Initialize the Gantt with the selection attribute specified:

<oj-gantt selection='["taskID1", "taskID2", "taskID3"]'></oj-gantt>

Get or set the selection property after initialization:

// Get one
var value = myGantt.selection[0];

// Get all
var values = myGantt.selection;

// Set all (There is no permissible "set one" syntax.)
myGantt.selection = ["taskID1", "taskID2", "taskID3"];

selection-mode :string

The type of selection behavior that is enabled on the Gantt. If 'single' is specified, only a single task can be selected at once. If 'multiple', any number of tasks can be selected at once. Otherwise, selection is disabled.

Supported Values:

Name	Type
"multiple"	string
"none"	string
"single"	string

Default Value:

• "none"

Names

Item	Name
Property	selectionMode
Property change event	selectionModeChanged
Property change listener attribute (must be of type function)	on-selection-mode-changed

Examples

Initialize the Gantt with the selection-mode attribute specified:

<oj-gantt selection-mode='multiple'></oj-gantt>

Get or set the selectionMode property after initialization:

// getter
var value = myGantt.selectionMode;

// setter
myGantt.selectionMode = 'multiple';

start :string

The start 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	start
Property change event	startChanged
Property change listener attribute (must be of type function)	on-start-changed

Examples

Initialize the Gantt with the start attribute specified:

<oj-gantt start='2017-01-01T05:00:00.000Z'></oj-gantt>

Get or set the start property after initialization:

// getter
var value = myGantt.start;

// setter
myGantt.start = "2017-01-01T05:00:00.000Z";

(nullable) task-data :oj.DataProvider

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. Note that when using this attribute, a template for the taskTemplate slot should be provided. Additionally 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)	on-task-data-changed

Examples

Initialize the Gantt with the task-data attribute specified:

<oj-gantt task-data="[[taskDataProvider]]" row-axis.rendered="on">
  <template slot="rowTemplate">
    <oj-gantt-row
      label="[[$current.id]]">
    </oj-gantt-row>
  </template>
  <template slot="taskTemplate">
    <oj-gantt-task
      row-id="[[$current.data.resource]]"
      start="[[$current.data.begin]]"
      end="[[$current.data.finish]]">
    </oj-gantt-task>
  </template>
</oj-gantt>

Get or set the taskData property after initialization:

// getter
var value = myGantt.taskData;

// setter
myGantt.taskData = taskDataProvider;

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)	on-task-defaults-changed

Examples

Initialize the Gantt with the task-defaults attribute specified:

<!-- Using dot notation -->
<oj-gantt task-defaults.border-radius='5px' task-defaults.label-position='["end"]' task-defaults.progress.height="50%"></oj-gantt>

<!-- Using JSON notation -->
<oj-gantt task-defaults='{"borderRadius": "5px", "labelPosition": ["end"], "progress": {"height": "50%"}}'></oj-gantt>

Get or set the taskDefaults property after initialization:

// Get one
var value = myGantt.taskDefaults.height;

// Get all
var values = myGantt.taskDefaults;

// Set one, leaving the others intact.
myGantt.setProperty('taskDefaults.height', 30);

// Set all. Must list every resource key, as those not listed are lost.
myGantt.taskDefaults = {
    "borderRadius": "5px",
    "labelPosition": ["end"],
    "height": 30,
    "progress": {"height": "50%"}
};

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

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 pixel. If not specified, a default height is used depending on the baseline type.

See the task-defaults attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	taskDefaults.baseline.height

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 :Object

The CSS style defining the style of the baseline.

See the task-defaults attribute for usage examples.

Default Value:

• {}

Names

Item	Name
Property	taskDefaults.baseline.svgStyle

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 pixel. If not specified, a default height is used depending on the task type, and whether the baseline is specified.

See the task-defaults attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	taskDefaults.height

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:

Name	Type
"end"	string
"innerCenter"	string
"innerEnd"	string
"innerStart"	string
"none"	string
"start"	string

Default Value:

• ["end", "innerCenter", "start", "max"]

Names

Item	Name
Property	taskDefaults.labelPosition

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

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

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

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 :Object

The CSS inline style to apply to the progress bar. 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.svgStyle

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 :Object

The CSS style defining the style of the task.

See the task-defaults attribute for usage examples.

Default Value:

• {}

Names

Item	Name
Property	taskDefaults.svgStyle

task-defaults.type :string

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.

See the task-defaults attribute for usage examples.

Supported Values:

Name	Type
"auto"	string
"milestone"	string
"normal"	string
"summary"	string

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)	on-tooltip-changed

Examples

Initialize the Gantt with the tooltip attribute specified:

<oj-gantt tooltip.renderer='[[tooltipFun]]'></oj-gantt>

<oj-gantt tooltip='[[{"renderer": tooltipFun}]]'></oj-gantt>

Get or set the tooltip property after initialization:

// Get one
var value = myGantt.tooltip.renderer;

// Set one, leaving the others intact.
myGantt.setProperty('tooltip.renderer', tooltipFun);

// Get all
var values = myGantt.tooltip;

// Set all. Must list every resource key, as those not listed are lost.
myGantt.tooltip = {'renderer': tooltipFun};

(nullable) tooltip.renderer :((context: oj.ojGantt.TooltipContext) => ({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 :string

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:

Name	Type
"off"	string
"on"	string

Default Value:

• "on"

Names

Item	Name
Property	trackResize
Property change event	trackResizeChanged
Property change listener attribute (must be of type function)	on-track-resize-changed

Examples

Initialize the data visualization element with the track-resize attribute specified:

<oj-some-dvt track-resize='off'></oj-some-dvt>

Get or set the trackResize property after initialization:

// getter
var value = myComponent.trackResize;

// setter
myComponent.trackResize="off";

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)	on-translations-changed

Examples

Initialize the component, overriding some translated resources and leaving the others intact:

<!-- Using dot notation -->
<oj-some-element translations.some-key='some value' translations.some-other-key='some other value'></oj-some-element>

<!-- Using JSON notation -->
<oj-some-element translations='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-some-element>

Get or set the translations property after initialization:

// Get one
var value = myComponent.translations.someKey;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myComponent.setProperty('translations.someKey', 'some value');

// Get all
var values = myComponent.translations;

// Set all.  Must list every resource key, as those not listed are lost.
myComponent.translations = {
    someKey: 'some value',
    someOtherKey: 'some other value'
};

(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-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-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 finalized 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 is initiated 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 task move is initiated for accessibility.

See the translations attribute for usage examples.

Default Value:

• "{0} others selected"

Since:

• 5.1.0

Names

Item	Name
Property	translations.taskMoveSelectionInfo

(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)	on-value-formats-changed

Examples

Initialize the Gantt with the value-formats attribute specified:

<!-- Using dot notation -->
<oj-gantt value-formats.row.tooltip-label="Employee" value-formats.label.tooltip-display="off"></oj-gantt>

<!-- Using JSON notation -->
<oj-gantt value-formats='{"row": {"tooltipLabel": "Employee"}, "label": {"tooltipDisplay": "off"}}'></oj-gantt>

Get or set the valueFormats property after initialization:

// Get one
var value = myGantt.valueFormats.row.tooltipLabel;

// Set one, leaving the others intact
myGantt.setProperty('valueFormats.row.tooltipLabel', 'Employee');

// Get all
var values = myGantt.valueFormats;

// Set all. Must list every resource key, as those not listed are lost.
myGantt.valueFormats = {
    "row": {"tooltipLabel": "Employee"},
    "label": {"tooltipDisplay": "off"}
};

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 :(oj.Converter<string>)

A converter (an object literal or 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 oj.DateTimeConverterFactory for details on creating built-in datetime converters.

See the value-formats attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	valueFormats.baselineDate.converter

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:

Name	Type
"auto"	string
"off"	string

Default Value:

• "auto"

Names

Item	Name
Property	valueFormats.baselineDate.tooltipDisplay

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

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 :(oj.Converter<string>)

A converter (an object literal or 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 oj.DateTimeConverterFactory for details on creating built-in datetime converters.

See the value-formats attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	valueFormats.baselineEnd.converter

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:

Name	Type
"auto"	string
"off"	string

Default Value:

• "auto"

Names

Item	Name
Property	valueFormats.baselineEnd.tooltipDisplay

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

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 :(oj.Converter<string>)

A converter (an object literal or 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 oj.DateTimeConverterFactory for details on creating built-in datetime converters.

See the value-formats attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	valueFormats.baselineStart.converter

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:

Name	Type
"auto"	string
"off"	string

Default Value:

• "auto"

Names

Item	Name
Property	valueFormats.baselineStart.tooltipDisplay

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

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 :(oj.Converter<string>)

A converter (an object literal or 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 oj.DateTimeConverterFactory for details on creating built-in datetime converters.

See the value-formats attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	valueFormats.date.converter

value-formats.date.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.

Supported Values:

Name	Type
"auto"	string
"off"	string

Default Value:

• "auto"

Names

Item	Name
Property	valueFormats.date.tooltipDisplay

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

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 :(oj.Converter<string>)

A converter (an object literal or 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 oj.DateTimeConverterFactory for details on creating built-in datetime converters.

See the value-formats attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	valueFormats.end.converter

value-formats.end.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.

Supported Values:

Name	Type
"auto"	string
"off"	string

Default Value:

• "auto"

Names

Item	Name
Property	valueFormats.end.tooltipDisplay

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

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

value-formats.label.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.

Supported Values:

Name	Type
"auto"	string
"off"	string

Default Value:

• "auto"

Names

Item	Name
Property	valueFormats.label.tooltipDisplay

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

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 :(oj.Converter<number>)

A converter (an object literal or instance that duck types oj.Converter) used to format the label. See oj.NumberConverterFactory for details on creating built-in number converters.

See the value-formats attribute for usage examples.

Default Value:

• oj.Validation.converterFactory(oj.ConverterFactory.CONVERTER_TYPE_NUMBER).createConverter({style: 'percent'})

Names

Item	Name
Property	valueFormats.progress.converter

value-formats.progress.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.

Supported Values:

Name	Type
"auto"	string
"off"	string

Default Value:

• "auto"

Names

Item	Name
Property	valueFormats.progress.tooltipDisplay

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

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

value-formats.row.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.

Supported Values:

Name	Type
"auto"	string
"off"	string

Default Value:

• "auto"

Names

Item	Name
Property	valueFormats.row.tooltipDisplay

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

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 :(oj.Converter<string>)

A converter (an object literal or 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 oj.DateTimeConverterFactory for details on creating built-in datetime converters.

See the value-formats attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	valueFormats.start.converter

value-formats.start.tooltip-display :string

Whether the value is displayed in the tooltip.

See the value-formats attribute for usage examples.

Supported Values:

Name	Type
"auto"	string
"off"	string

Default Value:

• "auto"

Names

Item	Name
Property	valueFormats.start.tooltipDisplay

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)	on-viewport-end-changed

Examples

Initialize the Gantt with the viewport-end attribute specified:

<oj-gantt viewport-end='2017-12-31T05:00:00.000Z'></oj-gantt>

Get or set the viewportEnd property after initialization:

// getter
var value = myGantt.viewportEnd;

// setter
myGantt.viewportEnd = '2017-12-31T05:00:00.000Z';

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)	on-viewport-start-changed

Examples

Initialize the Gantt with the viewport-start attribute specified:

<oj-gantt viewport-start='2017-01-01T05:00:00.000Z'></oj-gantt>

Get or set the viewportStart property after initialization:

// getter
var value = myGantt.viewportStart;

// setter
myGantt.viewportStart = '2017-01-01T05:00:00.000Z';

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.

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.

Name	Type	Description
taskContexts	Array.<Object>	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 The data object of the source task. rowData oj.ojGantt.Row 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	Object	The data context for the row at the target position. Properties Name Type Description rowData oj.ojGantt.Row The data for the target row. componentElement Element The gantt element.

Examples

Specify an ojMove listener via the DOM attribute:

<oj-gantt on-oj-move='[[listener]]'></oj-gantt>

Specify an ojMove listener via the JavaScript property:

myGantt.onOjMove = listener;

Add an ojMove listener via the addEventListener API:

myGantt.addEventListener('ojMove', listener);

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.

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

Examples

Specify an ojViewportChange listener via the DOM attribute:

<oj-gantt on-oj-viewport-change='[[listener]]'></oj-gantt>

Specify an ojViewportChange listener via the JavaScript property:

myGantt.onOjViewportChange = listener;

Add an ojViewportChange listener via the addEventListener API:

myGantt.addEventListener('ojViewportChange', listener);

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)

Example

// Returns {'subId': 'oj-some-sub-id', 'componentSpecificProperty': someValue, ...}
var context = myComponent.getContextByNode(nodeInsideElement);

getProperty(property) → {any}

Retrieves a value for a property or a single subproperty for complex properties.

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:

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

refresh() → {void}

Refreshes the component.

Returns:

Type

void

setProperties(properties) → {void}

Performs a batch set of properties.

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 single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.

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

Dependency

Properties:

Name	Type	Argument	Default	Description
id	any			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 oj.DataProvider is not being used. The row key will be used as id in the oj.DataProvider case.
predecessorTaskId	any			The identifier for the predecessor task. This must reference a task in Gantt.
shortDesc	string	<optional>		The description of the dependency line. This is used for accessibility.
successorTaskId	any			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	Object	<optional>		The CSS style defining the style of the dependency line.
type	"startStart" | "startFinish" | "finishFinish" | "finishStart"	<optional>	"finishStart"	The type of dependency. The following values are supported: finishStart: predecessor task must finish before successor task can start. finishFinish: predecessor task must finish before successor task can finish. startStart: predecessor task must start before successor task can start. startFinish: predecessor task must start before successor task can finish.

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	Object	<optional>	The CSS style defining the style of the reference object.
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

Properties:

Name	Type	Argument	Description
id	any	<optional>	The identifier for the row. Optional if the row contains only one task. This must be unique across all rows in Gantt.
label	string	<optional>	The label associated with the row.
labelStyle	Object	<optional>	The CSS style defining the style of the label. Only CSS style applicable to SVG elements can be used.
tasks	Array.<oj.ojGantt.RowTask>	<optional>	An array of tasks. If not specified, no data will be shown. When only one of 'start' or 'end' value is specified, or when 'start' and 'end' values are equal, the task is considered a milestone task. Note that values of analogous properties from task-defaults are used for any unspecified properties on the task, and values of any specified properties would override those from task-defaults.

RowAxisLabelRendererContext

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	The data for the row.
itemData	Array.<Object> | null	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 oj.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

Properties:

Name	Type	Argument	Description
borderRadius	string	<optional>	The border radius of the task. Accepts values allowed in CSS border-radius attribute. The default value comes from 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 pixel. The default value comes from task-defaults.height.
id	any		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 oj.DataProvider is not being used. The row key will be used as id in the oj.DataProvider case.
label	string	<optional>	The label associated with the task.
labelPosition	string | Array.<string>	<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 task-defaults.label-position.
labelStyle	Object	<optional>	The CSS style defining the style of the label. Only CSS style applicable to SVG elements can be used.
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>	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 task-defaults.svg-class-name.
svgStyle	Object	<optional>	The CSS style defining the style of the task. The default value comes from task-defaults.svg-style.
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 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 Description borderRadius string <optional> The border radius of the progress bar. Accepts values allowed in CSS border-radius attribute. The default value comes from task-defaults.progress.border-radius. 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 task-defaults.progress.height. 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 task-defaults.progress.svg-class-name. svgStyle Object <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 task-defaults.progress.svg-style. value number <optional> The value of the progress between 0 and 1 inclusive. If not specified or invalid, no progress will be shown.
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 Description borderRadius string <optional> The border radius of the baseline. Accepts values allowed in CSS border-radius attribute. The default value comes from task-defaults.baseline.border-radius. 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. height number <optional> The height of the baseline in pixel. The default value comes from task-defaults.baseline.height. 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. svgClassName string <optional> A space delimited list of CSS style classes defining the style of the baseline. The default value comes from task-defaults.baseline.svg-class-name. svgStyle Object <optional> The CSS style defining the style of the baseline. The default value comes from task-defaults.baseline.svg-style.

TooltipContext

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	The data object of the hovered task.
rowData	oj.ojGantt.Row	The data for the row the hovered task belongs to.
itemData	Object | null	The data provider row data object for the hovered task. This will only be set if an oj.DataProvider for task-data is being used.
componentElement	Element	The gantt element.
color	string	The color of the hovered task.