Configure Right-Side Text on Task Bars

Display a Work Item Field as Right-Side Text

To show a field value next to each task bar, you need two scripts: an Item Script to prepare the data and a Gantt Config Script to render it.

Step 1: Prepare the data with Item Script

Navigate to Widget Properties > Advanced > Item Script and add a script that extracts the field you want to display. For example, to show the owner name next to Epic work items:

if(wi.getType().getId()==='epic'){
    var o = wi.getValue("owner");
    if(o!=null){
        task.getFields().put("owner", o.getName());
    }
}

You can pass any field using task.getFields().put(KEY, VALUE). For example, to show multiple assignees:

if(wi.getType().getId()==='portfolioepic'){
    var aIt = wi.getAssignees().iterator();
    var assignees = "";
    var separator = "";
    while(aIt.hasNext()){
        var assignee = aIt.next();
        assignees = assignees + separator + assignee.name;
        separator = ",";
    }
    if(assignees!=""){
        task.getFields().put("assignees", assignees);
    }
}

Step 2: Configure the rendering template

Navigate to Widget Properties > Advanced > Gantt Config Script and define the rightside_text template:

gantt.templates.rightside_text = function(start, end, task){
    return (task.fields.owner ? "Owner: <b>" + task.fields.owner + "</b>" : "");
};

Show Progress as Right-Side Text

To display a progress percentage next to each task bar, combine the Item Script and Gantt Config Script: Item Script (calculates progress from time tracking fields):

if(wi.getType().getId()==='epic'){
    var all = (wi.getRemainingEstimate()!=null ? wi.getRemainingEstimate().getHours() : 0) +
              (wi.getTimeSpent()!=null ? wi.getTimeSpent().getHours() : 0);
    var done = (wi.getTimeSpent()!=null ? wi.getTimeSpent().getHours() : 0);
    if(wi.getResolution()!=null){
        task.progress = 1;
    } else if(all==0){
        task.progress = 0;
    } else {
        task.progress = done / all;
    }
    var progressString = "Time Spent:" + (wi.getTimeSpent()!=null ? wi.getTimeSpent() : "0h") +
        " Remaining: " + (wi.getRemainingEstimate()!=null ? wi.getRemainingEstimate() : "0h") +
        " completion: " + Math.round(task.progress*100) + "%";
    task.getFields().put("progressString", progressString);
}

Gantt Config Script:

gantt.templates.rightside_text = function(start, end, task){
    return (task.progress > 0 ? "Progress: <b>" + Math.round(task.progress * 100) + " % (" +
        task.fields.progressString + ")</b>" : "");
};
gantt.config.drag_progress = false;

Show Only Status Icon

To display just the work item status icon instead of text, use this Gantt Config Script:

gantt.templates.rightside_text = function(start, end, task){
    return "<b><img src='" + task.fields.statusIcon + "'/> </b>";
};

In earlier versions, the classic project view (black summary bar) did not display right-side text even when the rightside_text template was set. This was fixed in version 24.11.3. Update to the latest version if right-side text is missing on project-type items.

When displaying progress text, add gantt.config.drag_progress = false; to your Gantt Config Script. This disables the interactive progress drag handle so users do not accidentally change progress values while viewing the text.

Style the Right-Side Text with CSS

To adjust the color, size, and positioning of right-side text, add a Script - block widget to the same page as your Gantt chart with CSS:

<style>
.gantt_side_content.gantt_right {
    bottom: 0px;
    top: -5px;
}
.gantt_task_line .gantt_side_content {
    color: green;
    font-size: 10px;
}
</style>

Positioning: Modify top and bottom to adjust vertical alignment
Appearance: Customize color and font-size to match your style

Right-side text on the last items in the timeline may be cut off if the text extends beyond the viewport. As a workaround, adjust the zoom level to provide more space. An improvement for automatic right-margin padding is planned for a future release.

Verification

You should now see the configured field value displayed as text to the right of each task bar. If you styled the text with CSS, verify the color and positioning match your expectations.

Getting Started

Concepts

Guides

Reference

FAQ

Configure Right-Side Text on Task Bars

Display a Work Item Field as Right-Side Text

Step 1: Prepare the data with Item Script

Step 2: Configure the rendering template

Show Progress as Right-Side Text

Show Only Status Icon

Style the Right-Side Text with CSS

Verification

See also

Getting Started

Concepts

Guides

Reference

FAQ

​Display a Work Item Field as Right-Side Text

​Step 1: Prepare the data with Item Script

​Step 2: Configure the rendering template

​Show Progress as Right-Side Text

​Show Only Status Icon

​Style the Right-Side Text with CSS

​Verification

​See also

Display a Work Item Field as Right-Side Text

Step 1: Prepare the data with Item Script

Step 2: Configure the rendering template

Show Progress as Right-Side Text

Show Only Status Icon

Style the Right-Side Text with CSS

Verification

See also