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

# Customize Text Inside Task Bars

> Control what text and labels appear inside and alongside task bars in the Nextedy GANTT chart, including the task label, right-side status text, and progress indicator.

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>;
};

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

<Steps>
  <Step title="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**:

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

    <Tip title="Show Status Icons Instead of Text">
      To display only a status icon without the full status text, use the `statusIcon` field in your `rightside_text` template:

      ```javascript theme={null}
      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.
    </Tip>
  </Step>

  <Step title="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:

    ```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**: 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>

  <Step title="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**:

    ```javascript theme={null}
    gantt.config.task_height = 20;
    gantt.config.row_height = 22;
    ```

    <Warning title="Task Height Must Be Smaller Than Row Height">
      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.
    </Warning>
  </Step>

  <Step title="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**:

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

    <Warning title="Item Script Populates Data, Config Script Renders It">
      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.
    </Warning>
  </Step>
</Steps>

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

* [Configure Right-Side Text on Task Bars](/gantt/guides/visualization/right-side-text)
* [Write Item Scripts](/gantt/guides/scripting/item-script-basics)
* [Write Gantt Config Scripts](/gantt/guides/scripting/gantt-config-script)
* [Use Square Task Borders](/gantt/guides/visualization/square-task-borders)
* [Adjust Gantt Row Height](/gantt/guides/visualization/row-height)

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