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

# Color and Styling Properties

> Nextedy GANTT uses a color system that supports both static (server-defined) and dynamic (progress-based) task bar coloring.

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

## Static vs. Dynamic Coloring

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

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/umKaPvHwUHw-ZQFM/gantt/diagrams/reference/configuration/color-properties/diagram-1.svg?fit=max&auto=format&n=umKaPvHwUHw-ZQFM&q=85&s=1cfa3944c3ba0818cc08789983741d88" alt="diagram" style={{ maxWidth: "560px", width: "100%" }} width="560" height="400" data-path="gantt/diagrams/reference/configuration/color-properties/diagram-1.svg" />
</Frame>

**Dynamic coloring** (default): Task bars display progress-based colors (overdue, progress-due, resolved) that override the default color. Use `task.taskColor` in the Item Script to change the base color while keeping progress color overrides active.

**Static coloring**: Set `gantt.config.show_progress_colors=false` in the Gantt Config Script to disable progress-based color overrides. Use `task.color` in the Item Script to set the final task bar color directly.

<Warning title="task.color vs. task.taskColor">
  In dynamic mode, `task.taskColor` changes only the default (blue) base color -- progress-related colors still override it for overdue or resolved tasks. In static mode, `task.color` sets the absolute color with no overrides. Mixing them incorrectly produces unexpected results.
</Warning>

## Progress Color Properties

These administration properties control the colors applied to task bars based on their scheduling status when dynamic coloring is active:

| Name                                               | Type   | Default  | Description                                                                                      |
| -------------------------------------------------- | ------ | -------- | ------------------------------------------------------------------------------------------------ |
| `nextedy.gantt.default.progress_color_overdue`     | String | `red`    | Color applied to task bars where the end date is in the past (task is overdue).                  |
| `nextedy.gantt.default.progress_color_progressdue` | String | `orange` | Color applied to task bars where the progress date is in the past (progress is behind schedule). |
| `nextedy.gantt.default.progress_color_resolved`    | String | `gray`   | Color applied to task bars that are in a resolved status.                                        |

Set these properties in **Administration > Configuration Properties** to apply globally:

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

Alternatively, set them per Gantt instance in the **Gantt Config Script**:

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

## Unplanned Item Colors

| Name                                         | Type   | Default         | Description                                                           |
| -------------------------------------------- | ------ | --------------- | --------------------------------------------------------------------- |
| `nextedy.gantt.workitems.unplanned_color`    | String | `#7D3C98`       | Background color of unplanned task bars (items without a start date). |
| `nextedy.gantt.workitems.unplanned_color_fg` | String | See application | Foreground (text) color of unplanned task bars.                       |

## Today Marker Color

| Name                        | Type   | Default | Description                                                   |
| --------------------------- | ------ | ------- | ------------------------------------------------------------- |
| `nextedy.gantt.today.color` | String | `gray`  | Color of the vertical "today" marker line on the Gantt chart. |

## Resource Marker Colors

The resource view uses color-coded markers to indicate resource allocation levels. The `resourceMarkersColorConfig` object defines the color scheme:

| Property      | Type             | Default             | Description                                                                                      |
| ------------- | ---------------- | ------------------- | ------------------------------------------------------------------------------------------------ |
| `ok` color    | String           | `#4CAF50` (green)   | Color for resource markers within capacity. Applied via the `marker_ok` CSS class.               |
| `over` color  | String           | Red/orange gradient | Color for resource markers that exceed capacity. Applied via the `marker_over` CSS class.        |
| `percentages` | Array of numbers | See application     | Ascending threshold values defining breakpoints for marker color changes.                        |
| `colors`      | Array of strings | See application     | Color values for each allocation level. Must be one element longer than the `percentages` array. |

<Warning title="Array Length Constraint">
  The `colors` array must have exactly one more element than the `percentages` array. The `percentages` array must contain numeric values in ascending order. Invalid configurations produce error messages in both view mode and the wiki editor.
</Warning>

## Marker CSS Classes

The Gantt applies CSS classes to timeline markers based on their type:

| CSS Class     | Applied To       | Description                                             |
| ------------- | ---------------- | ------------------------------------------------------- |
| `today`       | Today marker     | The vertical line marking today's date on the timeline. |
| `plan`        | Plan markers     | Markers synced from plan (iteration) boundaries.        |
| `marker_ok`   | Resource markers | Resource allocation cells within capacity.              |
| `marker_over` | Resource markers | Resource allocation cells exceeding capacity.           |

Custom markers defined without a specific color class receive the base marker styling. You can assign a named CSS color class (e.g., `blue`) to custom markers to override the default appearance.

## Disabling Dynamic Coloring

To use purely static colors without progress-based overrides, add the following to the **Gantt Config Script**:

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

Then use `task.color` in the **Item Script** to set colors based on your custom logic:

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

## CSS-Based Styling

You can apply custom CSS styles to Gantt elements through the **Parameters Script** section. For example, to change the font color of task labels:

```css theme={null}
<style>
.gantt_task_content {
    color: #333333;
}
</style>
```

<Info title="Verify in application">
  CSS class names and DOM structure may vary between Gantt versions. Verify the available CSS classes in your specific version. See [CSS Classes and DOM Structure](/gantt/reference/css-classes) for a reference.
</Info>

## Configuration Example

To set up custom progress colors and disable dynamic coloring for a specific Gantt:

1. In **Administration > Configuration Properties**, add:
   ```
   nextedy.gantt.default.progress_color_overdue=#e53935
   nextedy.gantt.default.progress_color_resolved=#43a047
   nextedy.gantt.workitems.unplanned_color=#c7cffb
   nextedy.gantt.workitems.unplanned_color_fg=#001379
   ```

2. For a specific Gantt page that needs static coloring, add to the **Gantt Config Script**:
   ```javascript theme={null}
   gantt.config.show_progress_colors = false;
   ```

3. In the **Item Script**, define the color logic:
   ```javascript theme={null}
   if (wi.getType().getId() === "feature") {
       task.color = "#42a5f5";
   }
   ```

## Related Pages

* [General Administration Properties](/gantt/reference/configuration/general-properties) -- core behavior and scheduling properties
* [Item Script API](/gantt/reference/api/item-script-api) -- `task.color` and `task.taskColor` scripting reference
* [Gantt Config Script API](/gantt/reference/api/config-script-api) -- `gantt.config.show_progress_colors` and color overrides
* [Item Color Legend](/gantt/reference/item-color-legend) -- visual reference for default color meanings
* [Resource View Parameters](/gantt/reference/widget-parameters/resource-view) -- resource marker configuration
* [CSS Classes and DOM Structure](/gantt/reference/css-classes) -- Gantt CSS class reference

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