This example demonstrates the rendering of a Gantt chart with a single task per row of the chart, and a JavaScript customization to apply a Reference Object. The Reference Object is displayed as a thin red line, marking today's date. The chart settings in use are as follows:

Show Row Axis - set to Yes, to render the left section of the Gantt. For this example, the value of Task Name is displayed. The text rendered in this region is dependent upon the column mappings defined at series-level. By default, the Task Name will be rendered. However, if the Row Name column mapping is set, its associated text will be rendered for the given row of the chart.

Tooltip Settings - The new Show Row attribute has been set to No, to prevent a 'Row' entry being displayed in a task tooltip. By default, a tooltip displays an entry for 'Row' and 'Label'. The 'Label' displays the value for the Task Name column. When the Row Name column mapping is set, 'Row' displays the value for the Row Name column. However, when that column mapping is not set, 'Row' will display the value for the Task Name column.

Task Appearance - the Tasks rendered on this example differ in appearance, with some being displayed as blue lines with start/end dates, while others are displayed as gray diamond-shaped markers. The difference in appearance is due to how JET interprets the Task 'type'. Normal tasks are rendered as the blue lines, while Milestones are rendered as gray diamond-shaped markers. As outlined in the type property of the RowTask type definition in the ojGantt API, if Task Start Date and Task End Date values are specified and unequal, then the assumption is that the task type is "normal". Otherwise, the type is assumed to be "milestone".

JavaScript Code - Use this chart-level attribute to customize your chart attributes and data. Any chart initialization changes, to attributes such as the chart y-axis, type, or orientation, can also be made. The JavaScript Code should follow a template similar to the following:

function( options ) {

    var event = new Date();
    // Define Reference Object line on the chart
    var constantLine = [ { value: event.toISOString() } ];
    
    // Set the referenceObjects option as part of the chart initialization
    options.referenceObjects = constantLine;
    
    return options;
}

Tooltip Options - Use the chart-level Tooltip attributes to declaratively choose what information should be displayed in the Gantt chart tooltip. This chart only displays the Row, Label, and Progress information, by setting the Show Row, Show Label and Show Progress attributes.

For more information on the JET Gantt chart options, refer to the Oracle JET ojGantt API.

For more information on Reference Object settings, refer to the Oracle JET Cookbook Gantt Chart: Multiple Tasks Per Row example.