# View Tab

A tutorial showing the different functionalities and customization options to manage Gantt charts in the VIEW tab of the SpreadJS Designer

## Content

The **VIEW** tab of the GanttSheet offers a range of functionalities to enhance the user experience and customization options to manage Gantt charts effectively.

![1.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/1.7d3cbf.png?width=800&verticalAlign=middle)

### Sort Options

The **Sort** button available in the **Data** group provides options to arrange GanttSheet data according to specific criteria for better organization and analysis.
There are three predefined sorting options, such as *by Start Date*, *by End Date*, and *by Task Number*. To customize, select **Sort by...** and apply the required option from the Sort dialog as shown below.

* Ascending
* Descending
* Keep Outline Structure
* Permanently Renumber Tasks

![2.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/2.9e0140.png?width=300&verticalAlign=middle)
For more information on the sorting feature, you can also refer to GanttSheet > [Sort](/spreadjs/docs/features/ganttsheet/sort).

### Zoom Options

The zoom feature enables you to adjust the level of magnification for the Gantt chart. It allows you to get a zoom-in or zoom-out view of the project data.
You can apply the following zoom options:

![3.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/3.5f99b3.png?width=300&verticalAlign=middle)

### Timescale Settings

The **Timescale** setting is present inside the **Zoom** group of the **VIEW** tab. It represents the column header of a Gantt chart and allows you to configure the presentation of time intervals within the Gantt chart.

![4.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/4.598560.png?width=400&verticalAlign=middle)
**Miiddle Tier**
You can select the required timescale intervals from the list. However, if you select the **Timescale...** option, you can modify the display of timescale information by selecting the appropriate tier and formatting options from the related tab page.

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260324.e0d6d8.png?width=600)
**Non-working time**
Additionally, you can define non-working time in the Gantt chart to get more flexibility when scheduling and allocating resources. Non-working time can be displayed before, after, or without the task bar, and also has options to change the colors and patterns for better visual distinction.

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260324.bc3f3b.png?width=600)
**Auto Fit Mode = None**
In this mode:

* Min Date and Max Date are editable.
* The timescale range remains fixed.
* Scheduling does not automatically modify the date boundaries.

This mode allows you to manually define a stable date range.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260324.1b4056.png?width=600)
**Auto Fit Mode = Project**

* The timescale range automatically follows the project’s scheduled duration.
* Min Date and Max Date become read-only in the Designer.
* The date boundaries are updated after each schedule.

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260324.d02116.png?width=600)
**Margin Setting**
The Margin option remains configurable in both modes.
Margin defines how many minimum tier units are reserved:

* Before the start of the timescale range
* After the end of the timescale range

This prevents the chart from becoming visually tight at the boundaries and helps avoid clipping of task labels.

For more information about timescale and non-working time, you can also refer to [Gantt Chart Components](/spreadjs/docs/features/ganttsheet/gantt-chart-components) and [Non-Working Time](/spreadjs/docs/features/ganttsheet/non-working-time).