# Non-Working Time

An explanation of the non-working time functionality in SpreadJS GanttSheets, including UI and code examples

## Content

The chart area of a Gantt chart displays the non-working time as well. Gantt charts highlight working and non-working time differently so that users can distinguish them clearly. By default, the Gantt chart uses the gray color to indicate the non-working time by default. You can change the draw mode, color, and style pattern of the non-working area using the `nonWorkingTime` properties.
The following code sample shows how to change different properties of the non-working area.

```
// Change non-working time styles.
// Change color to green.
ganttSheet.project.timescale.nonWorkingTime.color = "green";
// Change pattern to lineCross.
ganttSheet.project.timescale.nonWorkingTime.pattern = "lineCross";
// Change draw mode to none.
ganttSheet.project.timescale.nonWorkingTime.drawMode = "None";
```

The GIF below shows the output of the above codes.

![non working time style](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/non%20working%20time%20style.9aa483.gif?width=734)