GM - Gantt Chart

Documentation

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.

Specification

Property	Type	Description
Gantt Id	String	Identifier for the Gantt chart parent record.
Icon name	String	Icon displayed for the Gantt chart, You can get the icon name from https://lightningdesignsystem.com/icons/
Title	String	Title displayed at the top of the Gantt chart.
Can select	Boolean	Determines if tasks can be selected in the chart.
Can reorder	Boolean	Indicates if tasks can be reordered by user interaction.
Can edit	Boolean	Indicates if tasks can be edited directly in the chart.
Columns	String	Configuration for the columns displayed in the chart.
Relation config	String	JSON configuration that defines the data modal for the Gantt Chart. JSON string configuration
Show only work hours	Boolean	Option to show only defined work hours in the chart.
Work day start	Integer	Hour at which the workday starts (1-24).
Work day end	Integer	Hour at which the workday ends (1-24).
Hour span	Integer	The time interval that defines a task slot’s length and the step size for moving tasks on the timeline (max 12h).
Work week start	Integer	The day the workweek starts, default is 1 (Monday).
Work week end	Integer	The day the workweek ends, default is 5 (Friday).
First day of week	Integer	Representation of the first day of the week (1-7).
Default displayed tasks	Integer	The number of tasks displayed by default.
Slot size	Integer	Width of each task slot in pixels.
Row height	Integer	Height of each row in pixels.
Left panel width (%)	Integer	Width of the left panel as a percentage of total width, up to 100%.
Right panel width (%)	Integer	Width of the right panel as a percentage of total width, up to 100%.
Default view	String	Initial view setting, e.g., “month” for monthly view.

API Reference

ganttChartLwc.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>64.0</apiVersion>
    <masterLabel>GM - Gantt Chart</masterLabel>
    <isExposed>true</isExposed>
    <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">
            <property name="parentRecordId" type="String" default="" label="Gantt id" />
            <property name="iconName" type="String" default="standard:chart" label="Icon name" />
            <property name="title" type="String" default="Gantt chart" label="Title" />
            <property name="canSelect" type="Boolean" default="false" label="Can select" />
            <property name="canReorder" type="Boolean" default="false" label="Can reorder" />
            <property name="canEdit" type="Boolean" default="false" label="Can edit" />
            <property name="columns" type="String" default="" label="Columns" />
            <property name="taskProps" type="String" label="Relation config" />
            <property name="showWorkHours" type="Boolean" default="false" label="Show only work hours" />
            <property name="workDayStart" type="Integer" default="8" label="Work day start" min="1" max="24" />
            <property name="workDayEnd" type="Integer" default="17" label="Work day end" 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="displayedTasks" type="Integer" default="10" label="Default displayed tasks" />
            <property name="slotSize" type="Integer" default="200" label="Slot size" />
            <property name="rowHeight" type="Integer" default="40" label="Row height" />
            <property name="listPanelWidth" type="Integer" default="40" label="Left panel width (%)" max="100" />
            <property name="editorPanelWidth" type="Integer" default="30" label="Right panel width (%)" max="100" />
            <property name="defaultView" type="String" default="month" label="default view" />
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>

        <targetConfig targets="lightningCommunity__Default">
            <property name="parentRecordId" type="String" default="" label="Gantt id" />
            <property name="iconName" type="String" default="standard:chart" label="Icon name" />
            <property name="title" type="String" default="Gantt chart" label="Title" />
            <property name="canSelect" type="Boolean" default="false" label="Can select" />
            <property name="canReorder" type="Boolean" default="false" label="Can reorder" />
            <property name="canEdit" type="Boolean" default="false" label="Can edit" />
            <property name="columns" type="String" default="" label="Columns" />
            <property name="taskProps" type="String" label="Relation config" />
            <property name="showWorkHours" type="Boolean" default="false" label="Show only work hours" />
            <property name="workDayStart" type="Integer" default="8" label="Work day start" min="1" max="24" />
            <property name="workDayEnd" type="Integer" default="17" label="Work day end" 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="displayedTasks" type="Integer" default="10" label="Default displayed tasks" />
            <property name="slotSize" type="Integer" default="200" label="Slot size" />
            <property name="rowHeight" type="Integer" default="40" label="Row height" />
            <property name="listPanelWidth" type="Integer" default="40" label="Left panel width (%)" max="100" />
            <property name="editorPanelWidth" type="Integer" default="30" label="Right panel width (%)" max="100" />
            <property name="defaultView" type="String" default="month" label="default view" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>