> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/package-reference/components-library/gm-gantt-chart.md).

# GM - Gantt Chart

(gmpkg:ganttChartLwc)

## **Documentation** <a href="#documentation" id="documentation"></a>

**GM – Gantt Chart** component provides clarity to complex project timelines with numerous tasks, shifting deadlines, and overlapping dependencies. It helps you see the bigger picture while tracking details. With GridMate’s Gantt Chart, this clarity stays within your projects no need to switch between spreadsheets or external tools, as everything is connected to your live data.

**Use case:** Plan, schedule and track a project's tasks, dependencies and resources on a live timeline. See [**Gantt Chart**](/product-tour/gantt-chart.md).

## **Specification**

<table data-full-width="true"><thead><tr><th width="206.4388427734375">Property</th><th width="145.1551513671875">Type</th><th width="690.79541015625">Description</th></tr></thead><tbody><tr><td>Model / configuration</td><td>String</td><td>Gantt configuration to render, picked from the list of available configurations. Leave blank on a record page to use that record's own configuration.</td></tr><tr><td>Gantt Id</td><td>String</td><td>Identifier for the Gantt chart parent record.</td></tr><tr><td>Title</td><td>String</td><td>Title displayed at the top of the Gantt chart. The default value is Gantt Chart.</td></tr><tr><td>Icon name</td><td>String</td><td>Icon displayed for the Gantt chart, You can get the icon name from <a href="https://lightningdesignsystem.com/icons/">https://lightningdesignsystem.com/icons<strong>/</strong></a>. The default value is standard:chart.</td></tr><tr><td>Enable multi-select</td><td>Boolean</td><td>Check this option to allow selecting multiple tasks in the chart. The default value is false.</td></tr><tr><td>Enable tree reorder</td><td>Boolean</td><td>Check this option to allow tasks to be reordered in the task tree. The default value is false.</td></tr><tr><td>Enable editing</td><td>Boolean</td><td>Check this option to allow tasks to be edited directly in the chart. The default value is false.</td></tr><tr><td>Enable deletion</td><td>Boolean</td><td>Check this option to allow the end-user to delete tasks. The default value is false.</td></tr><tr><td>Enable creation</td><td>Boolean</td><td>Check this option to allow the end-user to create tasks. The default value is true.</td></tr><tr><td>Enable checklist</td><td>Boolean</td><td>Check this option to enable task checklists. The default value is false.</td></tr><tr><td>Default scheduling mode</td><td>String</td><td>Scheduling mode applied when the chart opens: <strong>msproject</strong> | <strong>auto</strong> | <strong>manual</strong>. See <a href="/product-tour/gantt-chart.md#task-scheduling-mode">Task Scheduling Mode</a>. The default value is msproject.</td></tr><tr><td>Gantt configuration JSON</td><td>String</td><td>JSON configuration that defines the data model for the Gantt Chart. <a href="/product-tour/gantt-chart.md#gantt-chart-relation-configuration">JSON string configuration</a></td></tr><tr><td>Tree column configuration JSON</td><td>String</td><td>Configuration for the columns displayed in the task tree.</td></tr><tr><td>Default view</td><td>String</td><td>Initial timeline scale: <strong>Day</strong> | <strong>Week</strong> | <strong>Month</strong> | <strong>Year</strong> | <strong>Full</strong>. The default value is Month.</td></tr><tr><td>Zoom Level</td><td>String</td><td>Initial zoom level of the timeline, in percent: <strong>25</strong> | <strong>50</strong> | <strong>100</strong> | <strong>200</strong>. The default value is 100.</td></tr><tr><td>Visible tasks</td><td>Integer</td><td>The number of tasks displayed by default. Use 999 to fill the available height. The default value is 10.</td></tr><tr><td>Row height (px)</td><td>Integer</td><td>Height of each row in pixels. The default value is 40.</td></tr><tr><td>Slot size (px)</td><td>Integer</td><td>Width of each time slot in pixels. The default value is 100.</td></tr><tr><td>Show only work hours</td><td>Boolean</td><td>Check this option to show only the defined work hours in the chart. The default value is false.</td></tr><tr><td>Hours per day</td><td>Integer</td><td>Number of working hours in a day, used for duration calculations (1-24). When <strong>Work hours</strong> is set, the hours per day are derived from it. The default value is 8.</td></tr><tr><td>Work hours</td><td>String</td><td>Working time ranges within a day, as a ',' separated list of <code>HH:MM-HH:MM</code> ranges, e.g. <code>08:30-12:30,13:30-17:30</code>.</td></tr><tr><td>Allow export</td><td>Boolean</td><td>Check this option to allow the end-user to export the chart. The default value is true.</td></tr><tr><td>Allow baselines</td><td>Boolean</td><td>Check this option to allow the end-user to create and select baselines. The default value is true.</td></tr><tr><td>Allow workload</td><td>Boolean</td><td>Check this option to allow the end-user to manage the resource workload. The default value is true.</td></tr><tr><td>Allow fullscreen</td><td>Boolean</td><td>Check this option to allow the end-user to toggle fullscreen. The default value is true.</td></tr><tr><td>Freeze completed tasks</td><td>Boolean</td><td>Check this option to keep 100% completed tasks in place when tasks are rescheduled automatically (they can still be moved manually). The default value is true.</td></tr><tr><td>Work day start</td><td>Integer</td><td>Deprecated — use <strong>Work hours</strong>. This property is no longer used.</td></tr><tr><td>Work day end</td><td>Integer</td><td>Deprecated — use <strong>Work hours</strong>. This property is no longer used.</td></tr><tr><td>Hour span</td><td>Integer</td><td>The time interval that defines a task slot’s length and the step size for moving tasks on the timeline (max 12h). The default value is 1.</td></tr><tr><td>Work week start</td><td>Integer</td><td>The day the workweek starts, default is 1 (Monday).</td></tr><tr><td>Work week end</td><td>Integer</td><td>The day the workweek ends, default is 5 (Friday).</td></tr><tr><td>First day of week</td><td>Integer</td><td>Representation of the first day of the week (1-7). The default value is 1.</td></tr><tr><td>Snap to working days</td><td>Boolean</td><td>Check this option to snap task dates to working days and compute durations in working days. Not available on Experience Cloud pages.</td></tr><tr><td>List panel open by default</td><td>Boolean</td><td>Check this option to open the left (list) panel when the chart loads. The default value is false.</td></tr><tr><td>Editor panel open by default</td><td>Boolean</td><td>Check this option to open the right (editor) panel when the chart loads. The default value is false.</td></tr><tr><td>Default list panel width (%)</td><td>Integer</td><td>Width of the left panel as a percentage of total width, up to 100%. The default value is 50.</td></tr><tr><td>Default editor panel width (%)</td><td>Integer</td><td>Width of the right panel as a percentage of total width, up to 100%. The default value is 30.</td></tr></tbody></table>

