> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/governed-dashboards-4/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/governed-dashboards-4/charts-gallery/charts/project-timeline.md).

# Project Timeline

{% hint style="success" %}
*Check out the below given walk-through on how to use the Project Timeline chart component in Designer module.*
{% endhint %}

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FQ9o9VKyci7OqwfQKFFgi%2FProjectTimeline.gif?alt=media&#x26;token=8d1a30f3-b16e-46a8-ae04-42aaf3e290ec" alt=""><figcaption></figcaption></figure>

The Project Timeline is an interactive visualization chart to visualize data in time. The data items can take place on a single date or have a start and end date (a range). Users can easily move and zoom in on the timeline by using the drag-drop and scroll functionalities. The time scale on the axis is adjusted automatically, and it supports scales ranging from milliseconds to hours to days to years. The Project Timeline uses regular HTML DOM to render the timeline and items placed on the timeline. It allows for flexible customization using CSS styling.

## **Best Situations to Use a Project Timeline chart**

To track project deadlines and status with the timeline template. To update status throughout the project

## **Default Chart Image**

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FyCz3KM7FQguxVegZEa1L%2FDefault%20Chart.png?alt=media&#x26;token=e188ddb1-9ad2-4a1d-a156-a1605d3649c5" alt=""><figcaption></figcaption></figure>

## **Properties of the Project Timeline chart**

### **General**

The user can change the height, width, top, left, can change date formatting.

<figure><img src="https://4083025080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2FD9zGTD2SNDpnyGDMByti%2Fimage.png?alt=media&amp;token=e052ba5f-93df-42b6-801e-cf36875883ea" alt=""><figcaption></figcaption></figure>

### **Tooltip**&#x20;

The user can show the description of the series can use the tooltip by enabling it.

<figure><img src="https://4083025080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2FHIjdmtW3QCCYLpnW3rnK%2Fimage.png?alt=media&amp;token=e6e9c6de-f0b0-4eb8-90ec-d2f0b661f895" alt=""><figcaption></figcaption></figure>

### **Background**

The user can change the background color of the chart, get the border for the chart, and change the border color. Get the reflection of the chart by enabling the shadow option and also change the color, increase or decrease the transparency of the shadow.

<figure><img src="https://4083025080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2Fkb4TULsrvjEX35duZbyB%2Fimage.png?alt=media&amp;token=8de64b70-f922-4cef-bca9-c47f8d2322c2" alt=""><figcaption></figcaption></figure>

### **Timeline Styles**&#x20;

The user can change the Timeline position to bottom, left, right, can change the Today marker line color & marker size, can enable the minor & major labels, can change the font size, color, style, etc.

<figure><img src="https://4083025080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2FZKEBDTDf2X83T99Gmod9%2Fimage.png?alt=media&amp;token=a118d7ba-be6c-406b-a0fc-3160ff61c857" alt=""><figcaption></figcaption></figure>

### **Milestone Styles**

The user can change the task date flag color together with border width, font size, font color, etc.

<figure><img src="https://4083025080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2FxAMwHMTwdvtvzZLWQ1IX%2Fimage.png?alt=media&amp;token=5f96e595-30ca-4f4b-8b83-6322179a16c1" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4083025080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2FtW4YLy9nSwE800b4UdCa%2Fimage.png?alt=media&amp;token=e4a0b431-d4ef-4ef7-a485-af330b0e8fc8" alt=""><figcaption></figcaption></figure>

### **Task Styles**

The user can change the task box color, can enable the text Overflow task font color, size.

<figure><img src="https://4083025080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2FtIjNQGg1tNbKMyuvfEyQ%2Fimage.png?alt=media&amp;token=b06bbebc-3ee4-4aa9-ad65-5ee6635ab93c" alt=""><figcaption></figcaption></figure>

### **Title**&#x20;

The user can change Title Name, Font color, font size, font style, etc.

<figure><img src="https://4083025080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2FBRqFVu1zOMD798bieGKA%2Fimage.png?alt=media&amp;token=bb5e3314-9f4c-4c3e-b299-f519ad956247" alt=""><figcaption></figcaption></figure>

### **Subtitle**

The user can enable the subtitle to display the second title. The user can change the Name, Font color, size, style for the subtitle.

<figure><img src="https://4083025080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2FxBm3WrMvOlntkMcme1oy%2Fimage.png?alt=media&amp;token=5a44657c-840a-4b58-a6cd-6ef235759e63" alt=""><figcaption></figcaption></figure>

### **Export Options**

The Export Options also helps to provide heading, subheading, file name. The user can also select an option for ***Global Export Type***.

<figure><img src="https://4083025080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2F1BvCPw8E3FWmhMMYr8nK%2Fimage.png?alt=media&amp;token=de87fe0c-ba0f-49c3-84f5-1d6b73493944" alt=""><figcaption></figcaption></figure>

The user can enable the ***Enable Context Menu*** from the preview section to download the reports in different formats.

<figure><img src="https://4083025080-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5aLubSHNOzBzWIIdbNGx%2Fuploads%2FduKHGA2Qa4jUyH0vy1MW%2Fimage.png?alt=media&amp;token=690ead50-05bc-4f95-b67e-a045276d7c00" alt=""><figcaption></figcaption></figure>

## **Project Timeline chart by changing the Properties**

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FDqd6IQodCjteCu2wE0wX%2FProject%20Timeline.png?alt=media&#x26;token=57c23a4c-486e-4a6b-8aff-b34802ef71e0" alt=""><figcaption></figcaption></figure>

## Sample Data&#x20;

Download the given sample data and map it as mentioned below to plot your ***Project Timeline*** chart.&#x20;

Use the ***Category*** column as ***Category*** field, ***Start Date*** as ***Start Date*** field, ***End Date*** as ***End Date** to plot data.*

{% file src="/files/I2tkgCrwGzPEKtxzq7ZP" %}