# 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/v18/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)

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.

![5.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/5.5ba784.png?width=600&verticalAlign=middle)

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.

![6.png](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/6.35146e.png?width=600&verticalAlign=middle)

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