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

# Configure Item Colors

> Control task bar colors in Nextedy GANTT using either static coloring (full manual control) or dynamic coloring (progress-based with customizable defaults).

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

## Choose a Coloring Mode

The Gantt supports two coloring modes that determine how task bar colors are applied:

| Mode        | How It Works                                                                                                                         | Color Property   | Use When                                                        |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | --------------------------------------------------------------- |
| **Static**  | All progress-based coloring is disabled; you set every color manually via Item Script                                                | `task.color`     | You want complete control over every task bar color             |
| **Dynamic** | Progress-based colors (overdue, delayed, on-track, resolved) are applied automatically; you can override only the default blue color | `task.taskColor` | You want schedule-status awareness with selective customization |

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

## Option 1: Static Coloring

Disable all progress-based colors and assign colors entirely through Item Scripts.

Add to **Widget Properties > Advanced > Gantt Config Script**:

```javascript theme={null}
gantt.config.show_progress_colors = false;
```

Then add to **Widget Properties > Advanced > Item Script**:

```javascript theme={null}
if (wi.getType().getId() === "workpackage" && wi.getStatus().getId() === "draft") {
  task.color = "#bfbfbf";
}
```

In static mode, use `task.color` to set the task bar color. This property overrides all automatic coloring, giving you full control.

<Warning title="Milestones and Static Coloring">
  Milestone colors are hardcoded to yellow and red (for passed deadlines) unless static coloring is enabled. To apply custom colors to milestones, you must set `gantt.config.show_progress_colors = false` and then assign colors via `task.color` in the Item Script.
</Warning>

## Option 2: Dynamic Coloring

Keep progress-based status colors active while customizing specific aspects.

To change the default blue color for on-track items, add to **Widget Properties > Advanced > Item Script**:

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

In dynamic mode, use `task.taskColor` to change only the default (blue) color. Items that are overdue, delayed, or resolved retain their progress-based colors regardless of `task.taskColor`.

<Warning title="task.color vs. task.taskColor">
  Using `task.color` in dynamic mode overrides all progress-based coloring for that item. Use `task.taskColor` instead if you want to change only the default color while keeping overdue/delayed/resolved status colors active. Using `task.color` when progress colors are enabled effectively forces that item into static coloring.
</Warning>

## Customize Progress Color Defaults

Override the default progress colors at the project or server level. Add the following 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
nextedy.gantt.workitems.unplanned_color=#c7cffb
nextedy.gantt.workitems.unplanned_color_fg=#001379
```

Alternatively, set these per-widget in the **Gantt Config Script**:

```javascript theme={null}
gantt.config.progress_color_overdue = "red";
gantt.config.progress_color_progressdue = "orange";
gantt.config.progress_color_resolved = "gray";
```

<Tip title="HEX Color Format">
  Both named colors (red, green, gray) and HEX color codes (#bfbfbf, #0AA33A) are supported in all color properties. Use HEX codes for precise color matching across your project.
</Tip>

## Verify

You should now see that task bars display colors according to your chosen mode. In static mode, all bars use the colors assigned in the Item Script. In dynamic mode, overdue items appear in your configured overdue color, delayed items in the progress-due color, and on-track items in either the default blue or your custom `task.taskColor` value.

## See Also

* [Customize Progress-Related Coloring](/gantt/guides/visualization/progress-coloring)
* [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)
* [Configure Resource Allocation Marker Colors](/gantt/guides/visualization/resource-marker-colors)

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