# Gantt: Timeline settings

The Analytics+ Gantt ships with a multi-level timeline. You can tailor the appearance of the timeline headers.&#x20;

#### 1. Header format

Customize your timeline by selecting from built-in header formats.

* **Normal:** The default 'Normal' option displays the years/months/days, etc, as is.
* **Combined**: Displays the current period as well as the next consecutive period.
* **Days**: Displays the number of days in each period.

<div><figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2F95FmRKskmtg3bUQICVAC%2Fimage.png?alt=media&#x26;token=ba2df97f-5388-4609-9e9a-d86687cb4251" alt=""><figcaption><p>Normal</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FA1GrssoW8chpxp37JW06%2F2025-04-08_17h40_06.png?alt=media&#x26;token=ad9b0906-07fa-4575-8647-3d7cdbdf702a" alt=""><figcaption><p>Combined</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FddBuhKfLdca6hkTGt32D%2F2025-04-08_17h42_27.png?alt=media&#x26;token=0c70ea5f-56b6-4b64-8e41-5ba0e50cf6a2" alt=""><figcaption><p>Days</p></figcaption></figure></div>

#### 2. Start/end date

Specify the start and end dates of the Gantt timeline. Analytics+ offers 3 options:

* **Default**: The start and end dates are automatically set based on the data.
* **Static date:** Select a start or end date from the date picker. In this case, although we have data from January to October, the Gantt is rendered from April to August based on the selected dates.
* **Data**: Source the start and end dates from a date measure.

<div><figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FMHf7fV6J52vKDaUJACuT%2Fimage.png?alt=media&#x26;token=6ca6b83e-0fec-4869-926d-e32220587d6d" alt=""><figcaption><p>Default start and end date</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FhcBblIVWv129WgKOD4pn%2F2025-04-08_18h36_24.png?alt=media&#x26;token=09ce930a-68cd-4a50-a263-e033fde4d0fa" alt=""><figcaption><p>Static start and end date</p></figcaption></figure></div>

You can also use a combination of options. We've used a static start date and the default option for the end date.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FlzIiShuPP1MZFKeqCxXI%2Fimage.png?alt=media&#x26;token=187624ce-8040-4da9-8aa4-9e04875ca428" alt=""><figcaption></figcaption></figure>

#### 3. Top-level

Specify the background color, font style, color, size, border color, and width for the topmost level of the timeline.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FG0ZvwHs8XLgILOVQjVAZ%2Fimage.png?alt=media&#x26;token=47ce48bc-355d-4f16-9212-42089824e110" alt=""><figcaption><p>Customizing the top level of the time line</p></figcaption></figure>

Disable the toggle if you do not want to display the top-level header.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FaPxq2fjvPY4DglNcBRAq%2Fimage.png?alt=media&#x26;token=e76e0244-87d2-463a-ae01-746fa27ea305" alt=""><figcaption><p>Disabling the top-level header</p></figcaption></figure>

#### 4. Mid-level

Similar to the top-level header, you can customize the appearance of the mid-level header.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2F2YDJx91mnYPPBbtgBfN0%2Fimage.png?alt=media&#x26;token=de9f1af9-1351-49bc-b01f-f9df11a71fb8" alt=""><figcaption><p>Mid-level header customization</p></figcaption></figure>

#### 5. Low-level

As we saw for top and mid-level headers, you can tailor the lowest-level header.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2Fy4mVEFHIBTFb9id2Nuoz%2Fimage.png?alt=media&#x26;token=9115b8f7-cc10-443b-b9f7-7901ce0cdbf4" alt=""><figcaption><p>Low level header customization</p></figcaption></figure>

#### 6. Padding

In addition to the configured start and end timeline, a buffer time range is displayed on either end of the Gantt. Use the **Left** and **Right** textboxes to adjust the padding in pixels for the buffer.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2Fep8HIct0xpbkpzDZpImC%2Fimage.png?alt=media&#x26;token=b8b61d41-fa72-4c6a-929f-1520a52cdad8" alt=""><figcaption><p>Timeline padding</p></figcaption></figure>

#### 7. Scroll bar

Choose how to navigate the Gantt chart timeline:

**Fit all:** The entire timeline between the configured start and end date is accommodated in the canvas.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FsJxt4OaRr3rre3Uq0i0V%2Fimage.png?alt=media&#x26;token=a1807d80-c14f-45f0-86fe-6a00e8a66ebc" alt=""><figcaption><p>Fit all</p></figcaption></figure>

&#x20;**Scroll:** The timeline is fully expanded, use the scroll bar to navigate the timeline.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FwEgteJoVMBx2iRDRnROR%2Fimage.png?alt=media&#x26;token=b9d0fa83-d1a5-4ffe-a466-b183c552f514" alt=""><figcaption><p>Scroll</p></figcaption></figure>

**Zoom unit:** The zoom unit option gives you the flexibility to determine how much of the timeline will be visible in a single screen. If your project has monthly deliverables, you can set the **Zoom unit** to 'Month' and the **Zoom range** to 1 - this way, each scroll will display one month on the Gantt chart. If you set the Zoom unit to 'Week' and the Zoom range to 6, Analytics+ will display 6 weeks of the timeline.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FPzfeDzwQegYpaIXby78n%2Fimage.png?alt=media&#x26;token=fc88d10e-df74-4ea2-b2b0-7a316ce0d4b3" alt=""><figcaption><p>Zoom unit - 1 month</p></figcaption></figure>

The **Zoom Anchor option** determines the starting point of the timeline. The user can scroll to view the rest of the Gantt chart.

* **First**: This option displays the beginning of the timeline. In this case, the Gantt timeline starts in Q1 January. When you choose the 'First' option, the progress in January - February will be displayed.
* **Last**: This option will display the end of the timeline.
* **Today/Custom:** Display the Gantt timeline with respect to the current date or a custom date that you can set from the date picker. In this example, the Zoom unit is set to 'Day' and we've set a custom date as the Zoom anchor. The Zoom range is 10 - which means that the Gantt will initially display data for 10 days from 15th August (the chosen custom date).

<div><figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FwvpnxcE6XA6fHlVmUTke%2Fimage.png?alt=media&#x26;token=55376788-654c-4bc2-aac1-d1a94d8062f8" alt=""><figcaption><p>Zoom anchor - first</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FN0bJux3dTKxNkk0k6GH0%2F2025-04-07_16h37_14.png?alt=media&#x26;token=33942ac2-f81c-47d9-8a9d-9cb6c75e0835" alt=""><figcaption><p>Zoom anchor - last</p></figcaption></figure> <figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FeUfYLVRrzrR1PkFSJqoD%2F2025-04-07_17h32_51.png?alt=media&#x26;token=deb76070-be15-4728-8a57-653bff0ba725" alt=""><figcaption><p>Custom zoom anchor</p></figcaption></figure></div>

#### 8. Scroll bar color

Set custom fill and track colors for the scroll bar.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FuCG0JNrpfW2TTUEAscyf%2Fimage.png?alt=media&#x26;token=f161b56a-8620-476c-8d32-b766b0d97e1f" alt=""><figcaption><p>Scroll bar color</p></figcaption></figure>
