# Gantt Chart

**GM - Gantt Chart** component provides clarity in complex project timelines filled with numerous tasks, shifting deadlines, and overlapping dependencies. A Gantt chart significantly helps by allowing you to see the bigger picture while keeping track of the details. With GridMate’s Gantt Chart component, this clarity comes right into your projects no need to switch between spreadsheets or external tools, as everything remains connected to your live data.

The component provides a set of actions that can be performed by the end-user to update the project plan. Those actions are visible at the top of the component in the toolbar:point\_down: 

<figure><img src="/files/LwxWfDp7Gbb6yRXu1b3v" alt=""><figcaption></figcaption></figure>

{% columns fullWidth="false" %}
{% column %}

1. View&#x20;
2. Zoom level
3. Zoom in / out
4. Date Picker
5. Undo / Redo
6. Save
7. Delete
8. Move Left
9. Move Right
10. Move Down
11. Move Up
12. Refresh&#x20;
13. Expand
14. Collaps All
15. Expand All
16. Toggle Right Panel
17. Toggle Left Panel
18. Horizontal Scroll
    {% endcolumn %}

{% column %}
19\. Create a Baseline
20\. Select Baseline
21\. Critical Path
22\. Search Box
23\. Progress
24\. Level
25\. Task Name
26\. Dependencies
27\. Deadline Start
28\. Deadline End
29\. Checklist
30\. Assignees
31\. Dependencies
32\. Rules
33\. Delete
34\. Task
35\. Milestone
36\. Summary

{% endcolumn %}
{% endcolumns %}

## Gantt Chart Setup

When you drag the **GM – Gantt Chart** component into the Salesforce App Builder, you’ll find a list of configurable properties. Let’s go through them one by one :&#x20;

1. Select an Project record and edit the page in the Lightning App Builder.
2. From the components list, drag and drop the component **GM -  Gantt Chart**.
3. The component is now ready for configuration in the Lightning App Builder.
4. The property values can be configured to tailor the needs of the end-user.
5. To perform a quick configuration, populate the properties below:
   * Title : **Gantt Chart**
   * Can Select : ***Checked***
   * Can Reorder : ***Checked***
   * Can Edit : ***Checked***
   * Columns : ***2***
   * Relation Config : [JSON string configuration ](#gantt-chart-relation-configuration)
   * Work Day Start : **8**
   * Work Day End : **17**
   * Hour Span : **1**
   * Work Week Start : **1**
   * Work Week End : **5**
   * First Day of Week : **1**&#x20;
   * Default Displayed Tasks : **10**
   * Slot Size : **200**
   * Row Height : 40
   * Left Panel Width (%) : **40**
   * Right Panel Width (%) : **30**
   * Default View : **Initial zoom level of the Gantt chart (daily, weekly, monthly, yearly)**

## Gantt Chart Demo&#x20;

Below is a step by step tutorial to configure the **GM - Gantt Chart** component.👇

{% embed url="<https://youtu.be/Ylh0eGaJZIM>" %}

#### **Gantt Chart Relation Configuration**

This configuration defines how tasks are displayed and behave in your Gantt chart. The structure consists of an array of task type configurations, where each object represents a different type of task that can be used in your project timeline.

**Core Task Properties**

* **taskObjectApiName** : The Salesforce API name of the object that represents this task type.
* **titleFieldName** : The field that contains the task's display name
* **fromDateFieldName** : The field containing the task's start date
* **toDateFieldName** : The field containing the task's end date
* **ownerFieldName** : The field that identifies who owns or is responsible for the task
* **progressFieldName** : The field that tracks completion percentage

**Visual Appearance**

* **taskIconName** : The icon displayed for this task type in the Gantt Chart
* **taskColor** : The color used to display this task type (hex color code)

**Field Display Configuration**

* **taskDetailFields** : Array of fields shown in the detailed task view
* **taskPopoverFields** : Array of fields shown in hover popover when user hovers over a task
* **taskListFields** : Array of fields shown in the task list view

**Hierarchical Structure**

* **parentFieldName** - Defines parent-child relationships between tasks. It contains an array of objects specifying:
  * `parentObjectApiName`: The API name of the parent object
  * `fieldName`: The field that references the parent task
* **orderFieldName** - Field used to determine the display order of tasks
* **acceptedChildren** - Defines what types of child tasks this task type can contain. It contains an array of objects with:
  * `apiName`: The API name of the allowed child task type
  * `multiple`: Boolean indicating if multiple children are allowed

**Task Types**

* **taskType** - Array defining the specific types of tasks this configuration supports.

Here’s an example of the **Relation Config** used in this tutorial:&#x20;

```json
[
    {
        "taskObjectApiName": "Project__c",
        "titleFieldName": "Name",
        "fromDateFieldName": "StartDate__c",
        "toDateFieldName": "EndDate__c",
        "ownerFieldName": "OwnerId",
        "progressFieldName": "Progress__c",
        "taskIconName": "custom:custom43",
        "taskColor": "#0176d3",
        "taskDetailFields": [
            "Name",
            "Progress__c",
            "StartDate__c",
            "EndDate__c"
        ],
        "taskPopoverFields": [
            "Name"
        ],
        "acceptedChildren": [
            {
                "apiName": "gmpkg__GanttTask__c",
                "multiple": true
            }
        ]
    },
    {
        "taskObjectApiName": "gmpkg__GanttTask__c",
        "titleFieldName": "Name",
        "fromDateFieldName": "gmpkg__StartDate__c",
        "toDateFieldName": "gmpkg__EndDate__c",
        "ownerFieldName": "OwnerId",
        "progressFieldName": "gmpkg__Progress__c",
        "parentFieldName": [
            {
                "parentObjectApiName": "gmpkg__GanttTask__c",
                "fieldName": "gmpkg__Parent__c"
            }
        ],
        "orderFieldName": "gmpkg__Order__c",
        "taskIconName": "custom:custom12",
        "taskColor": "#dc71d1",
        "taskDetailFields": [
            "Name",
            "gmpkg__Progress__c",
            "gmpkg__StartDate__c",
            "gmpkg__EndDate__c"
        ],
        "taskPopoverFields": [
            "Name",
            "gmpkg__Progress__c",
            "gmpkg__StartDate__c",
            "gmpkg__EndDate__c"
        ],
        "taskType": [
            "milestone",
            "task"
        ],
        "acceptedChildren": [
            {
                "apiName": "gmpkg__GanttTask__c",
                "multiple": true
            }
        ]
    }
]
```


---

# 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.gridmate.io/product-tour/gantt-chart.md?ask=<question>
```

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.