# Gantt Chart

![Gantt Chart](https://1117313960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzMJAXNyRSI4WE3Jt4z%2Fsync%2Fed532a286837f9c1370a1811402bb3b22cceb735.png?generation=1600778693831191\&alt=media)

## Description:

Gantt Chart

A Gantt chart is a date/time-based chart, with which you can plot tasks visually, with their exact start and end dates/times. You can also define milestones for the project, which assert how much of the project should be completed at a given point in time. That way, you can keep track of the project progress and plan remedial actions to bring the project back on course, if there is a delay.![](https://github.com/CloudIO-IDC/Docs-Platform3.0/tree/5c198f04e28051e8ca03900e5ee321a86dc40a91/ui-components/widgets/io.GanttChart.png)

### Allowed Parent Components:

1. Card Body
2. Col
3. Horizontal Section
4. Vertical Section

### Allowed Child Components:

1. Data Column
2. Popover
3. Pulse
4. Trigger Before Render
5. Trigger On Click

### Properties

### ➤ Caption

Provide a title for the Chart.

Allowed Values: An expression which should return string after evaluation

### ➤ Sub Caption

Provide a sub title for the chart.

Allowed Values: An expression which should return string after evaluation

### ➤ Height

Provide numerical values to set heigth in pixels.

Allowed Values: Any number value

### ➤ Width

Provide numerical values to set width in pixels.

Allowed Values: Any number value

### ➤ Use Existing Data Source

Choose this prop if you want to reuse a Data Source that was defined on some other component on this page or any of the parent abstract pages.

Allowed Values: Yes/No

### ➤ Data Source

Select a datasource from the list.

Allowed Values: Select a datasource from the list.

### ➤ Data Source Alias

Allowed Values: Free text field

### ➤ Default Where Clause

Allowed Values: Free text field

### ➤ Max Rows

Allowed Values: Any number value

### ➤ Order By Clause

e.g. #firstAttr#, #secondAttr# DESC

Allowed Values: Free text field

### ➤ Auto Query

Check this property to query the selected datasource on component render.

Allowed Values: Yes/No

### ➤ Execute Count SQL

Check this to execute count SQL to get the total number of rows in the database on a query. You can get this value by using the expression: #{DataStore.totalLength}

Allowed Values: Yes/No

### ➤ Execute Distinct SQL

Check this to execute distinct SQL to get the total number of distinct rows in the database on a query.

Allowed Values: Yes/No

### ➤ Process Id Attribute

The attribute that gives id for the process. Each process needs to have a unique identifier to enable cross linking with tasks.

Allowed Values: The attribute that gives id for the process. Each process needs to have a unique identifier to enable cross linking with tasks.

### ➤ Process Label Attribute

The attribute that you would want to display as the label for the process

Allowed Values: The attribute that you would want to display as the label for the process

### ➤ Task Id Attribute

The attribute that gives unique id for the tasks

Allowed Values: The attribute that gives unique id for the tasks

### ➤ Task Label Attribute

The attribute that you would want to display as the label for the tasks

Allowed Values: The attribute that you would want to display as the label for the tasks

### ➤ View Attribute

The attribute that gives start date for the tasks

Allowed Values: The attribute that gives start date for the tasks

### ➤ View Attribute

The attribute that gives end date for the tasks

Allowed Values: The attribute that gives end date for the tasks

### ➤ View Attribute

The attribute used to represent the milestones for the tasks

Allowed Values: The attribute used to represent the milestones for the tasks

### ➤ Use Server Timezone

Check this prop if this date should not be converted to browser's timezone. Also make sure the attribute type is set to 'String Date & Time 2' on the server side DataSource definition.

Allowed Values: Yes/No

### ➤ Category Header Date Format

Define the Date format for category header.

Allowed Values: Free text field

### ➤ Process Header Text

Header label for the processes column in data table.

Allowed Values: Free text field

### ➤ Process Header Background Color

Background color of the process header.

Allowed Values: Free text field

### ➤ Process Background Color

Background color for the process name column.

Allowed Values: Free text field

### ➤ Process Header Font Color

Font color for the process header

Allowed Values: Free text field

### ➤ Process Font Color

Font color for process name.

Allowed Values: Free text field

### ➤ Task Color

Fill color for the task bar.

Allowed Values: Free text field

### ➤ Pane Duration Unit

Provide a hex code of the color for the milestone.

Allowed Values:

1. Year
2. Month
3. Week
4. Day

### ➤ Milestone Color

Provide a hex code of the color for the milestone.

Allowed Values: Free text field

### ➤ Milestone Shape

Provide a shape of the milestone.

Allowed Values:

1. star
2. polygon

### ➤ Hide No Data Placeholder

Check this to hide the data displayed when no data found.

Allowed Values: Yes/No

### ➤ No Data Icon

Select an icon to display when no data found.

Allowed Values: Icon List

### ➤ No Data Text1

Provide a text to display as title when no data found.

Allowed Values: Free text field

### ➤ No Data Text2

Provide a text to display as sub title when no data found.

Allowed Values: Free text field