# Gantt

> Part of the NocoDB documentation (Product docs > Tables > Views > View Types). Index of all pages: https://nocodb.com/llms.txt. Any docs page is available as Markdown by adding `.md` to its URL.

URL: https://nocodb.com/docs/product/tables/views/view-types/gantt
Last updated: 2026-10-03

Use the Gantt view in NocoDB to plan records as bars on a timeline with dependencies and milestones.

Use the Gantt view to plan sprints, track roadmaps and manage dependencies, all from the table you already use. The Gantt view turns a date-based table into a live project schedule. Records are bars on a timeline that you can drag. Dependencies are arrows between the bars. Key dates are milestone diamonds.

Drag a bar to reschedule it. Resize a bar to make it longer. Drag from the handle of a bar to link tasks. Zoom from a one-week sprint to a five-year roadmap in the same view.

This section gives all the operations for the Gantt view.

<img alt="Gantt View Overview" src={__img0} placeholder="blur" />

<AskNocoAI>
  <Prompt>
    Create a gantt view of this table using [Start Date] and [End Date]
  </Prompt>

  <Prompt>
    Create a gantt view of [Tasks] for the [Website Redesign] project
  </Prompt>

  <Prompt>
    Add [Start Date] and [End Date] fields and create a gantt view
  </Prompt>
</AskNocoAI>

## Gantt View Actions

