# Gantt Chart ![Gantt Chart](/files/-MHppwpBCyr_Wy7jcC4e) ## 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 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.cloudio.io/ui-components/widgets/ganttchart.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.