> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure Right-Side Text on Task Bars

> This guide shows you how to display custom text to the right of task bars in Nextedy GANTT and style it to match your project needs.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

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

```javascript theme={null}
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:

```javascript theme={null}
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:

```javascript theme={null}
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):

```javascript theme={null}
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**:

```javascript theme={null}
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:

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

<Warning title="Classic project view limitation">
  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.
</Warning>

<Tip title="Prevent progress drag interference">
  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.
</Tip>

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

```html theme={null}
<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

<Warning title="Text clipping at end of timeline">
  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.
</Warning>

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

## See also

* [Configure Item Colors](/gantt/guides/visualization/configure-colors)
* [Customize Text Inside Task Bars](/gantt/guides/visualization/text-inside-bars)
* [Write Gantt Config Scripts](/gantt/guides/scripting/gantt-config-script)
* [Write Item Scripts](/gantt/guides/scripting/item-script-basics)
* [Apply Custom CSS to the Gantt Widget](/gantt/guides/integration/custom-css-styling)

<LastReviewed date="2026-07-02" />