Apply Custom CSS to the Gantt Widget

How CSS Styling Works

The Gantt chart renders inside an iframe embedded in your Polarion wiki page. CSS styles defined in a Script block widget on the same page are automatically copied into the Gantt iframe, allowing you to override default styling for task bars, text, grid columns, and other visual elements.

Add a Script Block Widget

Open your Gantt wiki page in edit mode
Add a Script - block widget to the page (from the Widgets panel)
Place it anywhere on the page (it does not need to be adjacent to the Gantt widget)

Add CSS Styles

Insert your CSS inside a <style> tag within the script block. Common customizations are listed below.

Change Right-Side Text Appearance

Adjust the color, size, and position of text displayed to the right of task bars:

<style>
.gantt_side_content.gantt_right {
    bottom: 0px;
    top: -5px;
}

.gantt_task_line .gantt_side_content {
    color: green;
    font-size: 10px;
}
</style>

Positioning: Modify top and bottom values to adjust vertical alignment
Appearance: Customize color and font-size to match your style

Change Font Color of Task Labels

<style>
.gantt_task_line .gantt_task_content {
    color: #333333;
}
</style>

Style Completed Items with Strikethrough

Use an item script to add a CSS class to completed items, then target that class:

<style>
.gantt_task_line.completed-task .gantt_task_content {
    text-decoration: line-through;
}
</style>

For dynamic styling based on work item properties (e.g., status, priority), use an item script to set a CSS class on the task, then target that class in your CSS. See Write Item Scripts for details.

Adjust Row and Task Heights

Row and task heights are controlled via the Gantt Config Script (not CSS). Navigate to the widget parameters, open Advanced > Gantt Config Script, and add:

gantt.config.task_height = 20;
gantt.config.row_height = 22;

Property	Description	Recommendation
`task_height`	Height of the task bar in pixels	Set slightly smaller than `row_height`
`row_height`	Height of each row in the grid and chart	Minimum 2px more than `task_height`

If task_height is equal to or greater than row_height, task bars may overlap or render incorrectly.

Common CSS Targets

CSS Selector	Element	Use Case
`.gantt_task_line`	Task bar container	Background color, borders
`.gantt_task_content`	Text inside task bar	Font size, color, alignment
`.gantt_side_content`	Text beside task bar	Right-side labels
`.gantt_tree_content`	Grid cell text	Grid column font styling
`.gantt_task_progress`	Progress fill inside bar	Progress bar color

Custom CSS relies on internal CSS class names that may change between Gantt versions. Test your custom styles after each upgrade and adjust selectors as needed.

Verification

You should now see:

The Gantt chart renders with your custom styles applied
Text colors, font sizes, and positioning match your CSS definitions
Row and task heights reflect your Gantt Config Script settings

​How CSS Styling Works

​Change Right-Side Text Appearance

​Change Font Color of Task Labels

​Style Completed Items with Strikethrough

​Common CSS Targets

​Verification

​See Also

How CSS Styling Works

Change Right-Side Text Appearance

Change Font Color of Task Labels

Style Completed Items with Strikethrough

Common CSS Targets

Verification

See Also