> ## 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.

# Zoom and Scale Levels Reference

> Nextedy GANTT provides eight zoom levels that control the timescale granularity of the Gantt chart.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## 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      |

<Tip title="Default Zoom Level">
  The default scale is `W` (Week). Users see a weekly timeline when first loading the Gantt chart without a saved preference.
</Tip>

## 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 |

<Info title="Verify in application">
  Hour-level zoom requires `Duration Precision` set to `High (Hours)` for accurate hour-level task display. See [Data Mapping Parameters](/gantt/reference/widget-parameters/data-mapping).
</Info>

### 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 |

## Timescale Header Structure

Each zoom level renders a two-row timescale header at the top of the Gantt chart:

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/Jklvz9qm2AdmIvBG/gantt/diagrams/reference/zoom-scale-levels/diagram-1.svg?fit=max&auto=format&n=Jklvz9qm2AdmIvBG&q=85&s=f620c0fdf941f355ff767559876ebb36" alt="diagram" style={{ maxWidth: "480px", width: "100%" }} width="480" height="110" data-path="gantt/diagrams/reference/zoom-scale-levels/diagram-1.svg" />
</Frame>

## 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](/gantt/reference/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

<Warning title="Resource View at Low Zoom">
  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.
</Warning>

## Custom Timescale Configuration

You can customize zoom level scales using the Gantt Config Script to render week numbers or other custom date formats:

```javascript theme={null}
// 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;
};
```

See [Gantt Config Script API](/gantt/reference/api/config-script-api) for the full scripting reference.

## Configuration Example

Set the default zoom level using the Gantt Config Script widget parameter:

```javascript theme={null}
// Set default zoom to Month view
gantt.ext.zoom.setLevel("M");
```

## Related Pages

* [Toolbar Actions and Keyboard Shortcuts](/gantt/reference/keyboard-shortcuts) -- zoom keyboard controls
* [Gantt Config Script API](/gantt/reference/api/config-script-api) -- custom timescale scripting
* [Resource View Parameters](/gantt/reference/widget-parameters/resource-view) -- resource view zoom behavior
* [Default Configuration Values](/gantt/reference/configuration/default-values) -- default zoom and column settings

<LastReviewed date="2026-07-02" />