Skip to main content

​
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. diagram

​
Step 1: Add a Script Block Widget

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

​
Step 2: 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.

​
Step 3: 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;
PropertyDescriptionRecommendation
task_heightHeight of the task bar in pixelsSet slightly smaller than row_height
row_heightHeight of each row in the grid and chartMinimum 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 SelectorElementUse Case
.gantt_task_lineTask bar containerBackground color, borders
.gantt_task_contentText inside task barFont size, color, alignment
.gantt_side_contentText beside task barRight-side labels
.gantt_tree_contentGrid cell textGrid column font styling
.gantt_task_progressProgress fill inside barProgress 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

​
See Also

KB ArticlesSupport TicketsSource Code
  • prod-gantt-src/com.nextedy.polarion.gantt.client/src/js/components/components.js
  • prod-gantt-src/com.nextedy.polarion.gantt.client/src/js/generic/polarion.js
  • prod-gantt-src/com.nextedy.polarion.gantt.client/src/js/generic/constants.js
  • prod-gantt-src/com.nextedy.polarion.gantt.client/cypress/e2e/GanttFilterByResourceMarker.cy.ts
  • prod-gantt-src/com.nextedy.polarion.gantt.client/src/js/config.js