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

# Show Deadlines and Due Dates

> This guide shows you how to enable deadline visualization in Nextedy GANTT so that work items with a due date display a deadline marker on the timeline, with overdue items highlighted in a configurabl

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

## Enable Deadlines

Navigate to **Widget Properties > Deadlines** and configure the following parameters:

| Parameter               | Description                                                             | Required                     |
| :---------------------- | :---------------------------------------------------------------------- | :--------------------------- |
| `ShowDeadlines`         | Enable deadline marker display on the Gantt chart                       | Yes (set to `true`)          |
| `Deadline Field`        | The Polarion work item field that holds the deadline date               | Yes                          |
| `Passed Deadline Color` | CSS color applied to items where the end date extends past the deadline | No (default styling applies) |

The `Deadline Field` and `Passed Deadline Color` parameters only appear after you set `ShowDeadlines` to `true`. This progressive disclosure keeps the parameter panel clean when deadlines are not in use.

Set `Deadline Field` to any date-type field on your work items, such as `dueDate` or a custom date field. The field must contain a date value for the deadline marker to appear.

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/Jklvz9qm2AdmIvBG/gantt/diagrams/guides/visualization/deadlines/diagram-1.svg?fit=max&auto=format&n=Jklvz9qm2AdmIvBG&q=85&s=780d2904e4b762610805d6068f5adebe" alt="diagram" style={{ maxWidth: "480px", width: "100%" }} width="480" height="130" data-path="gantt/diagrams/guides/visualization/deadlines/diagram-1.svg" />
</Frame>

## Understand Overdue Coloring

When `ShowDeadlines` is enabled, the Gantt compares each task's end date against its deadline field value. If the end date extends beyond the deadline, the task bar is styled with the `Passed Deadline Color` and receives an overdue visual indicator.

<Warning title="Deadline coloring compares end date to due date, not current date">
  The overdue color indicates that a task's scheduled end date extends past its deadline -- it does not compare against today's date. A task finishing on March 15 with a deadline of March 10 will appear overdue regardless of what today's date is. If you need current-date-relative coloring, use a custom [Item Script](/gantt/guides/scripting/item-script-basics) with date comparison logic.
</Warning>

## Add a Deadline Column to the Grid

You can display deadline dates in the grid panel by adding a column with the `deadline` template. Navigate to **Widget Properties > Table > Columns** and add a column with these settings:

| Parameter | Value                                    |
| :-------- | :--------------------------------------- |
| `field`   | Your deadline field ID (e.g., `dueDate`) |
| `render`  | `deadline`                               |

The deadline column template displays dates in a compact format (e.g., "Sep-09", "Nov-30"). When the task is overdue, the date text turns red to provide a clear visual cue in the grid.

<Tip title="Deadline column is read-only">
  The deadline column in the grid does not support inline editing. To update a work item's deadline date, edit the field through the lightbox or directly in Polarion.
</Tip>

## Configure the Passed Deadline Color

Set `Passed Deadline Color` to any valid CSS color value. Common choices include:

* Named colors: `red`, `orange`, `darkred`
* Hex codes: `#e53935`, `#ff5722`

Leave this parameter empty to use the default overdue styling.

## Verification

You should now see deadline markers on the Gantt timeline for work items that have a value in the configured deadline field. Items whose end date extends past the deadline should appear in the configured color. If you added a deadline column, verify that overdue dates display in red text.

## See also

* [Configure Grid Columns](/gantt/guides/visualization/columns)
* [Configure Item Colors](/gantt/guides/visualization/configure-colors)
* [Write Item Scripts](/gantt/guides/scripting/item-script-basics)
* [Create and Configure Markers](/gantt/guides/visualization/markers)
* [Set Up a Basic Gantt Chart](/gantt/getting-started/setup-basic-gantt)

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