> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/gantt-component.md).

# Gantt component

Plan and track scheduled work on a timeline.

Use a **Gantt** component on a page to show scheduled records on a timeline. It works well for projects, tasks, production plans, and other work with start and end dates.

Click any item in the Gantt to open its record in the form view.\
Use **Today** to return to the current date when it is outside the visible timeline.

Before you add a **Gantt** component, prepare a source table with:

* A field for each record's start date and end date
* A field that identifies each bar
* Optional fields for color, progress, milestones, baselines, and dependencies

## **Add a Gantt component to a page**

{% stepper %}
{% step %}
**Open the Add tab**

In the **Settings** panel, open **Add**.
{% endstep %}

{% step %}
**Add Gantt**

Under **Views**, drag **Gantt** to the preferred location on the page.
{% endstep %}

{% step %}
**Label the component**

Ninox generates the **Label** and **Internal name** automatically. Update either value if needed.
{% endstep %}

{% step %}
**Choose the source data**

Under **Behavior**, select the source **Table**. Select its **Start date** and **End date** fields.
{% endstep %}

{% step %}
**Configure the bars**

Select a **Bar label** field. Optionally select **Color**, **Progress**, and **Milestone** fields.
{% endstep %}

{% step %}
**Review the timeline**

Check that every bar uses the expected dates and label. Drag the component or use its resize handles to adjust the page layout.
{% endstep %}
{% endstepper %}

## **Gantt component settings**

In **Settings**, define the component's basic details:

* **Label** sets the title shown on the component.
* **Internal name** is generated automatically. Use this name when you reference the component in logic.

Under **Behavior**, configure the timeline and its bars:

* In **Table**, choose the source table.
* In **Start date** and **End date**, choose the fields that define each bar's time range.\
  If you configure only one option, Ninox displays every record as a milestone.\
  If you configure both options, records missing either of the selected dates appear as milestones too. All other records appear as time-range bars.
* In **Bar label**, choose the field whose text appears on the bar.
* In **Color**, choose a **Choice** or **Color** field to color each bar.
* In **Progress**, choose a field that contains a value from `0` to `100`. Ninox displays the value as the bar's completion percentage.
* In **Milestone**, choose a **Yes/No** field that marks a record as a milestone.\
  If **Start date** and **End date** are configured, and the record is marked as a milestone using the **Yes/No** field, Ninox displays the milestone on the **End date**.
* In **Dependency**, choose a relationship field between records in the source table. If no field is available, add a relationship field in this table. Set its target to the same table.\
  Use it when Gantt items depend on each other. Ninox draws dependency lines between linked records.

  After you select the relationship field, you see the **Linked record is** setting.

  * Choose **A predecessor that finishes first** when the linked record must finish before the current record.
  * Choose **A successor that starts afterwards** when the linked record starts after the current record.
* In **Baseline start** and **Baseline end**, choose fields that show planned dates alongside the current schedule. Use baseline fields when you need to compare the current schedule with the original plan.
* In **Default time scale**, choose the timeline scale shown when users open the page.\
  Use these toggles if needed:
  * **Hide title column** to hide the left-hand column that lists bar labels.
  * **Highlight critical path** to highlight tasks that determine the schedule's finish date.
  * **Disable dragging bars** to prevent users from changing dates by dragging bars.
  * **Hide weekends in day view** to remove weekends from the day scale.
  * **Shade weekends** to display weekends with a shaded background.
* In **Group**, choose a field to group records into sections on the timeline.
* Use **Filter** to limit the records shown by one or more conditions.
* Enable **Show time scale selector** to let users switch between **Quarter**, **Month**, **Week**, and **Day**.
* Enable **Show search field** to let users search within records.

Under **Visibility**, choose how the component appears on the page:

* **Visible** shows the component.
* **Hidden** hides the component.
* **Conditional** shows the component when its **Visibility condition** is met.

{% hint style="info" %}
A visibility condition changes only what users see. It does not change records or permissions.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/gantt-component.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.