Skip to main content

Access the Markers Script

Markers are defined in the Markers Script, located under Widget Properties > Advanced > Markers Script. This server-side script runs each time the Gantt loads and produces the set of marker lines displayed on the timeline. The script has access to the markerFactory object, which provides methods for creating markers manually and from Polarion data.

Add a Marker Manually

To create a single marker at a specific date, use the markerFactory.addMarker() method:
var marker = markerFactory.addMarker();
marker.setText("20.0");
marker.setDate("2025-08-04");
marker.setColor("green");
This creates a green vertical line labeled “20.0” on August 4, 2025. The marker object provides these methods:
MethodDescription
setText(String text)Set the marker label displayed on the timeline
setTitle(String tooltip)Set the tooltip text shown on hover
setDate(String dateStr)Set the marker date (format: "YYYY-MM-DD")
setDate(java.util.Date date)Set the marker date from a Java Date object
setColor(String color)Set the marker color (one of the 16 basic HTML color names)
Markers render at the end of the specified date. If you set a marker to “2025-08-04”, the vertical line appears at the end of August 4th. To position a marker at the start of a date, subtract one day from the date value in your script.

Add Markers from Plans

Use addPlanMarkers to automatically create markers from Polarion Plan items matching a Lucene query:
markerFactory.addPlanMarkers("template.id:iteration AND project.id:gantt2", "blue")
This creates a blue marker for each iteration plan in the project “gantt2”. The marker date is taken from the plan’s date range.

Add Markers from Work Items

Use addWorkItemMarkers to create markers from work items, specifying which date field to use:
markerFactory.addWorkItemMarkers("type:release AND project.id:gantt2", "start", "red")
ParameterDescription
First argumentLucene query filtering which work items to include
Second argumentThe date field to read the marker date from (e.g., "start", "publicLaunch")
Third argumentMarker color
To reference the current project dynamically instead of hard-coding the project ID:
markerFactory.addWorkItemMarkers(
    "type:release AND project.id:" + config.getContextProjectId(),
    "publicLaunch",
    "blue"
)
When marking version releases, point the date field parameter to a custom field like publicLaunch rather than the task’s scheduling dates. This lets you track external release dates independently from the work item’s planned schedule.

Use the Polarion API for Dynamic Markers

For full scripting control, use the trackerService API to query Polarion data and build markers dynamically. This approach supports conditional logic, custom tooltips, and color-coding based on field values. Example: Load Time Points as markers:
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());
    }
}
Example: Dynamic markers from page parameters:
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");
}
This reads a comma-separated list of work item IDs from the milestone page parameter, queries them, and renders each as a marker. Changing the page parameter updates which markers appear without editing the script.

Marker CSS Classes

Markers receive CSS classes based on their type, which you can use for custom styling:
CSS ClassApplied To
todayThe automatic today-date marker
planMarkers created from Plan items via addPlanMarkers
gantt_markerAll custom markers (base class)
If the Markers Script contains a syntax or runtime error, the Gantt displays a warning indicator with the message prefix “Markers Script Error:”. This warning is visible to all users viewing the page, not just to page editors. Test your scripts thoroughly before deploying.

Marker Tooltips

Hovering over a marker line displays a tooltip showing the marker name and date. Set the tooltip content using marker.setTitle() for custom tooltip text, or let the Gantt generate a default tooltip from the marker text and date.

Verification

You should now see vertical marker lines on the Gantt timeline at the configured dates. Hover over each marker to verify the tooltip displays the expected name and date. If markers do not appear, check the Markers Script for errors using the warning indicator in the Gantt toolbar area.

See also

KB ArticlesSupport TicketsSource Code
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/ganttCheckWarningInfo.cy.ts
  • prod-gantt-src/com.nextedy.polarion.gantt.client/src/js/tooltips.js
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/Aresource-view/ganttMarkersColorConfigValidation.cy.ts
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/milestones/marker-colors.cy.ts
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/view/markersStyles.cy.ts