> ## 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 Progress-Related Coloring

> Adjust the default progress-based task bar colors in Nextedy GANTT to match your project's visual standards while retaining schedule-status awareness.

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 Color Legend

Out of the box, the Gantt uses dynamic coloring to indicate schedule status:

| Color          | Condition                                                  | Meaning                                      |
| -------------- | ---------------------------------------------------------- | -------------------------------------------- |
| **Red**        | End date is in the past, work item is unresolved           | Overdue — should have been finished          |
| **Orange**     | End date is in the future, but progress is behind schedule | Delayed — progress is not keeping pace       |
| **Blue**       | End date is in the future, progress is on track            | On track — schedule and progress are aligned |
| **Gray**       | Work item is resolved                                      | Completed                                    |
| **Light Blue** | Start date defaults to today (no scheduled date)           | Unplanned — not yet scheduled                |
| **Green**      | Item is set to project type via Item Script                | Parent item — schedule derived from children |

Starting with version 25.10.2, the Gantt also flags tasks in red when the assigned user has no available working days during the scheduled period.

## Change Progress Colors per Widget

Override the default progress colors for a specific Gantt widget by adding the following to **Widget Properties > Advanced > Gantt Config Script**:

```javascript theme={null}
gantt.config.progress_color_overdue = "#e53935";
gantt.config.progress_color_progressdue = "#fb8c00";
gantt.config.progress_color_resolved = "#0AA33A";
```

These properties control the colors for the three progress states. The default (on-track) blue color is not configurable via a Gantt Config Script property; use `task.taskColor` in the Item Script to change it.

## Change Progress Colors Across Projects

Set default progress colors at the project or server level under **Administration > Configuration Properties**:

```
nextedy.gantt.default.progress_color_overdue=red
nextedy.gantt.default.progress_color_progressdue=orange
nextedy.gantt.default.progress_color_resolved=gray
```

These administration properties serve as the baseline that individual widgets can override via the Gantt Config Script.

## Configure Unplanned Item Colors

Unplanned items (those with no scheduled start date) have their own color properties:

```
nextedy.gantt.workitems.unplanned_color=#c7cffb
nextedy.gantt.workitems.unplanned_color_fg=#001379
```

The `unplanned_color` sets the task bar background and `unplanned_color_fg` sets the text color for unplanned items.

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/umKaPvHwUHw-ZQFM/gantt/diagrams/guides/visualization/progress-coloring/diagram-1.svg?fit=max&auto=format&n=umKaPvHwUHw-ZQFM&q=85&s=3283f4b2943cae7484857303764e5d66" alt="diagram" style={{ maxWidth: "540px", width: "100%" }} width="540" height="700" data-path="gantt/diagrams/guides/visualization/progress-coloring/diagram-1.svg" />
</Frame>

## Combine with Custom Item Script Colors

When using dynamic (progress-based) coloring, you can selectively override the default blue color for specific work item types using `task.taskColor` in the Item Script:

```javascript theme={null}
if (wi.getType().getId() === "portfolioepic") {
  task.taskColor = "#bfbfbf";
}
```

<Warning title="task.taskColor vs. task.color">
  In dynamic mode, `task.taskColor` changes only the default on-track color. Overdue, delayed, and resolved items keep their progress colors. If you use `task.color` instead, it overrides all progress-based coloring for that specific item. See [Configure Item Colors](/gantt/guides/visualization/configure-colors) for the full comparison.
</Warning>

<Tip title="Disable Progress Colors for Full Control">
  If you want complete manual control over all task bar colors, disable progress coloring entirely with `gantt.config.show_progress_colors = false` in the Gantt Config Script. Then use `task.color` in the Item Script to assign colors based on any condition.
</Tip>

## Verify

You should now see that task bars use your customized progress colors. Overdue items appear in your configured overdue color, delayed items in your progress-due color, and resolved items in your resolved color. Unplanned items display with the configured unplanned background and foreground colors.

## See Also

* [Configure Item Colors](/gantt/guides/visualization/configure-colors)
* [Color Logic Script Examples](/gantt/guides/scripting/color-logic-scripts)
* [Write Item Scripts](/gantt/guides/scripting/item-script-basics)
* [Write Gantt Config Scripts](/gantt/guides/scripting/gantt-config-script)
* [Track and Calculate Progress](/gantt/guides/editing/progress-tracking)

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