1. [Create a New Gantt View](/docs/product/tables/views/create-view#create-new-view)
2. [Rename an Existing Gantt View](/docs/product/tables/views/actions-on-view#rename-view)
3. [Duplicate a Gantt View](/docs/product/tables/views/actions-on-view#duplicate-view)
4. [Remove a Gantt View](/docs/product/tables/views/actions-on-view#delete-view)
5. [Share a Gantt View](/docs/product/tables/views/share-view)
6. [Lock Gantt View for Edits](/docs/product/tables/views#view-permission-types)

## Configure Gantt Schedule

The Gantt view draws bars and arrows from a **Date Dependencies** rule. Each view has its own rule. When you open a Gantt view for the first time, the **Configure Gantt Schedule** dialog opens automatically. Select the fields for the chart in this dialog.

<img alt="Configure Gantt Schedule dialog" src={__img1} placeholder="blur" />

The dialog has these fields:

| Field            | Required | Purpose                                                                                                                                                                                                                     |
| ---------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Start Date       | Yes      | The Date field for the start of the bar of each record.                                                                                                                                                                     |
| End Date         | Yes      | The Date field for the end of the bar of each record. Records without a start show as milestones at this date.                                                                                                              |
| Duration         | Optional | Number or Duration field. When you set it, date changes update this field, and duration changes move the End Date.                                                                                                          |
| Successor Link   | Optional | Self-referencing Links field that points each record to the tasks scheduled **after** it. It controls the dependency arrows on the chart. It must be Has-Many, One-to-Many, or One-to-One and point back to the same table. |
| Include weekends | Toggle   | When off, all date calculations skip weekends (Sat/Sun). It has an effect only when you set Duration, Scheduling Mode, or Buffer Days. Until then, the toggle is disabled.                                                  |

When you select a Successor Link, a **Propagation** section shows (PostgreSQL and MySQL bases only). Use it to set how date changes cascade across linked records:

| Setting             | Values                                                                       |
| ------------------- | ---------------------------------------------------------------------------- |
| **Connection Type** | `End-to-Start` (default), `End-to-End`, `Start-to-Start`, or `Start-to-End`. |
| **Scheduling Mode** | `Off` (no cascade), `Flexible`, or `Fixed`.                                  |
| **Buffer Days**     | Number of days between a predecessor and its successor when cascading.       |

<Callout type="info">
  The Gantt rule is 

  **per-view**

  : two Gantt views on the same table can pick different Start, End, and Successor Link fields. The table-level 

  [Date Dependencies](/docs/product/tables/records/date-dependency)

   rule, if any, continues to drive cascades on Grid edits independently.
</Callout>

To open the dialog again later, click **Configure** in the toolbar.

<img alt="Configure button in toolbar" src={__img2} placeholder="blur" />

### Empty state

If the rule is not set, or its Start / End Date fields are deleted, the Gantt view shows an empty state. The empty state has a **Configure Date Dependencies** button. This button opens the same dialog.

<img alt="Empty state" src={__img3} placeholder="blur" />

## Zoom Levels

The Gantt view has eight zoom levels, from a one-week sprint view to a five-year roadmap. To change the zoom level, use the zoom selector in the toolbar.

<img alt="Zoom Selector" src={__img4} placeholder="blur" />

| Zoom     | Span shown                         | Best for                                    |
| -------- | ---------------------------------- | ------------------------------------------- |
| Week     | Seven days (Monday through Sunday) | Weekly planning, sprint views               |
| 2 Weeks  | Two weeks                          | Fortnightly sprints, short-cycle scheduling |
| Month    | One calendar month                 | Monthly overview                            |
| Quarter  | Three months                       | Quarter planning                            |
| 6 Months | Six months                         | Half-year roadmaps                          |
| Year     | Twelve months                      | Annual planning                             |
| 2 Years  | Two years                          | Multi-year projects                         |
| 5 Years  | Five years                         | Long-range portfolio views                  |

At wider zoom levels, the date header shows multiple tiers, for example year over quarter over month. This helps you find your position when you see a longer span.

<img alt="Year Zoom" src={__img5} placeholder="blur" />

<Callout type="info">
  Gantt View does not offer a single-day zoom. Dependency arrows and milestones need at least a one-week horizon to read clearly.
</Callout>

## Navigation

### Time Navigation

* To move backward or forward by one step of the active zoom level, use the **Previous** and **Next** buttons in the toolbar.
* To go to the current date, click the **Today** button.
* To go directly to a specific date, use the **Date Picker** dropdown.

<img alt="Gantt Navigation" src={__img6} placeholder="blur" />

### Scrolling

* **Horizontal scrolling** moves across time. Records load as you scroll. You can look through months or years and do not have to go to a specific date.
* **Vertical scrolling** is available when there are more records than the visible height. In grouped layout, each group scrolls in the groups list. The date header stays fixed at the top.

### Record Navigation

When a record bar goes past the visible area, navigation arrows show on the bar:

| Arrow           | Shows when                                                        |
| --------------- | ----------------------------------------------------------------- |
| **left arrow**  | The start date of the record is clipped (off-screen to the left). |
| **right arrow** | The end date of the record is clipped (off-screen to the right).  |

Click an arrow to go to the related date.

<img alt="Off-screen record navigation arrows" src={__img7} placeholder="blur" />

When you click a record in the left sidebar and its bar is fully off-screen, the date axis moves to the bar. If a part of the bar is visible, the timeline does not move. This way, vertical scrolling does not change your horizontal position.

## Record List Sidebar

The left sidebar lists all records in the view. The sidebar is **collapsible** (click the chevron at the top of the sidebar) and **resizable** (drag its right edge). NocoDB keeps the width and the collapsed state across sessions.

<img alt="Sidebar collapse and resize" src={__img8} placeholder="blur" />

When you collapse the sidebar, it becomes a narrow "Show Sidebar" stub. The chart can then use the full width.

<img alt="Collapsed sidebar" src={__img9} placeholder="blur" />

To open the [Record Inspector](#record-inspector) for a record, click the record in the sidebar.

## Bars and Milestones

### Task bars

A record with a start date and an end date shows as a horizontal bar from start to end. Hover over a bar to see a tooltip with the record title, date range and duration.

<img alt="Task bar tooltip" src={__img10} placeholder="blur" />

### Milestones

A record with **only an end date** (start date empty) shows as a diamond in the end-date column. A milestone:

* Shows in the sidebar. A small diamond marker on the right edge of the row identifies it, also when the bar is off-screen.
* Can be a predecessor or a successor in a dependency chain.
* Can move to a different date when you drag it, the same as a bar.

Each milestone also has a light dashed vertical guide line from the date header down to the milestone diamond. This line is like the "today" line. It lets you quickly read the date of the milestone on the header.

<img alt="Milestones" src={__img11} placeholder="blur" />

In the example below, the selected `Design Sign-off` milestone shows its dashed guide line up to the date header. The record inspector shows that it is a milestone with only an end date:

<img alt="Milestone guide line" src={__img12} placeholder="blur" />

## Edit Record Dates

**Drag to Move**
Click and hold a bar for a moment. Then drag it to a new date. The start and end dates move by the same number of days, so the duration stays the same. To change the end date of a milestone, drag the milestone.

**Drag to Resize**
Hover over the left or right edge of a bar. A resize handle shows.

* To change the start date, drag the **left edge**.
* To change the end date, drag the **right edge**.

<img alt="Drag to move and resize" src={__img13} placeholder="blur" />

<Callout type="info">
  Drag-to-move and resize operations support undo / redo.
</Callout>

## Dependencies

When you set a Successor Link field, the Gantt view draws arrows from each record to the tasks that it points to (its successors).

### Create a dependency

1. Hover over a bar. A small circular **dependency handle** shows at the bottom-right corner (bottom tip for milestones).
2. Drag from the handle onto another bar. While you drag, the cursor draws an L-shaped preview. When you release, NocoDB creates the link.

<img alt="Drag to create dependency" src={__img14} placeholder="blur" />

### Highlight the chain

When you hover over a bar or milestone, its **entire connected dependency chain** gets a green outline, upstream and downstream. When the inspector is open, the chain of the inspected record stays highlighted. This keeps your context while you scroll.

<img alt="Chain highlight" src={__img15} placeholder="blur" />

### Remove a dependency

Click the dependency arrow to select it. Then press <kbd>Delete</kbd>. Or, remove the link from the [Record Inspector](#record-inspector).

## Record Inspector

When you click a bar, milestone or sidebar row, the **Record Inspector** opens in a panel on the right. While you look at one record in the inspector, you can continue to move and zoom the chart.

<img alt="Record Inspector" src={__img16} placeholder="blur" />

The inspector shows:

* A **Record** or **Milestone** badge and the date range.
* The **primary field** (record title), editable inline.
* **Start Date**, **End Date**, and **Days** (computed) fields. Click a date to open a picker.
* **Predecessors** section: all records that point to this record. To add a record, click `+ Link record`. To remove a record, click the `×` next to its chip.
* **Successors** section: all records that this record points to. It has the same link / unlink controls.

In the inspector, Formula fields with a URL output show as clickable links.

To open the full expanded record form for the same record, click the **Expand** icon in the inspector header. Press <kbd>Esc</kbd> to close an open picker first, then the inspector.

A second click on the **same** bar (the bar that the inspector shows) opens the full expanded form directly. Other views use the same two-step pattern.

## Add New Records

There are two ways to add records in the Gantt view:

**Using the Add Button**
Click the floating `+` button at the bottom-left of the chart. NocoDB creates a new record with the start and end dates in the visible date range. The expanded record form opens.

**Drag to Create**
To create a new record, drag on an empty area of the Gantt grid:

1. Click the start date and drag to the end date. A dotted rectangle shows the date range that you select.
2. Release the mouse button. NocoDB creates the record. The expanded form opens with the start and end dates filled in.

<img alt="Drag to create a new record" src={__img17} placeholder="blur" />

<Callout type="info">
  Drag-to-create is available only in flat (non-grouped) layout.
</Callout>

## Customize Record Label

You can change the fields on the record bars. In the toolbar, click the `Fields` menu. Then:

* Turn fields on or off to set the fields on the bars.
* Drag fields to change their order.
* Apply text formatting (Bold, Italic, Underline) to individual fields.

<img alt="Fields Menu" src={__img18} placeholder="blur" />

## Grouping Records

To group records by one or more fields, use the `Group By` option in the toolbar. When grouping is on:

* The records are in collapsible groups in the left sidebar.
* Each group shows its own chart segment and its number of records.
* The date header stays fixed at the top while the groups scroll vertically.
* Dependency arrows that cross groups show above the groups list. This keeps chains visible across group boundaries.

<img alt="Gantt Group By" src={__img19} placeholder="blur" />

Each group-by entry in the `Group By` menu has an enable/disable toggle. Use it to turn a grouping off and on again. The grouping keeps its configuration.

<Callout type="info">
  Sort is intentionally omitted from Gantt View: records are ordered by start date so vertical position lines up with chronology.
</Callout>

## Visual Indicators

| Indicator            | What it shows                                                                                                                                                                                        |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Today's date**     | A different background color and blue text.                                                                                                                                                          |
| **Weekends**         | A light gray background.                                                                                                                                                                             |
| **Record colours**   | When you set [Row Coloring](/docs/product/tables/table-operations/record-colouring), the color applies to the bar as a background fill, a left-edge accent stripe, or both. The rule sets which one. |
| **Hover**            | When you hover over a bar, a tooltip shows the record title, date range and duration. The full dependency chain of the bar is also highlighted.                                                      |
| **Inspected record** | The bar (or milestone) in the Record Inspector has an outline in the brand color.                                                                                                                    |

## Shared and Public Views

To share a Gantt view, use the standard [Share View](/docs/product/tables/views/share-view) flow. In a public / shared view:

* Bars, milestones and dependency arrows show as usual.
* The Record Inspector is **read-only**. You cannot edit the name and date fields, and the Link record / Unlink controls are hidden.
* Bar drag, resize and the dependency handle are disabled.

<img alt="Shared public Gantt view" src={__img20} placeholder="blur" />

## Other Toolbar Operations

1. [Apply Filters to Display Specific Records on the Gantt](/docs/product/tables/table-operations/filter)
2. [Perform Quick Searches for Specific Data Within Fields](/docs/product/tables/table-operations/search)
3. [Export Data to CSV or Excel Format](/docs/product/tables/table-operations/download#download-data)
4. [Apply Row Coloring Based on Field Values](/docs/product/tables/table-operations/record-colouring)

<Callout type="info">
  Gantt View is not supported on mobile. Open the view on a desktop or tablet to schedule records.
</Callout>

## Availability

* The Gantt view is available on **NocoDB Cloud** (Business plan and above) and licensed self-hosted deployments (Business plan and above).

## Related

[Timeline View](/docs/product/tables/views/view-types/timeline)
[Calendar View](/docs/product/tables/views/view-types/calendar)
[Date Dependencies](/docs/product/tables/records/date-dependency)
[Grid View](/docs/product/tables/views/view-types/grid)

---

## Related pages

- [Grid](https://nocodb.com/docs/product/tables/views/view-types/grid.md): Use the Grid view in NocoDB to see and edit records in rows and columns, as in a spreadsheet.
- [Gallery](https://nocodb.com/docs/product/tables/views/view-types/gallery.md): Use the Gallery view in NocoDB to show records as cards with image thumbnails.
- [Form](https://nocodb.com/docs/product/tables/views/view-types/form.md): Use the Form view in NocoDB to build forms that add records to a table, with validations, conditions and scheduling.
- [Kanban](https://nocodb.com/docs/product/tables/views/view-types/kanban.md): Use the Kanban view in NocoDB to show records as cards in stacks and drag them between stacks.
- [Calendar](https://nocodb.com/docs/product/tables/views/view-types/calendar.md): Use the Calendar view in NocoDB to show records on a calendar by date and move them between dates.
- [List](https://nocodb.com/docs/product/tables/views/view-types/list.md): Use the List view in NocoDB to show records as a multi-level list grouped by linked records, with nested records.
- [Map](https://nocodb.com/docs/product/tables/views/view-types/map.md): Use the Map view in NocoDB to show records as markers on a map from a GeoData field.
- [Timeline](https://nocodb.com/docs/product/tables/views/view-types/timeline.md): Use the Timeline view in NocoDB to show records as bars on a time axis from a start date to an end date.
