Zoom Level Summary
| Code | Label | Timescale Header | Description |
|---|
H | Hours | Day over hours | Finest zoom level showing individual hours |
DD | 2-Day | Week over 2-day groups | Intermediate day-level detail |
D | Day | Week over days | Individual day columns |
W | Week | Month over weeks | Default zoom level |
M | Month | Year over months | Monthly planning view |
Q | Quarter | Year over quarters | Quarterly roadmap view |
Y | Year | Multi-year over years | Annual planning view |
YY | 2-Year | Multi-year over 2-year groups | Coarsest zoom for long-range roadmaps |
The default scale is W (Week). Users see a weekly timeline when first loading the Gantt chart without a saved preference.
Zoom Level Details
Hour-Level Zoom (H)
| Property | Value |
|---|
| Code | H |
| Upper header row | Day |
| Lower header row | Hour |
| Use case | Hour-precision scheduling with high-precision mode enabled |
Hour-level zoom requires Duration Precision set to High (Hours) for accurate hour-level task display. See Data Mapping Parameters. Day-Level Zoom (D and DD)
| Property | D | DD |
|---|
| Code | D | DD |
| Upper header row | Week | Week |
| Lower header row | Day | 2-Day |
| Use case | Daily task tracking | Day-level overview |
Week-Level Zoom (W)
| Property | Value |
|---|
| Code | W |
| Upper header row | Month |
| Lower header row | Week |
| Use case | Sprint and release planning views |
Month, Quarter, and Year Zoom (M, Q, Y, YY)
| Property | M | Q | Y | YY |
|---|
| Code | M | Q | Y | YY |
| Upper header row | Year | Year | Multi-year | Multi-year |
| Lower header row | Month | Quarter | Year | 2-Year |
| Use case | Release planning | Quarterly roadmap | Annual roadmap | Executive overview |
Accessing Zoom Controls
You can change the zoom level using any of the following methods:
| Method | Location | Description |
|---|
| Toolbar zoom buttons | Gantt toolbar | Zoom in (+) and zoom out (-) buttons |
| Set scale submenu | Hamburger menu | Radio-button list of all available scales (Hour, Day, Week, Month, Quarter, Year) |
| Timeline right-click | Time scale header | Context menu with scale selection and Go to today |
| Keyboard shortcut | Gantt chart | See Toolbar Actions and Keyboard Shortcuts |
Zoom Level Persistence
The current zoom level is automatically saved to browser local storage and restored on the next page load. This persistence is scoped per document URL and widget instance.
| Behavior | Description |
|---|
| Save trigger | Zoom level is saved each time you change the scale |
| Restore trigger | Zoom is restored from local storage during Gantt initialization |
| Reset | Use the Reset view action to clear saved zoom and column preferences |
| Scope | Per-user, per-document URL, per-widget instance |
Zoom and Resource View Interaction
When the resource view is enabled, zoom level changes affect resource marker aggregation:
- Zooming out aggregates daily/weekly resource allocation values into larger time buckets
- Red overallocation flags may appear or disappear depending on how time cells aggregate at different zoom levels
- Resource load thresholds are evaluated per-cell, so wider cells at lower zoom levels accumulate more work items
At coarse zoom levels (Month, Quarter, Year), resource allocation cells cover longer time periods. Overallocation flags may trigger more frequently because each cell aggregates more work items. Set your threshold based on your typical zoom level.
Custom Timescale Configuration
You can customize zoom level scales using the Gantt Config Script to render week numbers or other custom date formats:
// Example: Show calendar week numbers (CW format) in the Week zoom level
gantt.config.zoomConfig.levels[3].scales[1].format = function(date) {
var weekNum = gantt.date.getISOWeek(date);
return "CW" + weekNum;
};
Configuration Example
Set the default zoom level using the Gantt Config Script widget parameter:
// Set default zoom to Month view
gantt.ext.zoom.setLevel("M");
Related Pages
