Skip to main content

​
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 ElementPositionDefault Content
Task labelInside the task barWork item ID + title
Progress barInside the task bar (filled portion)Percentage of completion
Right-side textTo the right of the task barConfigurable (status, estimate, custom field)

​
Step 1: 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.

​
Step 2: 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.

​
Step 3: 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.

​
Step 4: 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.

​
See Also

KB ArticlesSupport TicketsSource Code
  • prod-gantt-src/com.nextedy.polarion.gantt/src/com/nextedy/polarion/gantt/model/Config.java
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/taskline/rightside-text.cy.ts
  • prod-gantt-src/com.nextedy.polarion.gantt/src/com/nextedy/polarion/gantt/model/Task.java
  • prod-gantt-src/com.nextedy.polarion.gantt/src/com/nextedy/polarion/gantt/widget/GanttWidgetConfig.java
  • prod-gantt-src/com.nextedy.polarion.gantt.client/src/js/main.js