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

# Item Color Logic -- Static, Dynamic, and Progress Colors

> Nextedy GANTT uses color to communicate task status at a glance. A red task bar tells you something is overdue. A gray bar means the work is resolved.

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

## Dynamic Colors (Progress Coloring)

By default, Gantt applies **dynamic progress coloring**. The chart evaluates each task's scheduling status against today's date and the task's progress, then automatically assigns a color:

| Color          | Meaning                  | Condition                                               |
| -------------- | ------------------------ | ------------------------------------------------------- |
| **Red**        | Overdue                  | End date is in the past, task is still unresolved       |
| **Orange**     | Progress behind schedule | End date is in the future, but progress indicates delay |
| **Blue**       | On track                 | Task is unresolved, schedule and progress look healthy  |
| **Gray**       | Resolved                 | Task has a resolution value (completed in Polarion)     |
| **Light blue** | Unplanned                | Task has no scheduled start date (defaults to today)    |
| **Green**      | Project item             | Task is configured as a "project" presentation mode     |

Dynamic coloring is controlled by the `progressColoring` parameter, which defaults to `true`. When enabled, the Gantt evaluates each task on every render and applies the appropriate color automatically.

<Note title="How Resolution Is Determined">
  The Gantt determines whether a task is "resolved" by checking if the Polarion work item has a **resolution value** set. This is configured in the Polarion workflow -- statuses that should count as "resolved" must have resolution values defined. If your custom statuses do not set resolution values, tasks in those statuses will not appear gray even if they are logically complete.
</Note>

## Static Colors (Script-Controlled)

When you need full control over task bar colors -- for example, coloring tasks by type, assignee, or a custom field -- you switch to **static coloring** by disabling progress colors:

```javascript theme={null}
// In Widget Properties > Advanced > Gantt Config Script:
gantt.config.show_progress_colors=false;
```

With progress colors disabled, every task renders with the default blue color unless you explicitly assign colors through an **Item Script**. In the Item Script, you use `task.color` to set the CSS color for each task:

```javascript theme={null}
// In Widget Properties > Advanced > Item Script:
if(wi.getType().getId()==="workpackage" && wi.getStatus().getId()==="draft") {
    task.color = "#bfbfbf";
}
```

The `task.color` property overrides all automatic coloring and gives you direct control.

## The task.color vs task.taskColor Distinction

This is the most common source of confusion when working with item colors. There are two different properties:

* **`task.color`** -- Overrides the task bar color completely, regardless of progress status. Use this with **static coloring** (when `show_progress_colors=false`).
* **`task.taskColor`** -- Changes only the **default blue color** that applies to on-track, unresolved tasks. Dynamic progress colors (red, orange, gray) still override it.

| Property         | Works with dynamic colors?             | Overrides overdue/resolved colors?  |
| ---------------- | -------------------------------------- | ----------------------------------- |
| `task.color`     | Only when `show_progress_colors=false` | Yes -- full override                |
| `task.taskColor` | Yes                                    | No -- only changes the default blue |

<Warning title="Common Pitfall: taskColor on Past Items">
  If you use `task.taskColor` to set a custom color, it only applies to tasks that would normally appear blue (on-track, unresolved). Tasks with end dates in the past will still appear red because the progress coloring system overrides `taskColor`. To color all tasks regardless of status, disable progress colors and use `task.color` instead.
</Warning>

## Customizing Default Progress Colors

If you want to keep dynamic coloring but change the specific colors used, configure the default colors via **Gantt Config Script** or **Configuration Properties**:

```javascript theme={null}
// In Gantt Config Script:
gantt.config.progress_color_overdue = "red";
gantt.config.progress_color_progressdue = "orange";
gantt.config.progress_color_resolved = "gray";
```

Alternatively, set these as administration properties for system-wide defaults:

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

You can also configure the color and foreground color for unplanned items:

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

## No-Working-Days Flagging

Starting with version 25.10.2, the Gantt visually flags tasks in red when the assigned user has **no available working days** during the scheduled period. This helps planners immediately identify unrealistic schedules caused by calendar conflicts.

## Resource Allocation Marker Colors

The resource view has its own color system, separate from task bar colors. Resource allocation markers use the `resourceMarkersColorConfig` to define colors for within-capacity (green by default) and over-capacity (red by default) states. These colors can be customized through the widget configuration.

## Choosing Your Approach

Use this decision framework to pick the right coloring strategy:

* **Keep dynamic colors** if you want automatic visual feedback about schedule health (most teams prefer this).
* **Customize dynamic colors** if you want the automatic behavior but with your brand's color palette.
* **Switch to static colors** if you need to color tasks by type, assignee, priority, or any other custom logic that is unrelated to schedule status.

## Related Pages

* [Configuration Layers and Precedence](/gantt/concepts/configuration-hierarchy) -- where color defaults are set
* [Architecture and Data Flow](/gantt/concepts/architecture) -- how scripts execute during rendering

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