> ## 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.
# Customize Progress Bars
> Configure how Nextedy PLANNINGBOARD displays progress bars in Plan columns and swimlane cells so your team can read capacity and work-item status at a glance.
## What progress bars show
Planningboard renders two levels of progress bar when capacity load visualization is enabled:
* **Column header bars** — appear in the calendar header above each Plan column and aggregate all work items in that time period across every swimlane.
* **Cell bars** — appear inside individual Planningboard cells and show progress for a specific swimlane–Plan intersection.
Each bar is divided into up to four colored segments, one per status category:
| Segment color | Status category |
| ------------- | ------------------------------- |
| Green | Done |
| Blue | Todo |
| Red | Invalid |
| Orange | Rejected |
| Gray | Mixed / multiple other statuses |
Each segment displays a numeric count label showing exactly how many work items belong to that category. When all status counts are zero, Planningboard automatically falls back to the default four-segment bar to prevent an empty or confusing visualization.
Hovering over a progress bar shows a tooltip with the full status breakdown — this is useful when segments are too narrow to read the count labels clearly.
***
Progress bars are only rendered when capacity load is turned on for the widget. Open the widget parameters for your Planningboard and set `capacityLoad` to `true`:
```properties theme={null}
capacityLoad = true
```
**Default value:** `false`
Save the widget and reload the page. Column header bars will now appear above each Plan column.
If your Plans use mixed calculation types (for example, some using remaining estimate and others using time-spent), the totals shown in progress bars will be incorrect. This is a non-obvious requirement — configure all Plans in the project to use the same calculation type before enabling capacity load visualization. See [Configure Capacity Tracking](/planningboard/guides/configuration/capacity-configuration) for details.
***
Planningboard supports three capacity modes that affect how progress bars are calculated and where they appear.
### Single (column-level) capacity
The default when `capacityLoad = true`. A single progress bar appears in each Plan column header. All swimlane cells share the same column total.
```properties theme={null}
capacityLoad = true
multiCapacityLoad = false
userCapacityLoad = false
```
### Per-resource (cell-level) capacity
Set `multiCapacityLoad = true` to render a separate progress bar inside each swimlane cell. Each cell shows its own capacity progress independently of other cells in the same column.
```properties theme={null}
capacityLoad = true
multiCapacityLoad = true
```
Use this mode when different swimlanes (for example, different assignees or teams) have different capacity allocations and you want per-cell visibility.
### User capacity
Set `userCapacityLoad = true` together with Teams Service integration to load per-user capacity values from the Teams Service:
```properties theme={null}
capacityLoad = true
userCapacityLoad = true
useTeamsService = true
```
The `useTeamsService = true` property unlocks per-swimlane capacity visualization when combined with `userCapacityLoad`. Without it, individual user capacity data is not available to the board. See [Set Up Teams Service](/planningboard/guides/capacity/teams-service-setup) for the Teams Service prerequisite setup.
***
Tell the board which work-item field holds the effort value used to calculate how full each progress bar segment is:
```properties theme={null}
capacityField = storyPoints
```
Replace `storyPoints` with your project's field ID (for example, `estimate`, `timeSpent`, or a custom field ID). If `capacityField` is not set, Planningboard uses the default effort field.
Also confirm the number of working hours per day used in capacity math:
```properties theme={null}
hoursPerDay = 8
```
**Default:** `8`
***
After saving all widget parameters, reload the board. You should now see:
* Colored progress bars appearing in the calendar header above each Plan column.
* Numeric labels inside each segment showing the item count for that status category.
* (If `multiCapacityLoad = true`) Individual progress bars inside each swimlane–Plan cell.
* A detailed status breakdown tooltip when hovering over any bar.
If bars appear but all segments are gray, check that your work items have recognized status values that map to the Done / Todo / Invalid / Rejected categories. If all segments read zero and the bar reverts to the default four-segment display, there are no work items in the queried Plans — verify your Plan query and work-item query parameters.
***
## Configuration example
The following widget parameter block shows a complete capacity-enabled configuration for a team board where each assignee swimlane needs its own capacity bar:
```properties theme={null}
capacityLoad = true
multiCapacityLoad = true
userCapacityLoad = false
capacityField = storyPoints
hoursPerDay = 8
useTeamsService = false
```
For a Teams Service-integrated board with per-user capacity:
```properties theme={null}
capacityLoad = true
multiCapacityLoad = false
userCapacityLoad = true
useTeamsService = true
capacityField = estimate
hoursPerDay = 8
```
Capacity configuration parameters are whitespace-sensitive. Do not add leading or trailing spaces around the `=` sign or the values. A value like `capacityLoad = true ` (trailing space) may not be parsed correctly and will silently produce no progress bars.
***
## Known limitations
* Progress bar coloring is based on work-item **workflow status categories** only. Custom enumeration fields cannot be used to color-code progress bar segments. This is a current product limitation — users migrating from Nextedy SCRUMBOARD should be aware that SCRUMBOARD's custom-enum coloring is not available in Planningboard.
* Multi-assignee work items and sub-item effort distribution are not reflected in capacity bars. Each work item's effort is counted once under its primary assignee. See [Capacity Calculation Issues](/planningboard/guides/troubleshooting/capacity-issues) if totals look unexpected.
* The `PARENT` swimlane assignment mode does not support `planCellsMode`; cell-level bars are not available in that configuration.
***
## See also
* [Configure Capacity Tracking](/planningboard/guides/configuration/capacity-configuration)
* [Visualize Capacity Load](/planningboard/guides/capacity/capacity-visualization)
* [Track Team Capacity](/planningboard/guides/capacity/team-capacity)
* [Set Up Teams Service](/planningboard/guides/capacity/teams-service-setup)
* [Customize Capacity Indicators](/planningboard/guides/customization/capacity-indicators)
* [Widget Parameters Overview](/planningboard/guides/configuration/widget-parameters)
* [Capacity Calculation Issues](/planningboard/guides/troubleshooting/capacity-issues)
**KB Articles**
* Planningboard: Customizable Statistics and Capacity Indicators
* Planningboard interface & basic interactions
* Customize the content of the card
**Support Tickets**
* [#6612](https://support.nextedy.com/helpdesk/tickets/6612)
* [#6496](https://support.nextedy.com/helpdesk/tickets/6496)
* [#6679](https://support.nextedy.com/helpdesk/tickets/6679)
**Source Code**
* `customProgressBar.cy.ts`
* `customProgressTooltip.cy.ts`
* `viewLicense.vm`
* `PlanningBoardWidgetRenderer.java`
* `planningboard.js`