Customize Text Inside Task Bars - Nextedy Documentation

Default Text Rendering

By default, each task bar displays the work item ID and title as its label (the text property). The task bar also renders a progress fill bar showing the completion percentage. Optionally, a right-side text label can display additional information such as status or remaining estimate.

Text Element	Position	Default Content
Task label	Inside the task bar	Work item ID + title
Progress bar	Inside the task bar (filled portion)	Percentage of completion
Right-side text	To the right of the task bar	Configurable (status, estimate, custom field)

Configure Right-Side Text

The right-side text displays a label to the right of each task bar. Configure it using the rightside_text template in the Gantt Config Script:

gantt.templates.rightside_text = function(start, end, task) {
  return task.fields.status || "";
};

This displays the work item status next to each task bar. You can display any field that you populate in the Item Script.

To display only a status icon without the full status text, use the statusIcon field in your rightside_text template:

gantt.templates.rightside_text = function(start, end, task) {
  if (task.fields && task.fields.statusIcon) {
    return '<img src="' + task.fields.statusIcon + '" style="height:14px;"/>';
  }
  return "";
};

Populate the statusIcon field in the Item Script by reading the icon URL from the work item.

Adjust Right-Side Text Styling

To customize the appearance (color, font size, position) of the right-side text, add a Script block widget to the page containing your Gantt chart with the following CSS:

<style>
.gantt_side_content.gantt_right {
    bottom: 0px;
    top: -5px;
}

.gantt_task_line .gantt_side_content {
    color: green;
    font-size: 10px;
}
</style>

Positioning: Adjust the top and bottom values to control vertical alignment relative to the task bar.
Appearance: Set color and font-size to match your visual preferences.

Adjust Task Bar and Row Height for Text Visibility

If text appears crowded inside task bars, increase the row and task heights. Add the following to the Gantt Config Script:

gantt.config.task_height = 20;
gantt.config.row_height = 22;

Always set task_height slightly smaller than row_height for proper rendering. If they are equal or task height is larger, visual artifacts may occur.

Populate Custom Fields for Display

To show custom work item fields in the task bar text or right-side labels, first extract them in the Item Script:

// Extract remaining estimate for display
var remaining = wi.getValue("remainingEstimate");
if (remaining) {
  task.getFields().put("remainingEstimate", remaining.toString());
}

// Extract a custom field
var priority = wi.getValue("priority");
if (priority) {
  task.getFields().put("priorityLabel", priority.getName());
}

Then reference those fields in the Gantt Config Script templates as task.fields.remainingEstimate or task.fields.priorityLabel.

These are two separate scripting contexts. The Item Script runs server-side for each work item and populates task.fields. The Gantt Config Script runs client-side and defines how those fields are rendered. Both scripts must be configured for custom text to appear.

Verification

You should now see your customized text labels inside and alongside task bars in the Gantt chart. Right-side text displays the fields you configured, styled with your CSS customizations. Task bars show the work item label and a proportional progress fill.

​Default Text Rendering

​Verification

​See Also

Default Text Rendering

Verification

See Also