## **API Reference** <a href="#api-reference" id="api-reference"></a>

{% tabs fullWidth="true" %}
{% tab title="ganttChartLwc.js-meta.xml" %}
{% code fullWidth="false" %}

```xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>65.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>GM - Gantt Chart</masterLabel>
    <description
        >Plan, schedule and track work on your own objects — dependencies, calendars, resources, cost and baselines, on
        a live Gantt timeline.</description
    >

    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="lightning__RecordPage,lightning__AppPage,lightning__HomePage">
            <!-- Identification -->
            <property
                name="configName"
                type="String"
                label="Model / configuration"
                description="Gantt configuration to render. Leave blank on a record page to use that record's own configuration."
                datasource="apex://GanttConfigPicklist"
            />
            <property name="parentRecordId" type="String" label="Gantt Id" />
            <property name="title" type="String" default="Gantt Chart" label="Title" />
            <property name="iconName" type="String" default="standard:chart" label="Icon name" />

            <!-- Behavior -->
            <property name="canSelect" type="Boolean" default="false" label="Enable multi-select" />
            <property name="canReorder" type="Boolean" default="false" label="Enable tree reorder" />
            <property name="canEdit" type="Boolean" default="false" label="Enable editing" />
            <property name="canDelete" type="Boolean" default="false" label="Enable deletion" />
            <property name="canCreate" type="Boolean" default="true" label="Enable creation" />
            <property name="enableChecklist" type="Boolean" default="false" label="Enable checklist" />
            <property
                name="defaultSchedulingMode"
                type="String"
                default="msproject"
                label="Default scheduling mode"
                datasource="msproject,auto,manual"
            />

            <!-- Data & Config -->
            <property name="taskProps" type="String" label="Gantt configuration JSON" />
            <property name="columns" type="String" label="Tree column configuration JSON" />

            <!-- Timeline -->
            <property
                name="defaultView"
                type="String"
                default="Month"
                label="Default view"
                datasource="Day,Week,Month,Year,Full"
            />
            <property
                name="defaultZoomLevel"
                type="String"
                label="Zoom Level"
                default="100"
                datasource="25,50,100,200"
            />
            <property
                name="displayedTasks"
                type="Integer"
                default="10"
                label="Visible tasks (999 = fill available height)"
            />
            <property name="rowHeight" type="Integer" default="40" label="Row height (px)" />
            <property name="slotSize" type="Integer" default="100" label="Slot size (px)" />

            <!-- Work Hours -->
            <property name="showWorkHours" type="Boolean" default="false" label="Show only work hours" />
            <property
                name="hoursPerDay"
                type="Integer"
                default="8"
                label="Hours per day (duration math)"
                min="1"
                max="24"
            />
            <property name="workHours" type="String" label="Work hours, e.g. 08:30-12:30,13:30-17:30" />
            <property name="canExport" type="Boolean" default="true" label="Allow export" />
            <property name="canManageBaselines" type="Boolean" default="true" label="Allow baselines" />
            <property name="canManageWorkload" type="Boolean" default="true" label="Allow workload" />
            <property name="canToggleFullscreen" type="Boolean" default="true" label="Allow fullscreen" />
            <property name="freezeCompletedTasks" type="Boolean" default="true" label="Freeze completed tasks" />
            <property
                name="workDayStart"
                type="Integer"
                label="Work day start (deprecated — use Work hours)"
                min="1"
                max="24"
            />
            <property
                name="workDayEnd"
                type="Integer"
                label="Work day end (deprecated — use Work hours)"
                min="1"
                max="24"
            />
            <property name="hourSpan" type="Integer" default="1" label="Hour span" max="12" />
            <property name="workWeekStart" type="Integer" default="1" label="Work week start" />
            <property name="workWeekEnd" type="Integer" default="5" label="Work week end" />
            <property name="firstDayOfWeek" type="Integer" default="1" label="First day of week" />
            <property name="snapToWorkingDays" type="Boolean" label="Snap to working days" />

            <!-- Panel Layout -->
            <property name="listPanelOpen" type="Boolean" default="false" label="List panel open by default" />
            <property name="editorPanelOpen" type="Boolean" default="false" label="Editor panel open by default" />
            <property
                name="listPanelWidth"
                type="Integer"
                default="50"
                max="100"
                label="Default list panel width (%)"
            />
            <property
                name="editorPanelWidth"
                type="Integer"
                default="30"
                max="100"
                label="Default editor panel width (%)"
            />

            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>

        <targetConfig targets="lightningCommunity__Default">
            <!-- Identification -->
            <property
                name="configName"
                type="String"
                label="Model / configuration"
                description="Gantt configuration to render."
            />
            <property name="parentRecordId" type="String" label="Gantt id" />
            <property name="title" type="String" default="Gantt Chart" label="Title" />
            <property name="iconName" type="String" default="standard:chart" label="Icon name" />

            <!-- Timeline -->
            <property
                name="defaultView"
                type="String"
                default="Month"
                label="Default view"
                datasource="Day,Week,Month,Year,Full"
            />
            <property
                name="defaultZoomLevel"
                type="String"
                label="Zoom Level"
                default="100"
                datasource="25,50,100,200"
            />
            <property
                name="displayedTasks"
                type="Integer"
                default="10"
                label="Max displayed tasks (999 = fill available height)"
            />
            <property name="rowHeight" type="Integer" default="40" label="Row height (px)" />
            <property name="slotSize" type="Integer" default="100" label="Slot size (px)" />

            <!-- Behavior -->
            <property name="canSelect" type="Boolean" default="false" label="Enable multi-select" />
            <property name="canReorder" type="Boolean" default="false" label="Enable reorder" />
            <property name="canEdit" type="Boolean" default="false" label="Enable editing" />
            <property name="canDelete" type="Boolean" default="false" label="Enable deletion" />
            <property name="canCreate" type="Boolean" default="true" label="Enable creation" />
            <property name="enableChecklist" type="Boolean" default="false" label="Enable checklist" />
            <property
                name="defaultSchedulingMode"
                type="String"
                default="msproject"
                label="Default scheduling mode"
                datasource="msproject,auto,manual"
            />

            <!-- Data -->
            <property name="taskProps" type="String" label="Gantt configuration JSON" />
            <property name="columns" type="String" label="Tree column configuration JSON" />

            <!-- Work Hours -->
            <property name="showWorkHours" type="Boolean" default="false" label="Show only work hours" />
            <property
                name="hoursPerDay"
                type="Integer"
                default="8"
                label="Hours per day (duration math)"
                min="1"
                max="24"
            />
            <property name="workHours" type="String" label="Work hours, e.g. 08:30-12:30,13:30-17:30" />
            <property name="canExport" type="Boolean" default="true" label="Allow export" />
            <property name="canManageBaselines" type="Boolean" default="true" label="Allow baselines" />
            <property name="canManageWorkload" type="Boolean" default="true" label="Allow workload" />
            <property name="canToggleFullscreen" type="Boolean" default="true" label="Allow fullscreen" />
            <property name="freezeCompletedTasks" type="Boolean" default="true" label="Freeze completed tasks" />
            <property
                name="workDayStart"
                type="Integer"
                label="Work day start (deprecated — use Work hours)"
                min="1"
                max="24"
            />
            <property
                name="workDayEnd"
                type="Integer"
                label="Work day end (deprecated — use Work hours)"
                min="1"
                max="24"
            />
            <property name="hourSpan" type="Integer" default="1" label="Hour span" max="12" />
            <property name="workWeekStart" type="Integer" default="1" label="Work week start" />
            <property name="workWeekEnd" type="Integer" default="5" label="Work week end" />
            <property name="firstDayOfWeek" type="Integer" default="1" label="First day of week" />

            <!-- Panel Layout -->
            <property name="listPanelOpen" type="Boolean" default="false" label="List panel open by default" />
            <property name="editorPanelOpen" type="Boolean" default="false" label="Editor panel open by default" />
            <property
                name="listPanelWidth"
                type="Integer"
                default="50"
                max="100"
                label="Default list panel width (%)"
            />
            <property
                name="editorPanelWidth"
                type="Integer"
                default="30"
                max="100"
                label="Default editor panel width (%)"
            />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
```

{% endcode %}
{% endtab %}
{% endtabs %}