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

# Create Markers with Scripts

> Add milestone markers to the Nextedy GANTT timeline using the Markers Script, from manual date markers to dynamically generated markers from Polarion plans and work items.

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

## Where to Add Marker Scripts

Open your Gantt widget parameters, expand the **Advanced** section, and locate the **Markers Script** field. All marker scripts go here. The script has access to `markerFactory`, `trackerService`, and `config` objects.

## Marker Factory API

The `markerFactory` object provides these methods:

| Method                                                      | Purpose                                                 |
| ----------------------------------------------------------- | ------------------------------------------------------- |
| `markerFactory.addMarker()`                                 | Create a new empty marker object                        |
| `markerFactory.addMarker(text, date)`                       | Create a marker with text and date string               |
| `markerFactory.addPlanMarkers(query, color)`                | Add markers from Polarion plans matching a Lucene query |
| `markerFactory.addWorkItemMarkers(query, dateField, color)` | Add markers from work items matching a Lucene query     |

The **marker object** returned by `addMarker()` has these setter methods:

| Method                    | Purpose                                         |
| ------------------------- | ----------------------------------------------- |
| `marker.setText(String)`  | Set the marker label                            |
| `marker.setTitle(String)` | Set the tooltip text                            |
| `marker.setDate(Date)`    | Set the date (java.util.Date)                   |
| `marker.setDate(String)`  | Set the date as string (`"2025-08-04"` format)  |
| `marker.setColor(String)` | Set the color (one of the 16 basic HTML colors) |

## Add a Manual Marker

Create a fixed marker at a specific date:

```javascript theme={null}
var marker = markerFactory.addMarker();
marker.setText("20.0");
marker.setDate("2025-08-04");
marker.setColor("green");
```

This adds a green vertical line labeled "20.0" at August 4, 2025.

## Add Markers from Plans

Automatically generate markers from Polarion plan boundaries (iterations, sprints):

```javascript theme={null}
markerFactory.addPlanMarkers(
    "template.id:iteration AND project.id:gantt2",
    "blue"
)
```

For the current project, use `config.getContextProjectId()` instead of a hardcoded project ID:

```javascript theme={null}
markerFactory.addPlanMarkers(
    "template.id:iteration AND project.id:" + config.getContextProjectId(),
    "blue"
)
```

## Add Markers from Work Items

Generate markers from work items of a specific type using a date field:

```javascript theme={null}
markerFactory.addWorkItemMarkers(
    "type:release AND project.id:" + config.getContextProjectId(),
    "publicLaunch",
    "blue"
)
```

The second parameter (`"publicLaunch"`) specifies which date field on the work item provides the marker date.

## Use Polarion API for Dynamic Markers

For full scripting control, use `trackerService` to query work items and create markers programmatically. This example loads Polarion project time points:

```javascript theme={null}
var timePoints = trackerService.getTrackerProject("GANTT")
    .getTimePoints().iterator();
while(timePoints.hasNext()){
    var tp = timePoints.next();
    var marker = markerFactory.addMarker();
    marker.setText(tp.getName());
    marker.setDate(tp.getTime().getDate());
    marker.setColor("fuchsia");
    var desc = tp.getDescription();
    if(desc != null){
        marker.setTitle(desc.getContent());
    }
}
```

<Warning title="Polarion 2304+ getter methods">
  On Polarion 2304 and later, use `tp.getName()` and `tp.getTime().getDate()` instead of `tp.name` and `tp.time.date`. See [Migrate Scripts for Polarion 2304+](/gantt/guides/scripting/script-migration-2304).
</Warning>

## Filter Markers with Page Parameters

Use page parameters to let users control which markers appear. This example reads a `milestone` page parameter and renders matching work items as markers:

```javascript theme={null}
var milestoneIds = config.pageParameters.milestone;
if(milestoneIds === null){
    milestoneIds = "";
} else {
    milestoneIds = milestoneIds.replaceAll(',', ' ');
}

var milestones = trackerService.queryWorkItems(
    "project.id:Gantt3 AND type:milestone AND id:(" + milestoneIds + ")",
    "id").iterator();

while(milestones.hasNext()){
    var tp = milestones.next();
    var marker = markerFactory.addMarker();
    marker.setText(tp.getTitle());
    marker.setDate(tp.getValue('releaseDate').getDate());
    marker.setColor("blue");
}
```

<Tip title="Marker positioning convention">
  Markers render at the end of the specified date. If you need a marker at the start of a day, subtract one day from the date value in your script.
</Tip>

## Marker Styling

Markers automatically receive CSS classes based on their source:

| Marker Type    | CSS Class                    | Default Appearance                  |
| -------------- | ---------------------------- | ----------------------------------- |
| Today marker   | `today`                      | Highlighted vertical line           |
| Plan markers   | `plan`                       | Styled as plan boundary lines       |
| Custom markers | `gantt_marker` + color class | Default styling with optional color |

Hovering over a marker displays a tooltip showing the marker name and due date.

## Handle Script Errors

If the Markers Script contains errors, the Gantt chart displays a warning indicator in the footer with the prefix **Markers Script Error:**. Check the browser console for details. See [Debug Script Errors](/gantt/guides/scripting/debug-scripts) for systematic debugging.

## Verify Your Changes

Save the page and reload the Gantt chart. You should now see vertical marker lines on the timeline at the specified dates, with labels and colors matching your script configuration. Hover over markers to confirm tooltip text displays correctly.

## See Also

* [Create and Configure Markers](/gantt/guides/visualization/markers) for marker visualization options
* [Write Page Scripts with Velocity](/gantt/guides/scripting/page-script) for server-side Velocity scripting
* [Configure Page Parameters](/gantt/guides/layout/page-parameters) for dynamic parameter-based filtering
* [Debug Script Errors](/gantt/guides/scripting/debug-scripts) for troubleshooting marker script issues

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