GanttChart — Smart UI JavaScript API

GanttChart — Smart UI JavaScript API

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>GanttChart - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-gantt-chart id="demo-ganttchart"></smart-gantt-chart>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.ganttchart.js';

    const el = document.getElementById('demo-ganttchart');
    if (el) {

      el.durationUnit = 'hour';
      el.taskColumns = [{ label: 'Task', value: 'label', size: '60%' }, { label: 'Duration', value: 'duration' }];
      el.dataSource = [{ label: 'Design', dateStart: '2026-01-10', dateEnd: '2026-01-15', type: 'task' }, { label: 'Development', dateStart: '2026-01-16', dateEnd: '2026-01-30', type: 'task' }, { label: 'Testing', dateStart: '2026-02-01', dateEnd: '2026-02-08', type: 'task' }];

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: GanttChart   Framework: JavaScript   Selector: smart-gantt-chart

API counts: 97 properties, 60 methods, 29 events

Common properties: adjustToNonworkingTime, autoSchedule, autoScheduleStrictMode, autoScrollStep, columnMenu, columnResize

Common methods: addFilter(), clearFilters(), clearSort(), clearSelection(), clearState(), clearTasks()

Common events: beginUpdate, endUpdate, connectionStart, connectionEnd, change, columnResize

Module hint: smart-webcomponents/source/modules/smart.ganttchart.js

Gantt charts are specialized bar charts that help clearly represent how tasks and resources are allocated over time in planning, project management, and scheduling applications.

Class

GanttChart

GanttChart

Gantt charts are specialized bar charts that help clearly represent how tasks and resources are allocated over time in planning, project management, and scheduling applications.

Selector

smart-gantt-chart

Quick picks

changedataSourcedisableddragEnddurationUnitrefreshtaskColumnsview

Properties

AadjustToNonworkingTimeSpecifies whether nonworkingDays and nonworkingHours should be considered when calculating the dateEnd of tasks. When enabled, dateEnd is determined based only on actual working time, excluding periods defined as nonworking. If disabled (the default behavior), dateEnd is calculated using continuous calendar time, without regard for nonworking periods.
AautoScheduleAutomatically recalculates and updates the scheduling of tasks based on their defined connections and dependencies. When tasks are linked (for example, via finish-to-start or start-to-start relationships), this process adjusts their start and end dates to maintain the intended order and constraints. If a task has no connections to other tasks, autoScheduling will not alter its dates until a new connection is established. The type of connection between tasks dictates how their possible start and end dates are constrained relative to each other.
AautoScheduleStrictModeThis setting only impacts tasks when autoSchedule is enabled. When set to true, tasks are automatically and strictly scheduled based on their defined dependencies (connections), and users will not be able to manually drag tasks to reschedule them.Additionally, users can specify a lag value for individual task connections. The lag attribute represents the delay or overlap (specified in milliseconds) between the start or end times of two connected tasks. By configuring the lag property within each task connection in the dataSource, you can control the timing interval between dependent tasks.
AautoScrollStepSpecifies the speed at which the content scrolls when dragging an item and the autoScroll property is enabled. Increasing this value results in faster scrolling while dragging near the container's edge.
CcolumnMenuControls whether the column header menu is enabled or disabled. When enabled, hovering over a column header displays a dropdown button that opens a menu with quick actions such as sorting, filtering, and other column-specific operations. The available actions in this menu are context-sensitive and depend on which Gantt features are enabled; for example, the filtering option will be shown only if filtering is enabled for the corresponding column.
CcolumnResizeSpecifies whether the Table columns can be resized by the user. When enabled, users can adjust the width of each column directly from the table’s header cells in both the Task and Resource timelines. This allows for greater flexibility in customizing the Table’s appearance to better fit the displayed data.
CcolumnResizeFeedbackControls whether visual resize feedback is displayed while adjusting column width. This property is effective only when the columnResize feature is enabled. If set to true, users will see a preview of the new column size as they drag to resize; if set to false, no visual feedback will be shown during the resizing action.
CcriticalPathEnables or disables the visualization of the project’s Critical Path. When set to true, the Gantt chart highlights tasks that directly affect the project's total duration. The Critical Path represents the sequence of dependent tasks that cannot be delayed without delaying the overall project completion.
CcurrentTimeRepresents the current time indicator on the Gantt chart. By default, this value is set to today’s date, highlighting the present day on the timeline.
CcurrentTimeIndicatorControls the visibility of the current time indicator within the scheduling view. When enabled, a highlighted marker or line is displayed across the relevant time slots or cells to indicate the current system time, helping users easily identify the present moment within the schedule or calendar interface. Disabling this option hides the indicator from view.
CcurrentTimeIndicatorIntervalSpecifies how often, in seconds, the currentTimeIndicator is refreshed or updated. A lower value results in more frequent updates, while a higher value reduces the update rate, potentially improving performance.
DdataExportConfigures the data export settings for the GanttChart, allowing customization of how chart data is exported (e.g., format, included fields, file name, and export behavior). Click for more details. Property object's options:
  • exportFiltered:boolean - Specifies whether items that have been filtered out should be included in the export. By default, only unfiltered data is exported; filtered (excluded) items are not included in the export unless this option is enabled.
  • fileName:string - Specifies the name of the file that will be generated and saved when the export operation is completed.
  • itemType:string - Specifies the category or format of items to be exported. This property defines what kind of data or objects will be included in the export process, helping to ensure the correct handling and organization of exported content.
DdataSourceDetermines the set of tasks to be displayed within the Timeline. The value must be an array of objects, where each object represents a single task and includes both required and optional properties that define its behavior and appearance. Required Task Properties: label – A string value representing the name or description of the task. dateStart – The task’s start date as a string in a valid date format (e.g., 'YYYY-MM-DD'). dateEnd – The task’s end date as a string in a valid date format. type – Specifies the type of the task. Accepts one of: task (standard activity), project (parent grouping of subtasks), or milestone (key event). Each type may have type-specific behaviors and allowed attributes. Optional Task Properties: connections – An array of objects defining dependencies between tasks. Each connection object requires: target – An integer specifying the zero-based index of the target task in the main tasks array. type – An integer (0–3) indicating the type of dependency: 0 – Start-to-Start 1 – End-to-Start 2 – End-to-End 3 – Start-to-End lag – A number denoting delay (positive) or overlap (negative) between auto-scheduled tasks, in applicable time units. Used in conjunction with autoSchedule. duration – Describes how long the task lasts (e.g., "3d", "4h", "15m"). Useful when dateEnd is unknown or not specified. Duration always represents total calendar time. minDuration / maxDuration – Set minimum or maximum allowed duration for the task. minDateStart / maxDateStart – Define earliest/latest allowed start dates, as strings in valid date formats. minDateEnd / maxDateEnd – Define earliest/latest allowed end dates, as strings in valid date formats. progress – A number from 0 to 100 indicating the percentage of work completed. overdue – A boolean that is true if the task’s dateEnd has passed its deadline. disableDrag – Boolean. If true, users cannot drag (move) the task on the timeline. disableResize – Boolean. If true, users cannot resize the duration of the task on the timeline. dragProject – Boolean. If true, allows the entire project (including all subtasks) to be dragged when the project parent task is dragged. Applicable only to project tasks. segments – An array of objects allowing a task to be split into multiple segments with different properties (such as distinct start dates, labels, or durations). synchronized – Boolean. If true, a project’s start and end dates are calculated automatically based on its child tasks, and cannot be moved independently. Applicable only to project tasks. expanded – Boolean. Determines if a project’s subtasks are visible (expanded). If false, only the project summary bar is displayed. By default, projects are collapsed. Applicable only to project tasks. The GanttChart component can also accept a DataAdapter instance as its data source for flexible data integration. For more details, see the DataAdapter documentation: https://www.htmlelements.com/docs/data-adapter/. Click for more details. Property object's options:
    DdateEndSpecifies a custom end date for the Timeline. This is useful when the user wants to define a specific end point for the Timeline, overriding the automatic calculation based on task completion dates. If no end date is provided, the Timeline will automatically use the latest end date from the existing tasks.
    DdateMarkersSpecifies the date markers to be shown within the timeline of the GanttChart component. Date markers highlight and optionally label particular dates and times directly on the Gantt chart, providing visual cues or annotations for significant milestones, deadlines, or events within the project's schedule. Click for more details. Property object's options:
    • label:string | null - Determines the marker label.
    • date:string | date | number - Determines the date for the marker. The date can include time as well.
    • className:string? - Allows to add a custom class name to the marker.
    DdateStartSpecifies a custom starting date for the Timeline. This option is useful when you want the Timeline to begin on a specific date, rather than relying on the earliest start date of the tasks. If a starting date is not provided, the Timeline will automatically use the start date from the first scheduled task.
    DdayFormatSpecifies the display format for dates in the timeline header when the timeline is showing individual days. This setting controls how each day's date is presented (e.g., "MM/DD/YYYY", "Monday, Jan 1", etc.), ensuring that day labels in the header are clear and consistent with your application's requirements.
    DdisableAutoScrollPrevents the timeline from automatically scrolling when a task bar is being dragged or resized. This means the viewport will remain stationary during these actions, requiring the user to manually scroll if they wish to view other parts of the timeline.
    DdisabledSpecifies whether the element is interactive and can be used by the user. When enabled, the element responds to user input; when disabled, the element appears inactive and does not accept user interactions.
    DdisableSegmentDragPrevents users from dragging and repositioning individual task segments within the interface. When this option is enabled, task segments remain fixed in place and cannot be moved through drag-and-drop actions.
    DdisableSegmentResizePrevents users from changing the size of the task segment. When this option is enabled, the task segment cannot be resized or adjusted, ensuring its dimensions remain fixed.
    DdisableSelectionPrevents users from selecting tasks, milestones, or any other elements within the GanttChart, effectively disabling all selection interactions and highlighting within the chart area.
    DdisableTaskDragPrevents users from clicking and dragging tasks to reschedule or move them within the Timeline view. Tasks remain fixed in their current positions and cannot be repositioned through drag-and-drop actions.
    DdisableTaskProgressChangePrevents users from modifying or updating task progress values within the Timeline view. Task progress indicators will be displayed as read-only and cannot be adjusted through the Timeline interface.
    DdisableTaskResizePrevents users from adjusting the start or end dates of tasks directly within the Timeline by disabling the resize handles on tasks.
    DdisableWindowEditorPrevents the window editor from opening or being used within the GanttChart component, thereby disabling any ability for users to add, edit, or configure tasks through the graphical window interface. This setting ensures that all task modifications must be handled through alternative methods, such as programmatic updates or external forms.
    DdurationUnitSpecifies the unit of measurement (such as seconds, minutes, hours, or days) used for the task's duration property. This defines how the duration value should be interpreted and ensures consistent handling of time-related data across the application.
    FfilterRowSpecifies whether a dedicated filter row should be displayed within the table for filtering purposes, replacing the default inline filter input. When enabled, each column in the table will provide its own filter input within a separate filter row. This property is only applicable if the filtering option is enabled; otherwise, it will have no effect.
    FfirstDayOfWeekSpecifies which day of the week the calendar view should start on. The value is a number from 0 to 6, where 0 represents Sunday, 1 represents Monday, and 6 represents Saturday. The default value is 0 (Sunday). Adjusting this setting allows you to control the first day displayed in the weekly or monthly calendar view.
    GgroupByResourcesOrganizes tasks within the Task timeline by grouping them based on their assigned resources. Each resource receives its own group containing all tasks allocated to it. Tasks that have not been assigned to any resource are automatically placed in a separate group labeled "Unassigned" for easy identification.
    HheaderTemplateEnables you to define custom header content for the Task Panel. The attribute accepts either an HTMLTemplate element, the id of an existing HTMLTemplate, or a function that returns the desired content. This provides flexibility to use static templates or generate dynamic header content programmatically.
    HhideDateMarkersSpecifies whether the dateMarkers are displayed on the interface. When set to true, the date markers will be visible; when set to false, they will be hidden.
    HhideResourcePanelControls the visibility of the Resource panel in the GanttChart component. By default, the Resource panel is displayed automatically when resources are added to the GanttChart. Enabling this property will permanently hide the Resource panel, regardless of whether resources are present or not. This allows developers to prevent the Resource panel from appearing under any circumstances.
    HhideTimelineHeaderBy default, the Timeline component displays a three-level header structure: the top section shows primary timeline details, the middle section displays secondary details, and the bottom section contains the main timeline header. This property allows you to hide the header container, which refers specifically to the bottom section of the header.
    HhideTimelineHeaderDetailsBy default, the Timeline component displays a three-level header structure: the main timeline details (topmost header), secondary timeline details (middle header), and the primary timeline header (bottom header). This property allows you to hide the topmost container, which holds the main timeline details, effectively removing the first (outermost) header section from the Timeline display.
    HhideTimelineSecondHeaderDetailsBy default, the Timeline component displays a three-level header structure: the main timeline header, a secondary header with additional details, and a primary details section. This property specifically controls the visibility of the second (middle) header, which contains supplementary timeline details. When enabled, the secondary details container will be hidden, resulting in a simplified two-level header layout.
    HhorizontalScrollBarVisibilitySpecifies whether the horizontal scrollbar is visible, allowing users to scroll content horizontally when it exceeds the container’s width.
    HhourFormatSpecifies the display format for dates shown as hours within the timeline header, controlling how hour values (e.g., "14:00", "2 PM", "14h") are presented to users. This setting ensures that the hour labels in the timeline header are formatted consistently according to your application's requirements.
    IinfiniteTimelineWhen this option is enabled, reaching the end of the horizontal timeline through scrolling will dynamically generate additional timeline cells, effectively extending the visible time range. The exact number of new cells added each time the scrollbar reaches the end is specified by the infiniteTimelineStep setting. This allows for an "infinite scrolling" experience, where more timeline segments are loaded as the user scrolls horizontally.
    IinfiniteTimelineStepSpecifies how many new cells should be dynamically loaded and added to the Timeline when the user scrolls horizontally to the end, provided that infiniteTimeline is enabled. This controls the batch size of additional timeline cells appended each time the end of the scrollable area is reached.
    IinvertedWhen enabled, this setting displays the Timeline component on the left side of the interface and the Task Tree on the right side. By default, the layout is reversed: the Task Tree appears on the left and the Timeline on the right.
    KkeyboardNavigationControls whether users can navigate within the Table using the keyboard. When enabled, keyboard navigation applies to both the Task and Resource Tables, allowing users to move between table items using the keyboard.For the Task Table, the following keyboard shortcuts are available when a task is focused: Enter – Opens the Window editor, allowing you to edit the currently focused task. Delete – Opens a confirmation dialog to confirm the deletion of the currently focused task.Enabling this option improves accessibility and streamlines user interactions for both Task and Resource management within the Table.
    LlocaleSpecifies the language used for the GanttChart interface, including labels, tooltips, and other user-facing text elements.
    MmaxDetermines the latest allowable date that can be displayed or selected on the Timeline, effectively setting the upper limit for date values within the component.
    MmessagesDefines or retrieves an object containing customizable strings used within the widget's interface for localization purposes. This object allows developers to provide translated or adapted text for various UI elements, ensuring the widget can support multiple languages and regions. It is typically used in combination with the locale property to display content in the desired language.
    MminSpecifies the earliest allowable date that can be selected or displayed on the Timeline, effectively setting the lower date limit.
    MmonthFormatSpecifies the date format used for displaying months in the timeline header. This setting defines how month values appear, such as "Jan 2024" or "01/2024", ensuring consistent and customizable presentation of months within the timeline.
    MmonthScaleSpecifies the time interval granularity displayed in the Month view, such as whether events are shown by week, day, or custom periods. This setting adjusts how dates and events are grouped and visualized within the Month view of the calendar.
    NnonworkingDaysSpecifies which days of the week, represented by integers from 0 to 6 (where 0 indicates the first day of the week and 6 indicates the last), are considered nonworking days. These selected nonworking days are visually highlighted with colored cells within the timeline display. By default, nonworking days do not influence the task end dates (dateEnd). However, if the adjustToNonworkingTime property is enabled, task scheduling will automatically adjust to account for nonworking days when calculating end dates.
    NnonworkingHoursSpecifies which hours of the day are considered nonworking. The nonworking hours are defined using an array that can contain individual hour numbers (e.g., [1, 2, 3] represents 1 AM, 2 AM, and 3 AM as nonworking hours) and/or nested arrays to indicate continuous ranges (e.g., [[0, 6]] represents all hours from 12:00 AM to 6:00 AM inclusive as nonworking hours).In the timeline view, cells corresponding to nonworking hours are visually distinguished (typically with a different color), helping users easily identify unavailable time slots. By default, these nonworking hours do not influence the calculation of a task’s end date (dateEnd). However, if the adjustToNonworkingTime property is enabled, the scheduler will automatically adjust tasks to skip or extend around nonworking hours.
    OonTaskRenderThis function enables complete customization of the task element within your interface. It accepts five arguments, providing granular control over both the task and its visual representation:1. 'task' – The full task object containing all associated data.2. 'segment' – The current segment object for the task. If the task consists of a single segment, this argument will be the same as the task object.3. 'taskElement' – The root HTML element representing the task in the DOM.4. 'segmentElement' – The HTML element representing the current segment of the task.5. 'labelElement' – The HTML element that displays the segment’s label.You can use these arguments to modify the appearance, content, and behavior of the task and its segments, allowing for advanced UI customizations tailored to different application needs.
    PpagingDetermines whether paging functionality is enabled. When set to true, data is divided into discrete pages for easier navigation and viewing; when false, all data is displayed in a single, continuous view. You can use this property to enable or disable paging, or retrieve its current state.
    PpopupWindowCustomizationFunctionA function that allows complete customization of the popup window used for task interactions by modifying its properties before it is displayed. The function receives three arguments: target — The popup window instance that is about to be opened. You can use this parameter to modify visual aspects (such as size, title, buttons, and content) or add custom behavior. type — Specifies the purpose of the popup window. Possible values are: 'task': For editing or viewing a task. 'confirm': For displaying a confirmation prompt. 'connection': For actions related to connections between tasks (e.g., deleting a link). item — The data object associated with the popup window. This will be the current task (for 'task' and 'confirm' types) or the specific connection object (for the 'connection' type). Use this function to dynamically personalize the popup window’s content, appearance, or logic based on the context of the action being performed.
    PpopupWindowTabsSpecifies which tab sections are displayed within the popup window. This property accepts the following three values: general – Displays the General tab, which shows the main properties of the task as defined by the taskColumns property. dependency – Displays the Dependency tab, where users can view, add, or remove connections (dependencies) related to the current task. segments – Displays the Segments tab, where users can view, create, or delete segments that make up the task. Use these values to control which tabs are visible to users in the popup window interface. Multiple values can be specified to show more than one tab.
    PprogressLabelFormatFunctionThis property accepts a formatting function for the progress label displayed on the Timeline task. The function should return a string representing the desired label text. By default, the progress label is hidden; it can be made visible by setting the showProgressLabel property to true.
    QquarterFormatSpecifies the date format used to display quarter representations (e.g., "Q1 2024") in the timeline header. This setting controls how quarter periods are labeled, ensuring consistency and clarity in the timeline’s visual presentation.
    RresourceColumnsDetermines which columns are displayed in the Resource Tree. Each entry in this property should be an Object containing the following keys:- label: Specifies the column header text as it will appear in the Task Tree.- value: Defines the property or content to be displayed in the cells of that column.By default, a single column displays all resource labels. You can configure additional columns by adding objects with custom label and value pairs.Additional configurable properties for each column object include: formatFunction: A callback function that allows customization of the cell content for the column. This function receives two arguments: the label text (as a string) and the index of the resource. It should return a string, which will be used as the displayed cell content. min: Sets the minimum width (in pixels or another supported unit) for the column. max: Sets the maximum width for the column. size: Specifies the fixed width for the column.Use this configuration to tailor which resource attributes appear as columns in the Resource Tree and how they are displayed. Click for more details. Property object's options:
    • label:string | null - Column's label.
    • value:string | null - Column's value. The value shold reference an actual resoruce attribute.
    • min:string | number | null - Column's min size.
    • size:string | number | null - Column's size.
    • formatFunction:any - Column's format function. You can use it to customize the column label's rendering.
    RresourceFilteringSpecifies whether the Resource Table supports filtering functionality, allowing users to narrow down and display specific data based on filter criteria. If set to true, filters can be applied to the Resource Table; if false, filtering options will be disabled.
    RresourceGroupFormatFunctionA format function that enables you to customize the display of group row labels when the groupByResources option is enabled. This function allows for dynamic re-formatting of group headers, so you can control how resource names or other grouping information appear in the UI.
    RresourcePanelHeaderTemplateEnables you to define a custom header for the Resource Panel by specifying the content through one of the following options: an HTMLTemplate element, the ID of an existing template, or a function that returns the desired HTML. This allows for flexible and dynamic header customization to fit your application's needs.
    RresourcePanelMinSpecifies the minimum allowable size (in pixels) for the Resource Panel, ensuring that users cannot resize the panel below this value. This setting helps maintain usability and proper display of the panel's content.
    RresourcePanelRefreshRateControls how frequently the Resource Panel updates when a task is dragged, resized, or its progress is changed on the Timeline. By setting this property, you can customize the interval (in milliseconds) between automatic refreshes of the resource Tree and Timeline during these interactions. By default, the Resource Panel refreshes instantly after each change, but adjusting this value can help optimize performance for complex project schedules or large datasets.
    RresourcePanelSizeSpecifies the dimensions (width and/or height) of the Resource Panel, controlling how much space it occupies within the user interface. Adjusting this value directly affects the visible area available for displaying resource-related content.
    RresourcesReturns an array containing a flat list of all resource objects found within the element, including those nested at any level. This getter traverses the element's hierarchy and aggregates all resources into a single, non-nested array for simplified access. Click for more details. Property object's options:
    • class:string - Resource class. Used to style the resource Timeline.
    • capacity:number - The capacity of a resource. By default it is used to determine the working capacity ( in hours ) of the resource.
    • hidden:boolean | undefined - Resource visibility.
    • id:string - Resource id. The unique id of the resource.
    • label:string | null - Resource label.
    • minCapacity:number - Resource min capacity
    • maxCapacity:number - Resource max capacity. By default this property is used for the resource timeline histogram where maxCapacity is the maximum working capacity in hours of the resource.
    • progress:number - Resource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.
    • type:any - Resource type.
    • value:any - Resource value.
    • workload:string | number - Resource workload. Workload is the total working time in hours of a resource based on the tasks it is assigned to. This property is automatically calculated.
    RresourceTimelineFormatFunctionA callback function that allows you to fully control and customize the content displayed in the cells of the resource timeline. The callback receives three parameters: taskIndexes – An array containing the indexes of the tasks assigned to the current resource in this cell. resourceIndex – The index representing the current resource row. cellDate – A Date object or date string representing the current cell’s date.This property is specifically used when the resourceTimelineView is set to custom. The expected return value depends on the value of resourceTimelineMode: diagram – Return a string that will be rendered as the cell’s content. histogram – Return an object with the following properties: capacity: The current value to be visualized for the cell. maxCapacity: The maximum value for the histogram, used to determine the cell visualization’s scale. custom – (Optional) You may return any custom content for the timeline cell, giving you full flexibility to represent resources however you wish.Use this callback to tailor the timeline’s resource cell display—such as showing aggregated values, custom HTML, or visualizations—according to your application’s requirements.
    RresourceTimelineModeSpecifies the method used to display the resource's capacity within the resource timeline. By default, the capacity is shown in hours, but this may vary depending on the value of the element’s view property. This setting controls how capacity data is visually represented for each resource, ensuring that users see capacity information in a format appropriate to the current timeline view (such as hours, days, or custom intervals).
    RresourceTimelineViewSpecifies the layout and presentation of resources within the resource Timeline, controlling how individual resources are visually arranged, organized, and grouped for optimal clarity and user experience.
    RrightToLeftGets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and UI elements in a right-to-left orientation, ensuring proper localization for RTL locales.
    SselectedResourceIdsSets which resources to select by their id or gets the currently selected resource ids. If no id is provided for the resource, an internal id is generated for each resource according to it's index(tree path)."---'Improved Version:'Specifies which resources should be selected by providing their unique IDs, or retrieves the list of currently selected resource IDs. If a resource does not have a user-defined ID, the system automatically generates an internal ID for each resource based on its position within the resource hierarchy (tree path or index). This ensures that every resource can be uniquely identified, even if explicit IDs are not assigned.
    SselectedTaskIds"Allows you to specify which tasks are selected by providing their unique task IDs, or retrieve the IDs of the currently selected tasks. If a task does not already have an ID, the system automatically generates an internal ID for it based on its position in the task hierarchy (using its index or tree path)."
    SselectionModeDefines or retrieves the selection mode for the component. This property is relevant only when the selection feature is enabled. It determines how users can select items (e.g., single, multiple), and has no effect if selection is disabled.
    SshadeUntilCurrentTimeControls whether the current time shader is active. When enabled, all cells corresponding to past time periods will be visually shaded to distinguish them from present and future time slots. Disabling this option will display all cells without any time-based shading.
    SshowBaselineControls the visibility of task baselines in the interface. Baselines represent the original planned schedule of tasks and are specified using the 'planned' attribute on each task object within the dataSource property. When this option is enabled, the baselines will be displayed alongside the actual task data for comparison.
    SshowProgressLabelDisplays a progress label within the progress bars for each Timeline task, providing a clear visual indication of the current completion percentage directly on the corresponding task's bar.
    SshowSelectionColumnDisplays the selection column in the Task or Resource Table. When enabled, a checkbox column appears, allowing users to select individual tasks or resources directly from the table. This feature facilitates bulk actions or easy identification of selected items.
    SsnapToNearestIf enabled, the dateStart and dateEnd values of tasks will be automatically adjusted (coerced) to align with the nearest timeline cell boundary, based on the current timeline view. This setting also affects task positioning during drag-and-drop operations, ensuring that tasks always snap to the closest valid timeline interval when they are moved or resized.
    SsortFunctionEnables you to specify a custom sorting function that will be invoked whenever a column in the table is sorted, allowing you to override the default sorting logic with customized behavior. The custom function receives the following parameters:
      dataSource – The complete array of data objects currently used by the table. sortColumns – An array containing the keys or data fields of the columns that need to be sorted, in the order of user preference or configuration. directions – An array specifying the sort direction ('asc' or 'desc') for each column listed in sortColumns. The direction at each index corresponds to the column at the same index. defaultCompareFunctions – An array of default comparison functions for each column, aligned by index with sortColumns. Use these as fallbacks when only some columns require custom sorting logic.
    By implementing your own sorting function, you can customize the way the table data is ordered—such as sorting complex data structures, handling locale-specific strings, or applying multi-level sorts—while optionally leveraging the provided default comparison functions for columns that do not require special handling.
    SsortModeSpecifies whether the GanttChart allows sorting by a single column, multiple columns, or disallows column sorting entirely. This setting controls the user's ability to organize tasks in the chart by clicking on one or more column headers.
    TtaskColumns'Description'Defines which columns are displayed in the Task Tree. The value of this property should be an array of objects, each describing a column. Each column object must include the following required keys:- label: Specifies the text that will appear as the column header in the Task Tree.- value: Specifies the key of the task attribute from the dataSource to display as the cell content in that column.By default, one column will be shown with all task labels. Additional columns can be configured using this property.'Optional properties for each column object:' formatFunction: A function for customizing the display content of each cell in the column. Receives the final label value (string) and returns the desired rendering (string or element). min: Sets the minimum width of the column (in pixels or CSS units). max: Sets the maximum width of the column (in pixels or CSS units). size: Sets the default (actual) width of the column (in pixels or CSS units). customEditor: A callback for providing a custom editor for the column when editing via a dialog/window. It accepts two arguments: label: The column label. value: The current cell value in the column. The function should return the editor component or element. setCustomEditorValue: A callback used to programmatically set the value of the custom editor. getCustomEditorValue: A callback used to programmatically retrieve the value from the custom editor.This configuration enables fine-grained customization of how task attributes are displayed and edited within each column of the Task Tree. Click for more details. Property object's options:
    • disableEdit:boolean - Determines whether the task propery determined by column can be edited from the Window editor or not. By default editing is enabled.
    • dateFormat:string | object | null - Applies only to column's that display dates (e.g. dateStart/dateEnd, etc). This property allows to define a JS Intl.DateTimeFormat object in order to format the dates of the column. Here is an example value of the property: 
      dateFormat: { year: '2-digit', month: 'long', day: 'numeric' }
      . Another option is to use a date format string. Built-in Date formats:
      // short date pattern
      'd' - 'M/d/yyyy',
      // long date pattern
      'D' - 'dddd, MMMM dd, yyyy',
      // short time pattern
      't' - 'h:mm tt',
      // long time pattern
      'T' - 'h:mm:ss tt',
      // long date, short time pattern
      'f' - 'dddd, MMMM dd, yyyy h:mm tt',
      // long date, long time pattern
      'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',
      // month/day pattern
      'M' - 'MMMM dd',
      // month/year pattern
      'Y' - 'yyyy MMMM',
      // S is a sortable format that does not vary by culture
      'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'

      Date format strings:
      'd'-the day of the month;
      'dd'-the day of the month
      'ddd'-the abbreviated name of the day of the week
      'dddd'- the full name of the day of the week
      'h'-the hour, using a 12-hour clock from 1 to 12
      'hh'-the hour, using a 12-hour clock from 01 to 12

      'H'-the hour, using a 24-hour clock from 0 to 23
      'HH'- the hour, using a 24-hour clock from 00 to 23
      'm'-the minute, from 0 through 59
      'mm'-the minutes,from 00 though59
      'M'- the month, from 1 through 12
      'MM'- the month, from 01 through 12
      'MMM'-the abbreviated name of the month
      'MMMM'-the full name of the month
      's'-the second, from 0 through 59
      'ss'-the second, from 00 through 59
      't'- the first character of the AM/PM designator
      'tt'-the AM/PM designator
      'y'- the year, from 0 to 99
      'yy'- the year, from 00 to 99
      'yyy'-the year, with a minimum of three digits
      'yyyy'-the year as a four-digit number;
      'yyyyy'-the year as a four-digit number.
    • numberFormat:string | object | null - Applies only to column's that display numbers. This property allows to define a JS Intl.NumberFormat object in order to format the numbers of the column. Another option is to use a number format string. Number format strings:
      'd' - decimal numbers.
      'f' - floating-point numbers.
      'n' - integer numbers.
      'c' - currency numbers.
      'p' - percentage numbers.

      For adding decimal places to the numbers, add a number after the formatting stri

      For example: 'c3' displays a number in this format $25.256
    • label:string | null - Column's label.
    • value:string | null - Column's value.
    • size:string | number | null - Column's size.
    • minWidth:string | number | null - Column's min width.
    • formatFunction:any - Column's format function. You can use it to customize the column label's rendering.
    • customEditor:function | undefined | null - A function that allows to set a custom editor for the column's value in the Editor Window. The function must return an HTMLElement. The function has two arguments:
      • name - the name of the task property that is going to be edited.
      • value - the value of the task property that is going to be edited.
      It's also important to define a getCustomEditorValue to return the value from the custom editor.
    • getCustomEditorValue:function | undefined | null - A function that is used in conjunction with customEditor allows to return the value of the custom editor. Since the editor is unknown by the element, this function allows to return the expected result from the editor. It has one argument - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
    • setCustomEditorValue:function | undefined | null - A function that is used in conjunction with customEditor allows to set the value of the custom editor. Since the editor is unknown by the element, this function allows to set the expected value to the editor. It has three arguments -
      • editor - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
      • columnValue - the value property of the column.
      • value - the value of the task property that the column displays(the editor value).
    TtaskFilteringSpecifies whether users can apply filters to the Task Table, allowing them to view only tasks that meet certain criteria. If enabled, filtering options will be available; if disabled, the Task Table will display all tasks without filtering capabilities.
    TtaskFormatFunctionA function that allows you to fully customize the appearance and behavior of each task element. This function receives two parameters: task: The JavaScript object representing the task's data and properties. taskElement: The HTML element corresponding to the task, which you can manipulate or modify as needed.Use this function to add custom styles, event listeners, or additional content to each task element based on its data.
    TtaskPanelMinSpecifies the minimum size of the Task Panel when the Resource Panel is visible. This property ensures that the Task Panel does not shrink below the defined size, maintaining usability and layout integrity when both panels are displayed.
    TtaskPanelSizeSpecifies the dimensions of the Task Panel when the Resource Panel is displayed. This setting controls how much space the Task Panel occupies, ensuring it remains visible and accessible alongside the Resource Panel.
    TtasksA getter method that returns a flattened array containing all task objects nested within the element, regardless of their depth or hierarchical structure. This allows easy access to every task in the element as a single-level array. Click for more details. Property object's options:
    • connections:array - Tasks connection.
      • Property object's options:
      • class:string - Project, Task or Milestone CSS class.
      • dateStart:string | Date - Project, Task or Milestone start date.
      • dateEnd:string | Date - Project, Task or Milestone end date.
      • deadline:string | Date - Determines the deadline for the Project, Task or Milestone.
      • disableResources:boolean - Project, Task or Milestone with disabled resources.
      • disableDrag:boolean - Project, Task or Milestone dragging is disabled.
      • disableResize:boolean - Project, Task or Milestone resizing is disabled.
      • dragProject:boolean - Project, Task or Milestone drag enabled in the view.
      • duration:number | undefined - The duration of the tasks in miliseconds. The duration unit can be changed via the durationUnit property.
      • expanded:boolean - Project, Task or Milestone expanded state in the view.
      • hidden:boolean | undefined - Task visibility.
      • id:string | null - Project, Task or Milestone id.
      • indicators:{label?: string, date: Date | string, className?: string, icon?: string, tooltip?: string }[] - Determines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row.
        • Property object's options:
        • label:string? - Indicator label.
        • date:string | Date - Indicator date(can include time).
        • className:string? - A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.
        • icon:string? - Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.
        • tooltip:string? - Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.
      • label:string | null - Project, Task or Milestone label.
      • formatFunction:any - Project, Task or Milestone format function.
      • onRender:any - Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement.
        • task - the task object.
        • segment - the task current segment object. If the task has only one segment, the task object is passed again.
        • taskElement - the task's html element.
        • segmentElement - the task's segment html element.
        • labelElement - the task's segment label html element.
      • maxDateStart:string | Date - Project, Task or Milestone max start date.
      • minDateStart:string | Date - Project, Task or Milestone min start date.
      • maxDateEnd:string | Date - Project, Task or Milestone max end date.
      • minDateEnd:string | Date - Project, Task or Milestone min end date.
      • minDuration:number | undefined - The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.
      • maxDuration:number | undefined - The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.
      • overdue:boolean - Determines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.
      • planned:{ dateStart: date | string | number, dateEnd: date | string | number, duration?: number } - Determines the planned dateStart/dateEnd for as the baseline for the task.
        • Property object's options:
        • dateStart:string | Date - Determines the planned dateStart of the task.
        • dateEnd:string | Date - Determines the planned dateEnd of the task.
        • duration:number | undefined - Determines the planned duration of the task.
      • progress:number - Project, Task or Milestone progress.
      • resources:array - Project, Task or Milestone resources.
        • Property object's options:
        • segments:{label: string, dateStart: date | string , dateEnd: date | string, disableDrag?: boolean, disableResize?: boolean, duration?: number | null, formatFunction?: any }[] - Determines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task.
          • Property object's options:
          • label:string | null - Segment label.
          • dateStart:string | Date - Segment start date.
          • dateEnd:string | Date - Segment end date.
          • disableDrag:boolean - Determines whether segment dragging is disabled.
          • disableResize:boolean - Determines whether segment resizing is disabled.
          • duration:number | undefined - The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.
          • formatFunction:any - Segment label format function.
        • synchronized:boolean - Project, Task or Milestone synchronized in the view.
        • tasks:array - Project's tasks. Only projects can have tasks.
        • type:string - Project, Task or Milestone type. Possible values are 'project', 'milestone' and 'task'
        • value:any - Project, Task or Milestone value.
        TthemeSpecifies or retrieves the visual theme applied to the element, controlling its overall appearance and styling (such as colors, backgrounds, and typography) according to predefined theme options.
        TtimelineHeaderFormatFunctionA custom formatting function for the Timeline header, allowing you to control how each date cell in the header is displayed. The function receives the following arguments: date (Date): The JavaScript Date object representing the date associated with the current header cell. type (string): A string indicating the granularity of the header cell, such as 'month', 'week', 'day', etc., specifying what period the cell represents. isHeaderDetails (boolean): A boolean value specifying whether the cell is part of the detailed header section (typically used for secondary or sub-header rows) or part of the main header row. value (string): The default formatted label for the cell, as generated by the timeline component, which you may use or modify in your custom output.Use this function to return a custom string (or JSX/HTML element, depending on context) for each header cell, enabling advanced formatting of date headers in the timeline view.
        TtimelineMinSpecifies the minimum width, in pixels, that the timeline component can be resized or displayed at. This ensures that the timeline will not shrink below the defined width, maintaining usability and proper layout.
        TtooltipControls the visibility of tooltips throughout the application. When enabled, informative tooltips will appear for timeline tasks, resources, connections, indicators, and segments, providing users with additional context and details about each element. Disabling this option will hide all tooltips in these areas. Click for more details. Property object's options:
        • arrow:boolean - Specifies whether an arrow should be displayed on the tooltip, indicating its point of attachment to the target element. If set to true, the tooltip will render an arrow; if false, the tooltip will appear without an arrow.
        • delay:number - Specifies the amount of time, in milliseconds, to wait before displaying the tooltip after a triggering event (such as mouse hover or focus).
        • enabled:boolean - Determines whether tooltips are displayed. When enabled, informative tooltips will appear to provide additional context or guidance to users; when disabled, tooltips will not be shown.
        • offset:number[] - Specifies the offset values, in pixels, to adjust the tooltip's position when it is displayed. The array follows the format [horizontalOffset, verticalOffset], where 'horizontalOffset' shifts the tooltip left or right, and 'verticalOffset' shifts it up or down relative to its default position.
        TtooltipFormatFunctionA function that enables full customization of the tooltip's appearance and behavior. This function accepts three arguments:- tooltipObject: The tooltip instance, containing all relevant data and methods for manipulating the tooltip.- event: The event object that triggered the tooltip display, useful for accessing event-specific information (e.g., cursor position).- content: The DOM element representing the tooltip’s label, which can be modified to display custom HTML, styles, or dynamic content.
        TtreeMinSpecifies the minimum width (in pixels) that the task table can be resized to, ensuring the table does not become narrower than this value. This helps maintain readability and layout consistency.
        TtreeSizeSpecifies the width of the task table, controlling how much horizontal space it occupies within its container. Adjust this value to set the overall size of the table and ensure proper display and alignment within your layout.
        UunfocusableDetermines whether the element can receive keyboard focus. When set to true, the element becomes focusable and can be navigated to using the Tab key or programmatically via JavaScript. When accessed, returns a boolean indicating the current focusability state of the element.
        UunlockKeySets or retrieves the unlockKey, a unique value required to unlock and access the full features of the product. Use this property to assign an unlock key for activation or to obtain the currently set unlock key.
        VverticalScrollBarVisibilitySpecifies whether the vertical scrollbar is displayed, allowing the user to scroll content vertically when necessary.
        VviewSpecifies the date range displayed on the timeline. Accepted values include:day: The timeline displays all hours within a single day, allowing for detailed, intraday scheduling and review.week: The timeline presents each day within a single week, providing a broader weekly overview.month: The timeline shows individual days across an entire month, making it easy to view and manage monthly schedules.year: The timeline displays each month of the year, providing a high-level annual perspective.resource: The timeline groups and displays current tasks by the resources assigned to them. Tasks without an assigned resource are grouped under a special "Unassigned" category for easy identification.The timeline features a header section that labels each cell according to its corresponding date or resource. This header is divided into two tiers (for example, months and days, or days and hours) to provide both summary and detailed information, enhancing clarity and context for users navigating the timeline.
        WweekFormatSpecifies the display format for dates in the timeline header when the timeline view is set to show weeks. This setting controls how each week's date range or label appears, allowing customization of the week header’s date representation.
        YyearFormatSpecifies the display format for dates in the timeline header when they represent years. This setting controls how years are presented (e.g., "2024", "’24", or "Year 2024") to ensure consistency and clarity in the timeline header’s date representation.
        dataExport.exportFiltered
        dataExport.fileName
        dataExport.itemType
        dateMarkers.className
        dateMarkers.date
        dateMarkers.label
        resourceColumns.formatFunction
        resourceColumns.label
        resourceColumns.min
        resourceColumns.size
        resourceColumns.value
        resources.capacity
        resources.class
        resources.hidden
        resources.id
        resources.label
        resources.maxCapacity
        resources.minCapacity
        resources.progress
        resources.type
        resources.value
        resources.workload
        taskColumns.customEditor
        taskColumns.dateFormat
        taskColumns.disableEdit
        taskColumns.formatFunction
        taskColumns.getCustomEditorValue
        taskColumns.label
        taskColumns.minWidth
        taskColumns.numberFormat
        taskColumns.setCustomEditorValue
        taskColumns.size
        taskColumns.value
        tasks.class
        tasks.connections
        tasks.dateEnd
        tasks.dateStart
        tasks.deadline
        tasks.disableDrag
        tasks.disableResize
        tasks.disableResources
        tasks.dragProject
        tasks.duration
        tasks.expanded
        tasks.formatFunction
        tasks.hidden
        tasks.id
        tasks.indicators
        tasks.label
        tasks.maxDateEnd
        tasks.maxDateStart
        tasks.maxDuration
        tasks.minDateEnd
        tasks.minDateStart
        tasks.minDuration
        tasks.onRender
        tasks.overdue
        tasks.planned
        tasks.dateEnd
        tasks.dateStart
        tasks.duration
        tasks.indicators.className
        tasks.indicators.date
        tasks.indicators.icon
        tasks.indicators.label
        tasks.indicators.tooltip
        tasks.planned.progress
        tasks.planned.resources
        tasks.planned.segments
        tasks.planned.synchronized
        tasks.planned.tasks
        tasks.planned.type
        tasks.planned.value
        tasks.planned.segments.dateEnd
        tasks.planned.segments.dateStart
        tasks.planned.segments.disableDrag
        tasks.planned.segments.disableResize
        tasks.planned.segments.duration
        tasks.planned.segments.formatFunction
        tasks.planned.segments.label
        tooltip.arrow
        tooltip.delay
        tooltip.enabled
        tooltip.offset

        Events

        BbeginUpdateThis event is triggered when a batch update operation begins, specifically after the beginUpdate method has been executed. It signals that subsequent changes to the data will be grouped as part of a batch, allowing for improved performance and deferred processing until the update process is completed.
        EendUpdateThis event is triggered after the endUpdate method has been executed, indicating that a batch update operation has completed. It signals that any batched changes have been applied, and the system can now perform follow-up actions or refresh the affected components.
        CconnectionStartThis event is fired when the user initiates the process of connecting one task to another—such as starting to draw a link or dependency between two tasks. Within the event handler, you can call event.preventDefault() to cancel the connection operation before it completes. This provides an opportunity to validate conditions, enforce business rules, or restrict certain connections as needed.
        CconnectionEndThis event is triggered when the user successfully establishes a link or dependency between two distinct tasks, typically by connecting their endpoints within the user interface. It signifies that a relationship (such as a workflow, sequence, or prerequisite) has been created between the selected tasks.
        CchangeThis event is triggered whenever a user selects or deselects a Task item. It fires both when a Task becomes selected and when a previously selected Task is unselected, allowing you to respond to changes in Task selection state.
        CcolumnResizeThis event is triggered whenever a column within the Tree component is resized by the user. You can enable or disable column resizing functionality using the columnResize property. When column resizing is enabled, this event allows you to respond to changes in column width, such as updating layout or saving user preferences.
        CclosingThis event is fired immediately before the task editing window or tooltip is about to close. At this stage, you have the opportunity to intercept and prevent the closing operation by calling event.preventDefault() within your event handler. This allows you to perform validation, display confirmation dialogs, or execute other logic before the window or tooltip is dismissed.
        CcloseThis event is triggered when the task editing window is closed or hidden by the user. It indicates that the user has exited the task editing interface, either by saving changes, cancelling, or clicking outside the window. This event can be used to perform cleanup actions, update the UI, or save edits as necessary.
        CcollapseThis event is triggered whenever a user collapses an item, such as hiding or minimizing a section, panel, or list element within the interface. It enables developers to execute custom logic or UI updates in response to the item's transition from an expanded (visible) state to a collapsed (hidden or minimized) state.
        DdragStartThis event is triggered when a user begins dragging a task element. In the event handler function, you can call event.preventDefault() to cancel or prevent the drag operation from proceeding. This allows you to implement custom logic to determine whether dragging should be allowed for a specific task, based on application requirements.
        DdragEndThis event is triggered when the user completes dragging a task and releases it, indicating the end of the drag-and-drop operation for that specific task. It can be used to perform actions such as updating the task's position, saving changes, or triggering related callbacks after the drag action concludes.
        EexpandThis event is triggered when a user expands an item, such as clicking to reveal additional content or details. It can be used to execute custom logic in response to the item's expansion, such as loading more data, updating the user interface, or tracking user interactions.
        FfilterThis event is triggered whenever a filter is applied to the GanttChart, such as when the user sets specific criteria to display only certain tasks or time periods. It allows developers to execute custom logic in response to filtering actions, such as updating related UI components or fetching additional data based on the current filter state.
        IitemClickThis event is triggered whenever a user clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.
        IitemDoubleClickThis event is triggered whenever a user double clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.
        IitemInsertThis event is triggered whenever a new Task, Resource, or Connection is added to the system—such as when a user creates a new task, assigns a new resource, or establishes a new connection between entities. The event allows you to handle actions or updates related to these insertions in real time.
        IitemRemoveThis event is triggered whenever a Task, Resource, or Connection is deleted or removed from the system. It allows you to perform actions or update the user interface in response to the removal of these entities. The event provides relevant information about the item that was removed, enabling you to handle cleanup, logging, or other custom behaviors as needed.
        IitemUpdateThis event is triggered whenever a Task, Resource, or Connection undergoes an update. This includes changes to properties, status, or associations within any of these entities. Use this event to respond to modifications such as edits, status transitions, or reassignments involving Tasks, Resources, or Connections in the system.
        OopeningThis event is fired immediately before the task editing window or tooltip is about to open. At this stage, you have the opportunity to intercept and potentially cancel the opening operation by calling event.preventDefault() within your event handler. This allows you to implement custom logic to control whether the editing window or tooltip should be displayed.
        OopenThis event is triggered whenever the task editing window becomes visible, such as when a user opens the edit task modal or interface. It is also triggered whenever a tooltip related to task actions is shown. This allows developers to respond to both the display of the task edit view and the appearance of relevant tooltips.
        PprogressChangeStartThis event is fired whenever the progress of a task bar begins to change due to user interaction, such as dragging the progress handle or clicking on the bar. Within the event handler, you can call event.preventDefault() to cancel or prevent the progress update from occurring. This provides an opportunity to validate the operation or implement custom logic before the task bar value is changed.
        PprogressChangeEndThis event is triggered whenever there is an update to a task's progress value. It occurs each time the task progresses, such as when a user completes a step or when the system automatically tracks advancement. The event provides updated information about the current state of the task’s progress, enabling UI elements or other components to respond accordingly (e.g., updating a progress bar or displaying status messages).
        RresizeStartThis event is triggered when the user begins resizing a task, such as changing its duration or endpoints. Within the event handler function, you can prevent the resizing operation from proceeding by calling event.preventDefault(). This allows developers to implement custom logic or validation before allowing the resize action to continue.
        RresizeEndThis event is triggered when a user completes resizing a task, indicating that the resize action has ended and the new task size has been set.
        SsortThis event is triggered whenever the user sorts the GanttChart by clicking on a column header. It fires each time the sorting order or the sorted column changes, allowing you to respond to updates in the displayed task order.
        SscrollBottomReachedThis event is triggered when the user scrolls to the very bottom of the Timeline component, indicating that all currently loaded timeline items have been reached. It can be used to implement features such as infinite scrolling or loading additional content when the end of the timeline is visible.
        SscrollTopReachedThis event is triggered when the Timeline component reaches its uppermost scroll position, indicating that the user has scrolled all the way to the top of the Timeline. Use this event to load earlier items, display notifications, or perform other actions when the beginning of the Timeline is reached.
        SscrollLeftReachedThis event is triggered when the user scrolls the Timeline component all the way to the start of its horizontal axis, reaching the earliest (leftmost) visible position. Use this event to detect when the Timeline has reached its starting boundary during horizontal scrolling.
        SscrollRightReachedThis event is triggered when the user scrolls to the far right end of the Timeline component horizontally, indicating that no additional content is available in that direction.

        Methods

        AaddFilterEnables the application of a user-defined filter to a specified column, allowing you to customize how data is displayed or managed within either a task column or a resource column. This feature supports more precise data sorting, searching, or visibility based on your chosen criteria.
        BbeginUpdateInitiates an update operation, allowing you to group and apply multiple method calls or set several properties in a single batch. This approach is ideal for making coordinated changes efficiently, minimizing redundant processing or event triggers that could occur if each update were applied individually.
        CclearFiltersRemoves all active filters from the current view, resetting any filter selections and displaying the complete, unfiltered dataset or content.
        CclearResourcesDeletes all resources from the system, ensuring that no data or assets remain. This operation is irreversible and will remove every resource currently managed by the application.
        CclearSelectionDeselects all currently selected items within the GanttChart component, including both Tasks and Resources. Additionally, this action removes any visual highlights or indicators related to task-resource assignments, ensuring that no items remain selected or highlighted in the chart.
        CclearSortRemoves any active sorting from the columns, restoring the original or default order of the data. This action resets the column sorting state, so no columns are sorted after this operation.
        CclearStateRemoves a previously stored state of the element from LocalStorage, based on the element's unique id attribute. Note: The element must have an id specified for this operation to work.
        CclearTasksDeletes all existing tasks from the list, resulting in an empty task collection. This action is irreversible and will permanently remove every task from storage.
        CcloseWindowCloses any active popup window that was opened within the specified element. This method searches for and terminates all open popup windows that are currently displayed inside the targeted element, ensuring that no popups remain visible or interactive.
        CcollapseCollapses a currently expanded project section, minimizing its content to provide a streamlined view and reduce on-screen clutter. This action hides the project's detailed information while keeping the project accessible for future expansion.
        CcollapseAllRowsCollapses all rows.
        CcreateConnectionEstablishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.
        EendUpdateConcludes the update operation, allowing the GanttChart to resume its rendering process. Invoking this method will trigger a refresh, ensuring that all recent changes are visually reflected on the chart.
        EensureVisibleEnsures that the specified task element is brought into view within the scrollable container by automatically scrolling the page or container if necessary, so the task is fully visible to the user.
        EexpandExpands a collapsed project to reveal its associated tasks, allowing users to view and interact with all items within the project.
        EexpandAllRowsExpands all rows.
        EexportDataExports the hierarchical tree data structure associated with the GanttChart, including all tasks, sub-tasks, and their relationships, in a serialized format suitable for data exchange or storage.
        GgetConnectionDetailsReturns the details of the specified connection, providing information such as: the starting task (`startTask`), ending task (`endTask`), unique identifiers of the starting and ending tasks (`startTaskId`, `endTaskId`), and the connection type (`type`). For a comprehensive explanation of the available connection types, please refer to the 'connectionEnd' event documentation within this document or the dedicated topic on our website.
        GgetConnectionsRetrieves a complete list of all current connections. The returned value is an array of objects, where each object represents a single connection and includes comprehensive metadata about that connection. Each connection object contains the following properties:- **id**: A unique identifier for the connection.- **type**: The type or category of the connection (e.g., dependency, sequential, etc.).- **startTaskId**: The unique identifier of the task where the connection originates.- **endTaskId**: The unique identifier of the task where the connection terminates.- **startIndex**: The index position within the start task from which the connection begins (useful for tasks with multiple connection points).- **endIndex**: The index position within the end task where the connection attaches.- **lag**: The lag time, typically in milliseconds or a project-specific unit, representing any delay between the linked tasks.This structure provides all necessary details for understanding the relationship and timing between connected tasks.
        GgetItemPathReturns the tree path of a specified task or resource. The tree path represents the unique location of the task or resource within a hierarchical structure. If the user does not explicitly provide an ID for the task or resource, this tree path will be used as its default unique identifier.
        GgetResourceReturns the resource object that matches the specified ID or path parameter. This object contains all relevant properties and data associated with the requested resource. If no resource is found with the provided ID or path, the method returns null or an error, depending on implementation.
        GgetResourceIndexReturns the zero-based index position of the specified resource within a collection or array. If the resource is not found, the function typically returns -1.
        GgetResourcesReturns an array containing all resource objects associated with the GanttChart. Each resource object includes detailed information about a specific resource, such as its unique identifier, name, and any additional properties defined for resources within the GanttChart. This allows developers to access and manipulate the full set of resources currently present in the chart.
        GgetResourceTasksReturns a list of tasks that have been assigned to the specified resource, including all relevant details for each task. This allows you to retrieve and review all tasks currently associated with the given resource.
        GgetSelectedIdsReturns the IDs of the currently selected tasks or resources as an array. If selection functionality is disabled or if no items are currently selected, the function returns null.
        GgetSelectedResourcesReturns an array containing information about all resources currently selected by the user. Each resource object may include details such as its unique identifier, name, type, and relevant metadata. This allows developers to programmatically access and process the user's current selections within the application.
        GgetSelectedTasksReturns an array containing all tasks that are currently selected by the user. Each task object in the array includes relevant task details such as its identifier, name, status, and any other associated properties. If no tasks are selected, an empty array is returned.
        GgetStateProvides a comprehensive JSON object containing all tasks within the specified element, including detailed information about each task's attributes, their interconnections (such as dependencies or links), and the full configuration settings associated with each task. This structured representation allows for thorough inspection, processing, or manipulation of the tasks and their relationships.
        GgetTaskReturns the task object that matches the specified id or path. The id/path parameter can be either a unique identifier or a hierarchical location string for the task. The returned object contains detailed information and properties related to the task, such as its status, title, description, due date, and any associated metadata.
        GgetTaskConnectionsReturns the definitions of all connections associated with a specific task, including details about each connection's type, configuration, and related parameters.
        GgetTaskIndexReturns the zero-based index position of the specified task within a task list. If the task is not found, the method returns -1.
        GgetTaskProjectReturns the associated Project object for a given task. If the task is not linked to any Project, the function returns undefined.
        GgetTasksReturns an array containing all task objects currently present in the GanttChart. Each task object includes details such as the task ID, name, start date, end date, dependencies, and any additional task-specific properties.
        GgetWorkingHoursReturns the working hours for a given day as an array of numerical values, where each value represents an hour within the standard working period (e.g., [9, 10, 11, 12, 13, 14, 15, 16, 17] for a 9 AM to 5 PM schedule).
        HhideTooltipConceals the tooltip element when it is currently displayed, ensuring that the tooltip is no longer visible to the user.
        IinsertResourceAdds a new resource to the collection by creating and storing the provided data. Returns details of the created resource upon successful insertion.
        IinsertTaskInserts a new task into the timeline. You can specify the task’s placement by providing a project ID: if a valid project ID is supplied, the new task will be created as a subtask under that project; if no project ID is given, the task will be added as a root-level item in the timeline. This allows for flexible organization, supporting both standalone tasks and tasks nested within projects.
        IisWorkingDayDetermines whether the specified target date falls on a working day by evaluating it against the nonworkingDays property. Returns true if the target date is a working day (not listed in nonworkingDays), and false if it is a non-working day.
        LloadStateEnhancement:Restores the element’s previously saved state by loading the provided state object, or, if no argument is supplied, checks the browser’s LocalStorage for any saved states associated with the element and loads them if available.
        OopenWindowOpens a popup window that allows the user to either edit or delete a connection when a specific connection string is provided. This popup provides relevant options and fields based on the selected task (edit or delete), streamlining the process of managing connection configurations.
        PprintConfigures the GanttChart for optimal print layout and formatting, then automatically launches the browser's Print Preview dialog, allowing users to review and print the current chart view.
        RrefreshRefreshes the GanttChart display after resizing by recalculating and updating the scrollbars to ensure proper alignment and navigation.
        RremoveAllConnectionsRemoves all existing links or dependencies between tasks, effectively disconnecting every task from one another. After this operation, no task will be linked, dependent on, or related to any other task in the project.
        RremoveConnectionRemoves a connection between two tasks. The function can be called in one of two ways:1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").2. With a single connection string argument that describes the connection (e.g., "1->2:FS").This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.
        RremoveResourceDeletes a specified resource from the system, permanently removing it and its associated data. This action cannot be undone.
        RremoveTaskRemoves the specified task from the timeline, effectively deleting it from the list of scheduled events. This operation updates the timeline to ensure the removed task no longer appears or affects the scheduling of other tasks.
        RremoveTaskConnectionDeletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.
        SsaveStateStores the current configuration of the element in the browser's LocalStorage, allowing the settings to persist across page reloads or browser sessions. Note: The element must have a unique id attribute assigned for this functionality to work properly.
        SscrollToDateScrolls the view to a specific date within a calendar or timeline component, bringing the selected date into focus for the user.
        SselectResourceEnables the selection of a specific resource by specifying its unique identifier (ID). This functionality ensures that only the resource matching the provided ID is retrieved or manipulated.
        SselectTaskEnables users to retrieve and select a specific task by providing its unique task ID. This functionality ensures precise identification and access to individual tasks within the system.
        SsetLocaleSets the locale of a component.
        SsetWorkTimeEnables users to define the standard working days and hours for the entire schedule in a single action. This ensures consistency by applying the specified days and time ranges across the relevant calendar or system settings.
        SshowTooltipDisplays a tooltip for a designated element, providing additional contextual information or guidance when the user hovers over, focuses on, or interacts with that element.
        SsortAutomatically sorts the tasks and resources in the GanttChart when the sortable option is enabled, allowing users to organize items by specified criteria such as start date, name, or priority.
        UunselectResourceEnables the deselection of a specific resource by providing its unique identifier (ID). This function removes the selected state from the resource corresponding to the given ID, if it is currently selected.
        UunselectTaskEnables the deselection of a specific task by specifying its unique task ID. This operation removes the selected state from the corresponding task if it is currently selected.
        UunsetWorkTimeRemoves any previously defined working hours for the user or resource. This method serves as the counterpart to setWorkingTime, effectively clearing or resetting the working time settings that were established earlier.
        UupdateResourceUpdates the specified resource with new data or modifications. This operation applies changes to the current state of the resource identified by its unique identifier, ensuring that only the provided fields are altered while preserving any unspecified properties.
        UupdateTaskUpdates the details of an existing task, project, or milestone, such as its title, description, status, deadline, or assigned users. This operation allows you to modify key attributes to reflect changes in progress, requirements, or scheduling.

        Properties

        adjustToNonworkingTimeSpecifies whether nonworkingDays and nonworkingHours should be considered when calculating the dateEnd of tasks. When enabled, dateEnd is determined based only on actual working time, excluding periods defined as nonworking. If disabled (the default behavior), dateEnd is calculated using continuous calendar time, without regard for nonworking periods.boolean

        Specifies whether nonworkingDays and nonworkingHours should be considered when calculating the dateEnd of tasks. When enabled, dateEnd is determined based only on actual working time, excluding periods defined as nonworking. If disabled (the default behavior), dateEnd is calculated using continuous calendar time, without regard for nonworking periods.

        Default value

        false
        Try a demo showcasing the adjustToNonworkingTime property.

        Examples

        Markup and runtime examples for adjustToNonworkingTime:

        HTML attribute:

        <smart-gantt-chart adjust-to-nonworking-time></smart-gantt-chart>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-gantt-chart');
el.adjustToNonworkingTime = false;

        Read the current value:

        const el = document.querySelector('smart-gantt-chart');
const adjustToNonworkingTime = el.adjustToNonworkingTime;

        autoScheduleAutomatically recalculates and updates the scheduling of tasks based on their defined connections and dependencies. When tasks are linked (for example, via finish-to-start or start-to-start relationships), this process adjusts their start and end dates to maintain the intended order and constraints. If a task has no connections to other tasks, autoScheduling will not alter its dates until a new connection is established. The type of connection between tasks dictates how their possible start and end dates are constrained relative to each other.boolean



        Automatically recalculates and updates the scheduling of tasks based on their defined connections and dependencies. When tasks are linked (for example, via finish-to-start or start-to-start relationships), this process adjusts their start and end dates to maintain the intended order and constraints. If a task has no connections to other tasks, autoScheduling will not alter its dates until a new connection is established. The type of connection between tasks dictates how their possible start and end dates are constrained relative to each other.

        Default value

        false
        Try a demo showcasing the autoSchedule property.

        Full working example

        Minimal setup for autoSchedule with the data and bindings you usually use together on this component.

        JavaScript — Gantt chart with autoSchedule:

        const dataSource = [
	{ id: 1, label: 'Discovery', dateStart: '2026-04-01', dateEnd: '2026-04-04', type: 'task', progress: 100 },
	{ id: 2, label: 'Build', dateStart: '2026-04-05', dateEnd: '2026-04-12', type: 'task', progress: 35 }
];

const gantt = new Smart.GanttChart('#myGantt', {
	dataSource,
	autoSchedule: true
});

        autoScheduleStrictModeThis setting only impacts tasks when autoSchedule is enabled. When set to true, tasks are automatically and strictly scheduled based on their defined dependencies (connections), and users will not be able to manually drag tasks to reschedule them.Additionally, users can specify a lag value for individual task connections. The lag attribute represents the delay or overlap (specified in milliseconds) between the start or end times of two connected tasks. By configuring the lag property within each task connection in the dataSource, you can control the timing interval between dependent tasks.boolean

        This setting only impacts tasks when autoSchedule is enabled. When set to true, tasks are automatically and strictly scheduled based on their defined dependencies (connections), and users will not be able to manually drag tasks to reschedule them.

        Additionally, users can specify a lag value for individual task connections. The lag attribute represents the delay or overlap (specified in milliseconds) between the start or end times of two connected tasks. By configuring the lag property within each task connection in the dataSource, you can control the timing interval between dependent tasks.

        Default value

        false
        Try a demo showcasing the autoScheduleStrictMode property.

        Full working example

        Minimal setup for autoScheduleStrictMode with the data and bindings you usually use together on this component.

        JavaScript — Gantt chart with autoScheduleStrictMode:

        const dataSource = [
	{ id: 1, label: 'Discovery', dateStart: '2026-04-01', dateEnd: '2026-04-04', type: 'task', progress: 100 },
	{ id: 2, label: 'Build', dateStart: '2026-04-05', dateEnd: '2026-04-12', type: 'task', progress: 35 }
];

const gantt = new Smart.GanttChart('#myGantt', {
	dataSource,
	autoScheduleStrictMode: true
});

        autoScrollStepSpecifies the speed at which the content scrolls when dragging an item and the autoScroll property is enabled. Increasing this value results in faster scrolling while dragging near the container's edge.number

        Specifies the speed at which the content scrolls when dragging an item and the autoScroll property is enabled. Increasing this value results in faster scrolling while dragging near the container's edge.

        Default value

        5
        Try a demo showcasing the autoScrollStep property.

        Examples

        Markup and runtime examples for autoScrollStep:

        HTML:

        <smart-gantt-chart auto-scroll-step="5"></smart-gantt-chart>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-gantt-chart');
el.autoScrollStep = 10;

        Read the current value:

        const el = document.querySelector('smart-gantt-chart');
const autoScrollStep = el.autoScrollStep;

        columnMenuControls whether the column header menu is enabled or disabled. When enabled, hovering over a column header displays a dropdown button that opens a menu with quick actions such as sorting, filtering, and other column-specific operations. The available actions in this menu are context-sensitive and depend on which Gantt features are enabled; for example, the filtering option will be shown only if filtering is enabled for the corresponding column.boolean

        Controls whether the column header menu is enabled or disabled. When enabled, hovering over a column header displays a dropdown button that opens a menu with quick actions such as sorting, filtering, and other column-specific operations. The available actions in this menu are context-sensitive and depend on which Gantt features are enabled; for example, the filtering option will be shown only if filtering is enabled for the corresponding column.

        Default value

        false

        Examples

        Markup and runtime examples for columnMenu:

        HTML attribute:

        <smart-gantt-chart column-menu></smart-gantt-chart>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-gantt-chart');
el.columnMenu = false;

        Read the current value:

        const el = document.querySelector('smart-gantt-chart');
const columnMenu = el.columnMenu;

        columnResizeSpecifies whether the Table columns can be resized by the user. When enabled, users can adjust the width of each column directly from the table’s header cells in both the Task and Resource timelines. This allows for greater flexibility in customizing the Table’s appearance to better fit the displayed data.boolean

        Specifies whether the Table columns can be resized by the user. When enabled, users can adjust the width of each column directly from the table’s header cells in both the Task and Resource timelines. This allows for greater flexibility in customizing the Table’s appearance to better fit the displayed data.

        Default value

        false

        Examples

        Markup and runtime examples for columnResize:

        HTML attribute:

        <smart-gantt-chart column-resize></smart-gantt-chart>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-gantt-chart');
el.columnResize = false;

        Read the current value:

        const el = document.querySelector('smart-gantt-chart');
const columnResize = el.columnResize;

        columnResizeFeedbackControls whether visual resize feedback is displayed while adjusting column width. This property is effective only when the columnResize feature is enabled. If set to true, users will see a preview of the new column size as they drag to resize; if set to false, no visual feedback will be shown during the resizing action.boolean

        Controls whether visual resize feedback is displayed while adjusting column width. This property is effective only when the columnResize feature is enabled. If set to true, users will see a preview of the new column size as they drag to resize; if set to false, no visual feedback will be shown during the resizing action.

        Default value

        false

        Examples

        Markup and runtime examples for columnResizeFeedback:

        HTML attribute:

        <smart-gantt-chart column-resize-feedback></smart-gantt-chart>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-gantt-chart');
el.columnResizeFeedback = false;

        Read the current value:

        const el = document.querySelector('smart-gantt-chart');
const columnResizeFeedback = el.columnResizeFeedback;

        criticalPathEnables or disables the visualization of the project’s Critical Path. When set to true, the Gantt chart highlights tasks that directly affect the project's total duration. The Critical Path represents the sequence of dependent tasks that cannot be delayed without delaying the overall project completion.boolean

        Enables or disables the visualization of the project’s Critical Path. When set to true, the Gantt chart highlights tasks that directly affect the project's total duration. The Critical Path represents the sequence of dependent tasks that cannot be delayed without delaying the overall project completion.

        Default value

        false

        Examples

        Markup and runtime examples for criticalPath:

        HTML attribute:

        <smart-gantt-chart critical-path></smart-gantt-chart>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-gantt-chart');
el.criticalPath = false;

        Read the current value:

        const el = document.querySelector('smart-gantt-chart');
const criticalPath = el.criticalPath;

        currentTimeRepresents the current time indicator on the Gantt chart. By default, this value is set to today’s date, highlighting the present day on the timeline.string | Date

        Represents the current time indicator on the Gantt chart. By default, this value is set to today’s date, highlighting the present day on the timeline.

        Default value

        ""

        currentTimeIndicatorControls the visibility of the current time indicator within the scheduling view. When enabled, a highlighted marker or line is displayed across the relevant time slots or cells to indicate the current system time, helping users easily identify the present moment within the schedule or calendar interface. Disabling this option hides the indicator from view.boolean

        Controls the visibility of the current time indicator within the scheduling view. When enabled, a highlighted marker or line is displayed across the relevant time slots or cells to indicate the current system time, helping users easily identify the present moment within the schedule or calendar interface. Disabling this option hides the indicator from view.

        Default value

        false

        Examples

        Markup and runtime examples for currentTimeIndicator:

        HTML attribute:

        <smart-gantt-chart current-time-indicator></smart-gantt-chart>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-gantt-chart');
el.currentTimeIndicator = false;

        Read the current value:

        const el = document.querySelector('smart-gantt-chart');
const currentTimeIndicator = el.currentTimeIndicator;

        currentTimeIndicatorIntervalSpecifies how often, in seconds, the currentTimeIndicator is refreshed or updated. A lower value results in more frequent updates, while a higher value reduces the update rate, potentially improving performance.number

        Specifies how often, in seconds, the currentTimeIndicator is refreshed or updated. A lower value results in more frequent updates, while a higher value reduces the update rate, potentially improving performance.

        Default value

        1

        Examples

        Markup and runtime examples for currentTimeIndicatorInterval:

        HTML:

        <smart-gantt-chart current-time-indicator-interval="60"></smart-gantt-chart>

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-gantt-chart');
el.currentTimeIndicatorInterval = 120;

        Read the current value:

        const el = document.querySelector('smart-gantt-chart');
const currentTimeIndicatorInterval = el.currentTimeIndicatorInterval;

        dataExportConfigures the data export settings for the GanttChart, allowing customization of how chart data is exported (e.g., format, included fields, file name, and export behavior). Click for more details. Property object's options:
           object

          Configures the data export settings for the GanttChart, allowing customization of how chart data is exported (e.g., format, included fields, file name, and export behavior).

          Properties

          exportFilteredSpecifies whether items that have been filtered out should be included in the export. By default, only unfiltered data is exported; filtered (excluded) items are not included in the export unless this option is enabled.
          fileNameSpecifies the name of the file that will be generated and saved when the export operation is completed.
          itemTypeSpecifies the category or format of items to be exported. This property defines what kind of data or objects will be included in the export process, helping to ensure the correct handling and organization of exported content.
          Try a demo showcasing the dataExport property.

          exportFilteredSpecifies whether items that have been filtered out should be included in the export. By default, only unfiltered data is exported; filtered (excluded) items are not included in the export unless this option is enabled.boolean

          Specifies whether items that have been filtered out should be included in the export. By default, only unfiltered data is exported; filtered (excluded) items are not included in the export unless this option is enabled.

          Default value

          false

          Back to root property: dataExport

          Read the nested value:

          const el = document.querySelector('smart-gantt-chart');
const exportFiltered = el.dataExport.exportFiltered;

          fileNameSpecifies the name of the file that will be generated and saved when the export operation is completed.string

          Specifies the name of the file that will be generated and saved when the export operation is completed.

          Default value

          "smartGanttChart"

          Back to root property: dataExport

          Read the nested value:

          const el = document.querySelector('smart-gantt-chart');
const fileName = el.dataExport.fileName;

          itemTypeSpecifies the category or format of items to be exported. This property defines what kind of data or objects will be included in the export process, helping to ensure the correct handling and organization of exported content."task" | "resource"

          Specifies the category or format of items to be exported. This property defines what kind of data or objects will be included in the export process, helping to ensure the correct handling and organization of exported content.

          Allowed Values

          • "task" - Exports the Task Tree.
          • "resource" - Exports the Resource Tree.

          Default value

          "task"

          Back to root property: dataExport

          Read the nested value:

          const el = document.querySelector('smart-gantt-chart');
const itemType = el.dataExport.itemType;

          dataSourceDetermines the set of tasks to be displayed within the Timeline. The value must be an array of objects, where each object represents a single task and includes both required and optional properties that define its behavior and appearance. Required Task Properties: label – A string value representing the name or description of the task. dateStart – The task’s start date as a string in a valid date format (e.g., 'YYYY-MM-DD'). dateEnd – The task’s end date as a string in a valid date format. type – Specifies the type of the task. Accepts one of: task (standard activity), project (parent grouping of subtasks), or milestone (key event). Each type may have type-specific behaviors and allowed attributes. Optional Task Properties: connections – An array of objects defining dependencies between tasks. Each connection object requires: target – An integer specifying the zero-based index of the target task in the main tasks array. type – An integer (0–3) indicating the type of dependency: 0 – Start-to-Start 1 – End-to-Start 2 – End-to-End 3 – Start-to-End lag – A number denoting delay (positive) or overlap (negative) between auto-scheduled tasks, in applicable time units. Used in conjunction with autoSchedule. duration – Describes how long the task lasts (e.g., "3d", "4h", "15m"). Useful when dateEnd is unknown or not specified. Duration always represents total calendar time. minDuration / maxDuration – Set minimum or maximum allowed duration for the task. minDateStart / maxDateStart – Define earliest/latest allowed start dates, as strings in valid date formats. minDateEnd / maxDateEnd – Define earliest/latest allowed end dates, as strings in valid date formats. progress – A number from 0 to 100 indicating the percentage of work completed. overdue – A boolean that is true if the task’s dateEnd has passed its deadline. disableDrag – Boolean. If true, users cannot drag (move) the task on the timeline. disableResize – Boolean. If true, users cannot resize the duration of the task on the timeline. dragProject – Boolean. If true, allows the entire project (including all subtasks) to be dragged when the project parent task is dragged. Applicable only to project tasks. segments – An array of objects allowing a task to be split into multiple segments with different properties (such as distinct start dates, labels, or durations). synchronized – Boolean. If true, a project’s start and end dates are calculated automatically based on its child tasks, and cannot be moved independently. Applicable only to project tasks. expanded – Boolean. Determines if a project’s subtasks are visible (expanded). If false, only the project summary bar is displayed. By default, projects are collapsed. Applicable only to project tasks. The GanttChart component can also accept a DataAdapter instance as its data source for flexible data integration. For more details, see the DataAdapter documentation: https://www.htmlelements.com/docs/data-adapter/. Click for more details. Property object's options:
            any

            Determines the set of tasks to be displayed within the Timeline. The value must be an array of objects, where each object represents a single task and includes both required and optional properties that define its behavior and appearance.

            Required Task Properties:



            label – A string value representing the name or description of the task.




            dateStart – The task’s start date as a string in a valid date format (e.g., 'YYYY-MM-DD').




            dateEnd – The task’s end date as a string in a valid date format.




            type – Specifies the type of the task. Accepts one of: task (standard activity), project (parent grouping of subtasks), or milestone (key event). Each type may have type-specific behaviors and allowed attributes.




            Optional Task Properties:



            connections – An array of objects defining dependencies between tasks. Each connection object requires:



            target – An integer specifying the zero-based index of the target task in the main tasks array.




            type – An integer (0–3) indicating the type of dependency:


            0 – Start-to-Start


            1 – End-to-Start


            2 – End-to-End


            3 – Start-to-End






            lag – A number denoting delay (positive) or overlap (negative) between auto-scheduled tasks, in applicable time units. Used in conjunction with autoSchedule.







            duration – Describes how long the task lasts (e.g., "3d", "4h", "15m"). Useful when dateEnd is unknown or not specified. Duration always represents total calendar time.




            minDuration / maxDuration – Set minimum or maximum allowed duration for the task.




            minDateStart / maxDateStart – Define earliest/latest allowed start dates, as strings in valid date formats.




            minDateEnd / maxDateEnd – Define earliest/latest allowed end dates, as strings in valid date formats.




            progress – A number from 0 to 100 indicating the percentage of work completed.




            overdue – A boolean that is true if the task’s dateEnd has passed its deadline.




            disableDrag – Boolean. If true, users cannot drag (move) the task on the timeline.




            disableResize – Boolean. If true, users cannot resize the duration of the task on the timeline.




            dragProject – Boolean. If true, allows the entire project (including all subtasks) to be dragged when the project parent task is dragged. Applicable only to project tasks.




            segments – An array of objects allowing a task to be split into multiple segments with different properties (such as distinct start dates, labels, or durations).




            synchronized – Boolean. If true, a project’s start and end dates are calculated automatically based on its child tasks, and cannot be moved independently. Applicable only to project tasks.




            expanded – Boolean. Determines if a project’s subtasks are visible (expanded). If false, only the project summary bar is displayed. By default, projects are collapsed. Applicable only to project tasks.




            The GanttChart component can also accept a DataAdapter instance as its data source for flexible data integration. For more details, see the DataAdapter documentation: https://www.htmlelements.com/docs/data-adapter/.



            The dataSource property's object value may have the following properties:
            • connections: array - Tasks connection.
              • lag: number | undefined - Task's connection lag. Used by the Auto Scheduling (autoSchedue proeprty) feature to determine the connection lag, which is the time before/after the target begins/ends (depending on the connection type). The lag can be a negative number in which case it acts as lead time. In other words, the lab property is used to make a task start late(positive lag) or early(negative lag) then planned when autoSchedule is enabled.
                • lag
              • target: string | number - Task's connection target.
                • target
              • type: number - Task's connection type.
                • type
            • connectionType: array - Project, Task or Milestone connection type which may include 'start' and 'end' string values.
            • class: string - Project, Task or Milestone CSS class.
            • dateStart: string | Date - Project, Task or Milestone start date.
            • dateEnd: string | Date - Project, Task or Milestone end date.
            • deadline: string | Date - Determines the deadline for the Project, Task or Milestone.
            • disableResources: boolean - Disable the resources for Project, Task or Milestone.
            • disableDrag: boolean - Project, Task or Milestone dragging is disabled.
            • disableResize: boolean - Project, Task or Milestone resizing is disabled.
            • dragProject: boolean - Project, Task or Milestone drag enabled in the view.
            • duration: number | undefined - The duration of the Project, Task or Milestone in miliseconds. The duration unit can be changed via the durationUnit property.
            • expanded: boolean - Project, Task or Milestone expanded state in the view.
            • id: string | null - Project, Task or Milestone id.
            • indicators: {label?: string, date: Date | string, className?: string, icon?: string, tooltip?: string }[] - Determines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row.
              • label: string? - Indicator label.
                • label
              • date: string | Date - Indicator date(can include time).
                • date
              • className: string? - A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.
                • className
              • icon: string? - Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.
                • icon
              • tooltip: string? - Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.
                • tooltip
            • label: string | null - Project, Task or Milestone label.
            • formatFunction: any - Project, Task or Milestone format function. The function gets passed a label as a function argument and you can return another formatted label.
            • onRender: any - Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement.
              • task - the task object.
              • segment - the task current segment object. If the task has only one segment, the task object is passed again.
              • taskElement - the task's html element.
              • segmentElement - the task's segment html element.
              • labelElement - the task's segment label html element.
            • maxDateStart: string | Date - Project, Task or Milestone max start date.
            • minDateStart: string | Date - Project, Task or Milestone min start date.
            • maxDateEnd: string | Date - Project, Task or Milestone max end date.
            • minDateEnd: string | Date - Project, Task or Milestone min end date.
            • minDuration: number | undefined - The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.
            • maxDuration: number | undefined - The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.
            • overdue: boolean - Determines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.
            • planned: { dateStart: date | string | number, dateEnd: date | string | number, duration?: number } - Determines the planned dateStart/dateEnd for as the baseline for the task.
              • dateStart: string | Date - Determines the planned dateStart of the task.
                • dateStart
              • dateEnd: string | Date - Determines the planned dateEnd of the task.
                • dateEnd
              • duration: number | undefined - Determines the planned duration of the task.
                • duration
            • progress: number - Project, Task or Milestone progress.
            • resources: {id: string, capacity: number, label: string, value: string, maxCapacity: number, type: string}[] - Project, Task or Milestone resources
              • capacity: number - The capacity of a resource. By default it is used to determines the working capacity ( in hours ) of the resource.
                • capacity
              • id: string - Resource id. The unique id of the resource.
                • id
              • label: string | null - Resource label.
                • label
              • minCapacity: number - Resource min capacity
                • minCapacity
              • maxCapacity: number - Resource max capacity. By default this property is used for the resource timeline histogram where maxCapacity is the maximum working capacity in hours of the resource.
                • maxCapacity
              • progress: number - Resource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.
                • progress
              • type: any - Resource type.
                • type
              • value: any - Resource value.
                • value
              • hidden: boolean | undefined - Resource visibility.
                • hidden
              • workload: string | number - Resource workload. Workload is the total working time in hours of a resource based on the tasks it is assigned to. This property is automatically calculated.
                • workload
            • segments: {label: string, dateStart: date | string , dateEnd: date | string, disableDrag?: boolean, disableResize?: boolean, duration?: number | null, formatFunction?: any }[] - Determines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task.
              • label: string | null - Segment label.
                • label
              • dateStart: string | Date - Segment start date.
                • dateStart
              • dateEnd: string | Date - Segment end date.
                • dateEnd
              • disableDrag: boolean - Determines whether segment dragging is disabled.
                • disableDrag
              • disableResize: boolean - Determines whether segment resizing is disabled.
                • disableResize
              • duration: number | undefined - The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.
                • duration
              • formatFunction: any - Segment label format function.
                • formatFunction
            • synchronized: boolean - Project, Task or Milestone synchronized in the view.
            • tasks: array - Project's tasks.
            • type: string - Project, Task or Milestone type. Possible values are 'project' and 'task'
            • value: any - Project, Task or Milestone value.
            • hidden: boolean | undefined - Project, Task or Milestone value.
            Try a demo showcasing the dataSource property.

            Full working example

            Minimal setup for dataSource with the data and bindings you usually use together on this component.

            JavaScript — Gantt chart with dataSource:

            const dataSource = [
	{ id: 1, label: 'Discovery', dateStart: '2026-04-01', dateEnd: '2026-04-04', type: 'task', progress: 100 },
	{ id: 2, label: 'Build', dateStart: '2026-04-05', dateEnd: '2026-04-12', type: 'task', progress: 35 }
];

const gantt = new Smart.GanttChart('#myGantt', {
	dataSource
});

            dateEndSpecifies a custom end date for the Timeline. This is useful when the user wants to define a specific end point for the Timeline, overriding the automatic calculation based on task completion dates. If no end date is provided, the Timeline will automatically use the latest end date from the existing tasks.string | Date

            Specifies a custom end date for the Timeline. This is useful when the user wants to define a specific end point for the Timeline, overriding the automatic calculation based on task completion dates. If no end date is provided, the Timeline will automatically use the latest end date from the existing tasks.

            Default value

            ""

            Full working example

            Minimal setup for dateEnd with the data and bindings you usually use together on this component.

            JavaScript — Gantt chart with dateEnd:

            const dataSource = [
	{ id: 1, label: 'Discovery', dateStart: '2026-04-01', dateEnd: '2026-04-04', type: 'task', progress: 100 },
	{ id: 2, label: 'Build', dateStart: '2026-04-05', dateEnd: '2026-04-12', type: 'task', progress: 35 }
];

const gantt = new Smart.GanttChart('#myGantt', {
	dateStart: '2026-03-25',
	dateEnd: '2026-04-30',
	dataSource
});

            dateMarkersSpecifies the date markers to be shown within the timeline of the GanttChart component. Date markers highlight and optionally label particular dates and times directly on the Gantt chart, providing visual cues or annotations for significant milestones, deadlines, or events within the project's schedule. Click for more details. Property object's options:
              {label?: string, date: date | string, className?: string }[]

              Specifies the date markers to be shown within the timeline of the GanttChart component. Date markers highlight and optionally label particular dates and times directly on the Gantt chart, providing visual cues or annotations for significant milestones, deadlines, or events within the project's schedule.

              Properties

              classNameAllows to add a custom class name to the marker.
              dateDetermines the date for the marker. The date can include time as well.
              labelDetermines the marker label.

              classNameAllows to add a custom class name to the marker.string?

              Allows to add a custom class name to the marker.

              Back to root property: dateMarkers

              Read the nested value:

              const el = document.querySelector('smart-gantt-chart');
const className = el.dateMarkers[0].className;

              dateDetermines the date for the marker. The date can include time as well.string | date | number

              Determines the date for the marker. The date can include time as well.

              Back to root property: dateMarkers

              Read the nested value:

              const el = document.querySelector('smart-gantt-chart');
const date = el.dateMarkers[0].date;

              labelDetermines the marker label.string | null

              Determines the marker label.

              Default value

              ""

              Back to root property: dateMarkers

              Read the nested value:

              const el = document.querySelector('smart-gantt-chart');
const label = el.dateMarkers[0].label;

              dateStartSpecifies a custom starting date for the Timeline. This option is useful when you want the Timeline to begin on a specific date, rather than relying on the earliest start date of the tasks. If a starting date is not provided, the Timeline will automatically use the start date from the first scheduled task.string | Date

              Specifies a custom starting date for the Timeline. This option is useful when you want the Timeline to begin on a specific date, rather than relying on the earliest start date of the tasks. If a starting date is not provided, the Timeline will automatically use the start date from the first scheduled task.

              Default value

              ""

              Full working example

              Minimal setup for dateStart with the data and bindings you usually use together on this component.

              JavaScript — Gantt chart with dateStart:

              const dataSource = [
	{ id: 1, label: 'Discovery', dateStart: '2026-04-01', dateEnd: '2026-04-04', type: 'task', progress: 100 },
	{ id: 2, label: 'Build', dateStart: '2026-04-05', dateEnd: '2026-04-12', type: 'task', progress: 35 }
];

const gantt = new Smart.GanttChart('#myGantt', {
	dateStart: '2026-03-25',
	dateEnd: '2026-04-30',
	dataSource
});

              dayFormatSpecifies the display format for dates in the timeline header when the timeline is showing individual days. This setting controls how each day's date is presented (e.g., "MM/DD/YYYY", "Monday, Jan 1", etc.), ensuring that day labels in the header are clear and consistent with your application's requirements."2-digit" | "numeric" | "long" | "short" | "narrow"

              Specifies the display format for dates in the timeline header when the timeline is showing individual days. This setting controls how each day's date is presented (e.g., "MM/DD/YYYY", "Monday, Jan 1", etc.), ensuring that day labels in the header are clear and consistent with your application's requirements.

              Default value

              "short"

              Examples

              Markup and runtime examples for dayFormat:

              HTML:

              <smart-gantt-chart day-format="numeric"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.dayFormat = "short";

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const dayFormat = el.dayFormat;

              disableAutoScrollPrevents the timeline from automatically scrolling when a task bar is being dragged or resized. This means the viewport will remain stationary during these actions, requiring the user to manually scroll if they wish to view other parts of the timeline.boolean

              Prevents the timeline from automatically scrolling when a task bar is being dragged or resized. This means the viewport will remain stationary during these actions, requiring the user to manually scroll if they wish to view other parts of the timeline.

              Default value

              false

              Examples

              Markup and runtime examples for disableAutoScroll:

              HTML attribute:

              <smart-gantt-chart disable-auto-scroll></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.disableAutoScroll = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const disableAutoScroll = el.disableAutoScroll;

              disabledSpecifies whether the element is interactive and can be used by the user. When enabled, the element responds to user input; when disabled, the element appears inactive and does not accept user interactions.boolean

              Specifies whether the element is interactive and can be used by the user. When enabled, the element responds to user input; when disabled, the element appears inactive and does not accept user interactions.

              Default value

              false

              Examples

              Markup and runtime examples for disabled:

              HTML attribute:

              <smart-gantt-chart disabled></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.disabled = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const disabled = el.disabled;

              disableSegmentDragPrevents users from dragging and repositioning individual task segments within the interface. When this option is enabled, task segments remain fixed in place and cannot be moved through drag-and-drop actions.boolean

              Prevents users from dragging and repositioning individual task segments within the interface. When this option is enabled, task segments remain fixed in place and cannot be moved through drag-and-drop actions.

              Default value

              false

              Examples

              Markup and runtime examples for disableSegmentDrag:

              HTML attribute:

              <smart-gantt-chart disable-segment-drag></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.disableSegmentDrag = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const disableSegmentDrag = el.disableSegmentDrag;

              disableSegmentResizePrevents users from changing the size of the task segment. When this option is enabled, the task segment cannot be resized or adjusted, ensuring its dimensions remain fixed.boolean

              Prevents users from changing the size of the task segment. When this option is enabled, the task segment cannot be resized or adjusted, ensuring its dimensions remain fixed.

              Default value

              false

              Examples

              Markup and runtime examples for disableSegmentResize:

              HTML attribute:

              <smart-gantt-chart disable-segment-resize></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.disableSegmentResize = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const disableSegmentResize = el.disableSegmentResize;

              disableSelectionPrevents users from selecting tasks, milestones, or any other elements within the GanttChart, effectively disabling all selection interactions and highlighting within the chart area.boolean

              Prevents users from selecting tasks, milestones, or any other elements within the GanttChart, effectively disabling all selection interactions and highlighting within the chart area.

              Default value

              false

              Examples

              Markup and runtime examples for disableSelection:

              HTML attribute:

              <smart-gantt-chart disable-selection></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.disableSelection = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const disableSelection = el.disableSelection;

              disableTaskDragPrevents users from clicking and dragging tasks to reschedule or move them within the Timeline view. Tasks remain fixed in their current positions and cannot be repositioned through drag-and-drop actions.boolean

              Prevents users from clicking and dragging tasks to reschedule or move them within the Timeline view. Tasks remain fixed in their current positions and cannot be repositioned through drag-and-drop actions.

              Default value

              false

              Examples

              Markup and runtime examples for disableTaskDrag:

              HTML attribute:

              <smart-gantt-chart disable-task-drag></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.disableTaskDrag = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const disableTaskDrag = el.disableTaskDrag;

              disableTaskProgressChangePrevents users from modifying or updating task progress values within the Timeline view. Task progress indicators will be displayed as read-only and cannot be adjusted through the Timeline interface.boolean

              Prevents users from modifying or updating task progress values within the Timeline view. Task progress indicators will be displayed as read-only and cannot be adjusted through the Timeline interface.

              Default value

              false

              Examples

              Markup and runtime examples for disableTaskProgressChange:

              HTML attribute:

              <smart-gantt-chart disable-task-progress-change></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.disableTaskProgressChange = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const disableTaskProgressChange = el.disableTaskProgressChange;

              disableTaskResizePrevents users from adjusting the start or end dates of tasks directly within the Timeline by disabling the resize handles on tasks.boolean

              Prevents users from adjusting the start or end dates of tasks directly within the Timeline by disabling the resize handles on tasks.

              Default value

              false

              Examples

              Markup and runtime examples for disableTaskResize:

              HTML attribute:

              <smart-gantt-chart disable-task-resize></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.disableTaskResize = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const disableTaskResize = el.disableTaskResize;

              disableWindowEditorPrevents the window editor from opening or being used within the GanttChart component, thereby disabling any ability for users to add, edit, or configure tasks through the graphical window interface. This setting ensures that all task modifications must be handled through alternative methods, such as programmatic updates or external forms.boolean

              Prevents the window editor from opening or being used within the GanttChart component, thereby disabling any ability for users to add, edit, or configure tasks through the graphical window interface. This setting ensures that all task modifications must be handled through alternative methods, such as programmatic updates or external forms.

              Default value

              false

              Examples

              Markup and runtime examples for disableWindowEditor:

              HTML attribute:

              <smart-gantt-chart disable-window-editor></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.disableWindowEditor = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const disableWindowEditor = el.disableWindowEditor;

              durationUnitSpecifies the unit of measurement (such as seconds, minutes, hours, or days) used for the task's duration property. This defines how the duration value should be interpreted and ensures consistent handling of time-related data across the application."day" | "hour" | "minute" | "second" | "milisecond"

              Specifies the unit of measurement (such as seconds, minutes, hours, or days) used for the task's duration property. This defines how the duration value should be interpreted and ensures consistent handling of time-related data across the application.

              Default value

              "milisecond"

              Full working example

              Minimal setup for durationUnit with the data and bindings you usually use together on this component.

              JavaScript — Gantt chart with durationUnit:

              const dataSource = [
	{ id: 1, label: 'Discovery', dateStart: '2026-04-01', dateEnd: '2026-04-04', type: 'task', progress: 100 },
	{ id: 2, label: 'Build', dateStart: '2026-04-05', dateEnd: '2026-04-12', type: 'task', progress: 35 }
];

const gantt = new Smart.GanttChart('#myGantt', {
	dataSource,
	durationUnit: 'day'
});

              filterRowSpecifies whether a dedicated filter row should be displayed within the table for filtering purposes, replacing the default inline filter input. When enabled, each column in the table will provide its own filter input within a separate filter row. This property is only applicable if the filtering option is enabled; otherwise, it will have no effect.boolean

              Specifies whether a dedicated filter row should be displayed within the table for filtering purposes, replacing the default inline filter input. When enabled, each column in the table will provide its own filter input within a separate filter row. This property is only applicable if the filtering option is enabled; otherwise, it will have no effect.

              Default value

              false

              Examples

              Markup and runtime examples for filterRow:

              HTML attribute:

              <smart-gantt-chart filter-row></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.filterRow = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const filterRow = el.filterRow;

              firstDayOfWeekSpecifies which day of the week the calendar view should start on. The value is a number from 0 to 6, where 0 represents Sunday, 1 represents Monday, and 6 represents Saturday. The default value is 0 (Sunday). Adjusting this setting allows you to control the first day displayed in the weekly or monthly calendar view.number

              Specifies which day of the week the calendar view should start on. The value is a number from 0 to 6, where 0 represents Sunday, 1 represents Monday, and 6 represents Saturday. The default value is 0 (Sunday). Adjusting this setting allows you to control the first day displayed in the weekly or monthly calendar view.

              Default value

              -1

              Examples

              Markup and runtime examples for firstDayOfWeek:

              HTML:

              <smart-gantt-chart first-day-of-week="0"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.firstDayOfWeek = 1;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const firstDayOfWeek = el.firstDayOfWeek;

              groupByResourcesOrganizes tasks within the Task timeline by grouping them based on their assigned resources. Each resource receives its own group containing all tasks allocated to it. Tasks that have not been assigned to any resource are automatically placed in a separate group labeled "Unassigned" for easy identification.boolean

              Organizes tasks within the Task timeline by grouping them based on their assigned resources. Each resource receives its own group containing all tasks allocated to it. Tasks that have not been assigned to any resource are automatically placed in a separate group labeled "Unassigned" for easy identification.

              Default value

              false

              Examples

              Markup and runtime examples for groupByResources:

              HTML attribute:

              <smart-gantt-chart group-by-resources></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.groupByResources = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const groupByResources = el.groupByResources;

              headerTemplateEnables you to define custom header content for the Task Panel. The attribute accepts either an HTMLTemplate element, the id of an existing HTMLTemplate, or a function that returns the desired content. This provides flexibility to use static templates or generate dynamic header content programmatically.any

              Enables you to define custom header content for the Task Panel. The attribute accepts either an HTMLTemplate element, the id of an existing HTMLTemplate, or a function that returns the desired content. This provides flexibility to use static templates or generate dynamic header content programmatically.

              Try a demo showcasing the headerTemplate property.

              Examples

              Markup and runtime examples for headerTemplate:

              HTML:

              <smart-gantt-chart header-template="headerTemplate"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.headerTemplate = "headerTemplate2";

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const headerTemplate = el.headerTemplate;

              hideDateMarkersSpecifies whether the dateMarkers are displayed on the interface. When set to true, the date markers will be visible; when set to false, they will be hidden.boolean

              Specifies whether the dateMarkers are displayed on the interface. When set to true, the date markers will be visible; when set to false, they will be hidden.

              Default value

              false

              Examples

              Markup and runtime examples for hideDateMarkers:

              HTML attribute:

              <smart-gantt-chart hide-date-markers></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.hideDateMarkers = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const hideDateMarkers = el.hideDateMarkers;

              hideResourcePanelControls the visibility of the Resource panel in the GanttChart component. By default, the Resource panel is displayed automatically when resources are added to the GanttChart. Enabling this property will permanently hide the Resource panel, regardless of whether resources are present or not. This allows developers to prevent the Resource panel from appearing under any circumstances.boolean

              Controls the visibility of the Resource panel in the GanttChart component. By default, the Resource panel is displayed automatically when resources are added to the GanttChart. Enabling this property will permanently hide the Resource panel, regardless of whether resources are present or not. This allows developers to prevent the Resource panel from appearing under any circumstances.

              Default value

              false

              Examples

              Markup and runtime examples for hideResourcePanel:

              HTML attribute:

              <smart-gantt-chart hide-resource-panel></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.hideResourcePanel = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const hideResourcePanel = el.hideResourcePanel;

              hideTimelineHeaderBy default, the Timeline component displays a three-level header structure: the top section shows primary timeline details, the middle section displays secondary details, and the bottom section contains the main timeline header. This property allows you to hide the header container, which refers specifically to the bottom section of the header.boolean

              By default, the Timeline component displays a three-level header structure: the top section shows primary timeline details, the middle section displays secondary details, and the bottom section contains the main timeline header. This property allows you to hide the header container, which refers specifically to the bottom section of the header.

              Default value

              false

              Examples

              Markup and runtime examples for hideTimelineHeader:

              HTML attribute:

              <smart-gantt-chart hide-timeline-header></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.hideTimelineHeader = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const hideTimelineHeader = el.hideTimelineHeader;

              hideTimelineHeaderDetailsBy default, the Timeline component displays a three-level header structure: the main timeline details (topmost header), secondary timeline details (middle header), and the primary timeline header (bottom header). This property allows you to hide the topmost container, which holds the main timeline details, effectively removing the first (outermost) header section from the Timeline display.boolean

              By default, the Timeline component displays a three-level header structure: the main timeline details (topmost header), secondary timeline details (middle header), and the primary timeline header (bottom header). This property allows you to hide the topmost container, which holds the main timeline details, effectively removing the first (outermost) header section from the Timeline display.

              Default value

              false

              Examples

              Markup and runtime examples for hideTimelineHeaderDetails:

              HTML attribute:

              <smart-gantt-chart hide-timeline-header-details></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.hideTimelineHeaderDetails = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const hideTimelineHeaderDetails = el.hideTimelineHeaderDetails;

              hideTimelineSecondHeaderDetailsBy default, the Timeline component displays a three-level header structure: the main timeline header, a secondary header with additional details, and a primary details section. This property specifically controls the visibility of the second (middle) header, which contains supplementary timeline details. When enabled, the secondary details container will be hidden, resulting in a simplified two-level header layout.boolean

              By default, the Timeline component displays a three-level header structure: the main timeline header, a secondary header with additional details, and a primary details section. This property specifically controls the visibility of the second (middle) header, which contains supplementary timeline details. When enabled, the secondary details container will be hidden, resulting in a simplified two-level header layout.

              Default value

              true

              Examples

              Markup and runtime examples for hideTimelineSecondHeaderDetails:

              HTML attribute:

              <smart-gantt-chart hide-timeline-second-header-details></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.hideTimelineSecondHeaderDetails = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const hideTimelineSecondHeaderDetails = el.hideTimelineSecondHeaderDetails;

              horizontalScrollBarVisibilitySpecifies whether the horizontal scrollbar is visible, allowing users to scroll content horizontally when it exceeds the container’s width."auto" | "disabled" | "hidden" | "visible"

              Specifies whether the horizontal scrollbar is visible, allowing users to scroll content horizontally when it exceeds the container’s width.

              Default value

              "auto"

              Examples

              Markup and runtime examples for horizontalScrollBarVisibility:

              HTML:

              <smart-gantt-chart horizontal-scroll-bar-visibility="disabled"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.horizontalScrollBarVisibility = "hidden";

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const horizontalScrollBarVisibility = el.horizontalScrollBarVisibility;

              hourFormatSpecifies the display format for dates shown as hours within the timeline header, controlling how hour values (e.g., "14:00", "2 PM", "14h") are presented to users. This setting ensures that the hour labels in the timeline header are formatted consistently according to your application's requirements."default" | "2-digit" | "numeric"

              Specifies the display format for dates shown as hours within the timeline header, controlling how hour values (e.g., "14:00", "2 PM", "14h") are presented to users. This setting ensures that the hour labels in the timeline header are formatted consistently according to your application's requirements.

              Default value

              "numeric"

              Examples

              Markup and runtime examples for hourFormat:

              HTML:

              <smart-gantt-chart hour-format="2-digit"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.hourFormat = "default";

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const hourFormat = el.hourFormat;

              infiniteTimelineWhen this option is enabled, reaching the end of the horizontal timeline through scrolling will dynamically generate additional timeline cells, effectively extending the visible time range. The exact number of new cells added each time the scrollbar reaches the end is specified by the infiniteTimelineStep setting. This allows for an "infinite scrolling" experience, where more timeline segments are loaded as the user scrolls horizontally.boolean



              When this option is enabled, reaching the end of the horizontal timeline through scrolling will dynamically generate additional timeline cells, effectively extending the visible time range. The exact number of new cells added each time the scrollbar reaches the end is specified by the infiniteTimelineStep setting. This allows for an "infinite scrolling" experience, where more timeline segments are loaded as the user scrolls horizontally.

              Default value

              false

              Examples

              Markup and runtime examples for infiniteTimeline:

              HTML attribute:

              <smart-gantt-chart infinite-timeline></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.infiniteTimeline = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const infiniteTimeline = el.infiniteTimeline;

              infiniteTimelineStepSpecifies how many new cells should be dynamically loaded and added to the Timeline when the user scrolls horizontally to the end, provided that infiniteTimeline is enabled. This controls the batch size of additional timeline cells appended each time the end of the scrollable area is reached.number

              Specifies how many new cells should be dynamically loaded and added to the Timeline when the user scrolls horizontally to the end, provided that infiniteTimeline is enabled. This controls the batch size of additional timeline cells appended each time the end of the scrollable area is reached.

              Default value

              5

              Examples

              Markup and runtime examples for infiniteTimelineStep:

              HTML:

              <smart-gantt-chart infinite-timeline-step="3"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.infiniteTimelineStep = 10;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const infiniteTimelineStep = el.infiniteTimelineStep;

              invertedWhen enabled, this setting displays the Timeline component on the left side of the interface and the Task Tree on the right side. By default, the layout is reversed: the Task Tree appears on the left and the Timeline on the right.boolean

              When enabled, this setting displays the Timeline component on the left side of the interface and the Task Tree on the right side. By default, the layout is reversed: the Task Tree appears on the left and the Timeline on the right.

              Default value

              false
              Try a demo showcasing the inverted property.

              Examples

              Markup and runtime examples for inverted:

              HTML attribute:

              <smart-gantt-chart inverted></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.inverted = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const inverted = el.inverted;

              keyboardNavigationControls whether users can navigate within the Table using the keyboard. When enabled, keyboard navigation applies to both the Task and Resource Tables, allowing users to move between table items using the keyboard.For the Task Table, the following keyboard shortcuts are available when a task is focused: Enter – Opens the Window editor, allowing you to edit the currently focused task. Delete – Opens a confirmation dialog to confirm the deletion of the currently focused task.Enabling this option improves accessibility and streamlines user interactions for both Task and Resource management within the Table.boolean

              Controls whether users can navigate within the Table using the keyboard. When enabled, keyboard navigation applies to both the Task and Resource Tables, allowing users to move between table items using the keyboard.

              For the Task Table, the following keyboard shortcuts are available when a task is focused:



              Enter – Opens the Window editor, allowing you to edit the currently focused task.


              Delete – Opens a confirmation dialog to confirm the deletion of the currently focused task.



              Enabling this option improves accessibility and streamlines user interactions for both Task and Resource management within the Table.

              Default value

              false
              Try a demo showcasing the keyboardNavigation property.

              Examples

              Markup and runtime examples for keyboardNavigation:

              HTML attribute:

              <smart-gantt-chart keyboard-navigation></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.keyboardNavigation = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const keyboardNavigation = el.keyboardNavigation;

              localeSpecifies the language used for the GanttChart interface, including labels, tooltips, and other user-facing text elements.string

              Specifies the language used for the GanttChart interface, including labels, tooltips, and other user-facing text elements.

              Default value

              "en"
              Try a demo showcasing the locale property.

              Examples

              Markup and runtime examples for locale:

              HTML:

              <smart-gantt-chart locale="de"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.locale = "en";

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const locale = el.locale;

              maxDetermines the latest allowable date that can be displayed or selected on the Timeline, effectively setting the upper limit for date values within the component.string | date

              Determines the latest allowable date that can be displayed or selected on the Timeline, effectively setting the upper limit for date values within the component.

              Default value

              2100-1-1

              Examples

              Markup and runtime examples for max:

              HTML:

              <smart-gantt-chart max="2020-1-1"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.max = "2025-12-31";

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const max = el.max;

              messagesDefines or retrieves an object containing customizable strings used within the widget's interface for localization purposes. This object allows developers to provide translated or adapted text for various UI elements, ensuring the widget can support multiple languages and regions. It is typically used in combination with the locale property to display content in the desired language. object

              Defines or retrieves an object containing customizable strings used within the widget's interface for localization purposes. This object allows developers to provide translated or adapted text for various UI elements, ensuring the widget can support multiple languages and regions. It is typically used in combination with the locale property to display content in the desired language.

              Default value




              Examples

              Markup and runtime examples for messages:

              HTML:

              <smart-gantt-chart messages="{"de":{"incorrectArgument":"Falsches Argument '{{argumentName}}' in der Methode {{methodName}}.","outOfBounds":"Unbegrenztes Argument {{argumentName}} in der Methode {{methodName}}."}}"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.messages = {"en":{"incorrectArgument":"{{elementType}}: Incorrect argument {{argumentName}} in method {{methodName}}.","outOfBounds":"{{elementType}}: Out of bounds argument {{argumentName}} in method {{methodName}}."}};

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const messages = el.messages;

              minSpecifies the earliest allowable date that can be selected or displayed on the Timeline, effectively setting the lower date limit.string | date

              Specifies the earliest allowable date that can be selected or displayed on the Timeline, effectively setting the lower date limit.

              Default value

              1900-1-1

              Examples

              Markup and runtime examples for min:

              HTML:

              <smart-gantt-chart min="2000-1-1"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.min = "2005-12-31";

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const min = el.min;

              monthFormatSpecifies the date format used for displaying months in the timeline header. This setting defines how month values appear, such as "Jan 2024" or "01/2024", ensuring consistent and customizable presentation of months within the timeline."2-digit" | "numeric" | "long" | "short" | "narrow"

              Specifies the date format used for displaying months in the timeline header. This setting defines how month values appear, such as "Jan 2024" or "01/2024", ensuring consistent and customizable presentation of months within the timeline.

              Default value

              "short"

              Examples

              Markup and runtime examples for monthFormat:

              HTML:

              <smart-gantt-chart month-format="numeric"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.monthFormat = "short";

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const monthFormat = el.monthFormat;

              monthScaleSpecifies the time interval granularity displayed in the Month view, such as whether events are shown by week, day, or custom periods. This setting adjusts how dates and events are grouped and visualized within the Month view of the calendar."day" | "week"

              Specifies the time interval granularity displayed in the Month view, such as whether events are shown by week, day, or custom periods. This setting adjusts how dates and events are grouped and visualized within the Month view of the calendar.

              Default value

              "week"

              Examples

              Markup and runtime examples for monthScale:

              HTML:

              <smart-gantt-chart month-scale="day"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.monthScale = "week";

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const monthScale = el.monthScale;

              nonworkingDaysSpecifies which days of the week, represented by integers from 0 to 6 (where 0 indicates the first day of the week and 6 indicates the last), are considered nonworking days. These selected nonworking days are visually highlighted with colored cells within the timeline display. By default, nonworking days do not influence the task end dates (dateEnd). However, if the adjustToNonworkingTime property is enabled, task scheduling will automatically adjust to account for nonworking days when calculating end dates. number[]

              Specifies which days of the week, represented by integers from 0 to 6 (where 0 indicates the first day of the week and 6 indicates the last), are considered nonworking days. These selected nonworking days are visually highlighted with colored cells within the timeline display. By default, nonworking days do not influence the task end dates (dateEnd). However, if the adjustToNonworkingTime property is enabled, task scheduling will automatically adjust to account for nonworking days when calculating end dates.

              Try a demo showcasing the nonworkingDays property.

              Examples

              Markup and runtime examples for nonworkingDays:

              HTML:

              <smart-gantt-chart nonworking-days="[0,1]"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.nonworkingDays = [0,5,6];

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const nonworkingDays = el.nonworkingDays;

              nonworkingHoursSpecifies which hours of the day are considered nonworking. The nonworking hours are defined using an array that can contain individual hour numbers (e.g., [1, 2, 3] represents 1 AM, 2 AM, and 3 AM as nonworking hours) and/or nested arrays to indicate continuous ranges (e.g., [[0, 6]] represents all hours from 12:00 AM to 6:00 AM inclusive as nonworking hours).In the timeline view, cells corresponding to nonworking hours are visually distinguished (typically with a different color), helping users easily identify unavailable time slots. By default, these nonworking hours do not influence the calculation of a task’s end date (dateEnd). However, if the adjustToNonworkingTime property is enabled, the scheduler will automatically adjust tasks to skip or extend around nonworking hours. number[] | number[][]

              Specifies which hours of the day are considered nonworking. The nonworking hours are defined using an array that can contain individual hour numbers (e.g., [1, 2, 3] represents 1 AM, 2 AM, and 3 AM as nonworking hours) and/or nested arrays to indicate continuous ranges (e.g., [[0, 6]] represents all hours from 12:00 AM to 6:00 AM inclusive as nonworking hours).

              In the timeline view, cells corresponding to nonworking hours are visually distinguished (typically with a different color), helping users easily identify unavailable time slots. By default, these nonworking hours do not influence the calculation of a task’s end date (dateEnd). However, if the adjustToNonworkingTime property is enabled, the scheduler will automatically adjust tasks to skip or extend around nonworking hours.

              Try a demo showcasing the nonworkingHours property.

              Examples

              Markup and runtime examples for nonworkingHours:

              HTML:

              <smart-gantt-chart nonworking-hours="[[0, 6]]"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.nonworkingHours = [22, 23, [0, 6]];

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const nonworkingHours = el.nonworkingHours;

              onTaskRenderThis function enables complete customization of the task element within your interface. It accepts five arguments, providing granular control over both the task and its visual representation:1. 'task' – The full task object containing all associated data.2. 'segment' – The current segment object for the task. If the task consists of a single segment, this argument will be the same as the task object.3. 'taskElement' – The root HTML element representing the task in the DOM.4. 'segmentElement' – The HTML element representing the current segment of the task.5. 'labelElement' – The HTML element that displays the segment’s label.You can use these arguments to modify the appearance, content, and behavior of the task and its segments, allowing for advanced UI customizations tailored to different application needs.function | null

              This function enables complete customization of the task element within your interface. It accepts five arguments, providing granular control over both the task and its visual representation:

              1. 'task' – The full task object containing all associated data.
              2. 'segment' – The current segment object for the task. If the task consists of a single segment, this argument will be the same as the task object.
              3. 'taskElement' – The root HTML element representing the task in the DOM.
              4. 'segmentElement' – The HTML element representing the current segment of the task.
              5. 'labelElement' – The HTML element that displays the segment’s label.

              You can use these arguments to modify the appearance, content, and behavior of the task and its segments, allowing for advanced UI customizations tailored to different application needs.

              Try a demo showcasing the onTaskRender property.

              Examples

              Markup and runtime examples for onTaskRender:

              HTML:

              <smart-gantt-chart on-task-render="null"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.onTaskRender = "function(task, segment, taskElement, segmentElement, labelElement) { if (task.type === 'task') { segmentElement.style.color = 'red'; } }";

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const onTaskRender = el.onTaskRender;

              pagingDetermines whether paging functionality is enabled. When set to true, data is divided into discrete pages for easier navigation and viewing; when false, all data is displayed in a single, continuous view. You can use this property to enable or disable paging, or retrieve its current state.boolean

              Determines whether paging functionality is enabled. When set to true, data is divided into discrete pages for easier navigation and viewing; when false, all data is displayed in a single, continuous view. You can use this property to enable or disable paging, or retrieve its current state.

              Default value

              false
              Try a demo showcasing the paging property.

              Examples

              Markup and runtime examples for paging:

              HTML attribute:

              <smart-gantt-chart paging></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.paging = false;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const paging = el.paging;

              popupWindowCustomizationFunctionA function that allows complete customization of the popup window used for task interactions by modifying its properties before it is displayed. The function receives three arguments: target — The popup window instance that is about to be opened. You can use this parameter to modify visual aspects (such as size, title, buttons, and content) or add custom behavior. type — Specifies the purpose of the popup window. Possible values are: 'task': For editing or viewing a task. 'confirm': For displaying a confirmation prompt. 'connection': For actions related to connections between tasks (e.g., deleting a link). item — The data object associated with the popup window. This will be the current task (for 'task' and 'confirm' types) or the specific connection object (for the 'connection' type). Use this function to dynamically personalize the popup window’s content, appearance, or logic based on the context of the action being performed.function | null

              A function that allows complete customization of the popup window used for task interactions by modifying its properties before it is displayed. The function receives three arguments:




              target — The popup window instance that is about to be opened. You can use this parameter to modify visual aspects (such as size, title, buttons, and content) or add custom behavior.




              type — Specifies the purpose of the popup window. Possible values are:


              'task': For editing or viewing a task.


              'confirm': For displaying a confirmation prompt.


              'connection': For actions related to connections between tasks (e.g., deleting a link).






              item — The data object associated with the popup window. This will be the current task (for 'task' and 'confirm' types) or the specific connection object (for the 'connection' type).




              Use this function to dynamically personalize the popup window’s content, appearance, or logic based on the context of the action being performed.

              Try a demo showcasing the popupWindowCustomizationFunction property.

              Examples

              Markup and runtime examples for popupWindowCustomizationFunction:

              HTML:

              <smart-gantt-chart popup-window-customization-function="null"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.popupWindowCustomizationFunction = "function(target, type, item) { if (type === 'task') { target.headerPosition = 'left'; } }";

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const popupWindowCustomizationFunction = el.popupWindowCustomizationFunction;

              popupWindowTabsSpecifies which tab sections are displayed within the popup window. This property accepts the following three values: general – Displays the General tab, which shows the main properties of the task as defined by the taskColumns property. dependency – Displays the Dependency tab, where users can view, add, or remove connections (dependencies) related to the current task. segments – Displays the Segments tab, where users can view, create, or delete segments that make up the task. Use these values to control which tabs are visible to users in the popup window interface. Multiple values can be specified to show more than one tab.string[]

              Specifies which tab sections are displayed within the popup window. This property accepts the following three values:




              general – Displays the General tab, which shows the main properties of the task as defined by the taskColumns property.




              dependency – Displays the Dependency tab, where users can view, add, or remove connections (dependencies) related to the current task.




              segments – Displays the Segments tab, where users can view, create, or delete segments that make up the task.




              Use these values to control which tabs are visible to users in the popup window interface. Multiple values can be specified to show more than one tab.

              Default value

              ['general', 'dependency', 'segments']

              Examples

              Markup and runtime examples for popupWindowTabs:

              HTML:

              <smart-gantt-chart popup-window-tabs="['general', 'dependency']"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.popupWindowTabs = ['general'];

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const popupWindowTabs = el.popupWindowTabs;

              progressLabelFormatFunctionThis property accepts a formatting function for the progress label displayed on the Timeline task. The function should return a string representing the desired label text. By default, the progress label is hidden; it can be made visible by setting the showProgressLabel property to true.function | null

              This property accepts a formatting function for the progress label displayed on the Timeline task. The function should return a string representing the desired label text. By default, the progress label is hidden; it can be made visible by setting the showProgressLabel property to true.

              Try a demo showcasing the progressLabelFormatFunction property.

              Examples

              Markup and runtime examples for progressLabelFormatFunction:

              HTML:

              <smart-gantt-chart progress-label-format-function="function(progress) { return progress }"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.progressLabelFormatFunction = null;

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const progressLabelFormatFunction = el.progressLabelFormatFunction;

              quarterFormatSpecifies the date format used to display quarter representations (e.g., "Q1 2024") in the timeline header. This setting controls how quarter periods are labeled, ensuring consistency and clarity in the timeline’s visual presentation."numeric" | "long" | "short"

              Specifies the date format used to display quarter representations (e.g., "Q1 2024") in the timeline header. This setting controls how quarter periods are labeled, ensuring consistency and clarity in the timeline’s visual presentation.

              Default value

              "short"

              Examples

              Markup and runtime examples for quarterFormat:

              HTML:

              <smart-gantt-chart quarter-format="numeric"></smart-gantt-chart>

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-gantt-chart');
el.quarterFormat = "short";

              Read the current value:

              const el = document.querySelector('smart-gantt-chart');
const quarterFormat = el.quarterFormat;

              resourceColumnsDetermines which columns are displayed in the Resource Tree. Each entry in this property should be an Object containing the following keys:- label: Specifies the column header text as it will appear in the Task Tree.- value: Defines the property or content to be displayed in the cells of that column.By default, a single column displays all resource labels. You can configure additional columns by adding objects with custom label and value pairs.Additional configurable properties for each column object include: formatFunction: A callback function that allows customization of the cell content for the column. This function receives two arguments: the label text (as a string) and the index of the resource. It should return a string, which will be used as the displayed cell content. min: Sets the minimum width (in pixels or another supported unit) for the column. max: Sets the maximum width for the column. size: Specifies the fixed width for the column.Use this configuration to tailor which resource attributes appear as columns in the Resource Tree and how they are displayed. Click for more details. Property object's options:
                {label: string, value: string}[]

                Determines which columns are displayed in the Resource Tree.
                Each entry in this property should be an Object containing the following keys:

                - label: Specifies the column header text as it will appear in the Task Tree.
                - value: Defines the property or content to be displayed in the cells of that column.

                By default, a single column displays all resource labels. You can configure additional columns by adding objects with custom label and value pairs.

                Additional configurable properties for each column object include:



                formatFunction: A callback function that allows customization of the cell content for the column. This function receives two arguments: the label text (as a string) and the index of the resource. It should return a string, which will be used as the displayed cell content.


                min: Sets the minimum width (in pixels or another supported unit) for the column.


                max: Sets the maximum width for the column.


                size: Specifies the fixed width for the column.



                Use this configuration to tailor which resource attributes appear as columns in the Resource Tree and how they are displayed.

                Properties

                formatFunctionColumn's format function. You can use it to customize the column label's rendering.
                labelColumn's label.
                minColumn's min size.
                sizeColumn's size.
                valueColumn's value. The value shold reference an actual resoruce attribute.
                Try a demo showcasing the resourceColumns property.

                Examples

                Markup and runtime examples for resourceColumns:

                HTML:

                <smart-gantt-chart resource-columns="{ "label": "Task Name", "value": "label" }"></smart-gantt-chart>

                Vanilla JS — prefer #id if multiple widgets exist on the page:

                const el = document.querySelector('smart-gantt-chart');
el.resourceColumns = { "label": "Date Start", "value": "dateStart" }, { "label": "Duration", "value": "duration" };

                Read the current value:

                const el = document.querySelector('smart-gantt-chart');
const resourceColumns = el.resourceColumns;

                formatFunctionColumn's format function. You can use it to customize the column label's rendering.any

                Column's format function. You can use it to customize the column label's rendering.

                Back to root property: resourceColumns

                Read the nested value:

                const el = document.querySelector('smart-gantt-chart');
const formatFunction = el.resourceColumns[0].formatFunction;

                labelColumn's label.string | null

                Column's label.

                Default value

                ""

                Back to root property: resourceColumns

                Read the nested value:

                const el = document.querySelector('smart-gantt-chart');
const label = el.resourceColumns[0].label;

                minColumn's min size.string | number | null

                Column's min size.

                Default value

                0

                Back to root property: resourceColumns

                Read the nested value:

                const el = document.querySelector('smart-gantt-chart');
const min = el.resourceColumns[0].min;

                sizeColumn's size.string | number | null

                Column's size.

                Default value

                0

                Back to root property: resourceColumns

                Read the nested value:

                const el = document.querySelector('smart-gantt-chart');
const size = el.resourceColumns[0].size;

                valueColumn's value. The value shold reference an actual resoruce attribute.string | null

                Column's value. The value shold reference an actual resoruce attribute.

                Default value

                ""

                Back to root property: resourceColumns

                Read the nested value:

                const el = document.querySelector('smart-gantt-chart');
const value = el.resourceColumns[0].value;

                resourceFilteringSpecifies whether the Resource Table supports filtering functionality, allowing users to narrow down and display specific data based on filter criteria. If set to true, filters can be applied to the Resource Table; if false, filtering options will be disabled.boolean

                Specifies whether the Resource Table supports filtering functionality, allowing users to narrow down and display specific data based on filter criteria. If set to true, filters can be applied to the Resource Table; if false, filtering options will be disabled.

                Default value

                false

                Examples

                Markup and runtime examples for resourceFiltering:

                HTML attribute:

                <smart-gantt-chart resource-filtering></smart-gantt-chart>

                Vanilla JS — prefer #id if multiple widgets exist on the page:

                const el = document.querySelector('smart-gantt-chart');
el.resourceFiltering = false;

                Read the current value:

                const el = document.querySelector('smart-gantt-chart');
const resourceFiltering = el.resourceFiltering;

                resourceGroupFormatFunctionA format function that enables you to customize the display of group row labels when the groupByResources option is enabled. This function allows for dynamic re-formatting of group headers, so you can control how resource names or other grouping information appear in the UI.function | null

                A format function that enables you to customize the display of group row labels when the groupByResources option is enabled. This function allows for dynamic re-formatting of group headers, so you can control how resource names or other grouping information appear in the UI.

                Examples

                Markup and runtime examples for resourceGroupFormatFunction:

                HTML:

                <smart-gantt-chart resource-group-format-function="null"></smart-gantt-chart>

                Vanilla JS — prefer #id if multiple widgets exist on the page:

                const el = document.querySelector('smart-gantt-chart');
el.resourceGroupFormatFunction = "function(resourceId) { return 'New Resource Group Label' }";

                Read the current value:

                const el = document.querySelector('smart-gantt-chart');
const resourceGroupFormatFunction = el.resourceGroupFormatFunction;

                resourcePanelHeaderTemplateEnables you to define a custom header for the Resource Panel by specifying the content through one of the following options: an HTMLTemplate element, the ID of an existing template, or a function that returns the desired HTML. This allows for flexible and dynamic header customization to fit your application's needs.any

                Enables you to define a custom header for the Resource Panel by specifying the content through one of the following options: an HTMLTemplate element, the ID of an existing template, or a function that returns the desired HTML. This allows for flexible and dynamic header customization to fit your application's needs.

                Try a demo showcasing the resourcePanelHeaderTemplate property.

                Examples

                Markup and runtime examples for resourcePanelHeaderTemplate:

                HTML:

                <smart-gantt-chart resource-panel-header-template="resourcePanelTemplate1"></smart-gantt-chart>

                Vanilla JS — prefer #id if multiple widgets exist on the page:

                const el = document.querySelector('smart-gantt-chart');
el.resourcePanelHeaderTemplate = "resourcePanelTemplate2";

                Read the current value:

                const el = document.querySelector('smart-gantt-chart');
const resourcePanelHeaderTemplate = el.resourcePanelHeaderTemplate;

                resourcePanelMinSpecifies the minimum allowable size (in pixels) for the Resource Panel, ensuring that users cannot resize the panel below this value. This setting helps maintain usability and proper display of the panel's content.number | string

                Specifies the minimum allowable size (in pixels) for the Resource Panel, ensuring that users cannot resize the panel below this value. This setting helps maintain usability and proper display of the panel's content.

                Default value

                100

                Examples

                Markup and runtime examples for resourcePanelMin:

                HTML:

                <smart-gantt-chart resource-panel-min="20%"></smart-gantt-chart>

                Vanilla JS — prefer #id if multiple widgets exist on the page:

                const el = document.querySelector('smart-gantt-chart');
el.resourcePanelMin = "100px";

                Read the current value:

                const el = document.querySelector('smart-gantt-chart');
const resourcePanelMin = el.resourcePanelMin;

                resourcePanelRefreshRateControls how frequently the Resource Panel updates when a task is dragged, resized, or its progress is changed on the Timeline. By setting this property, you can customize the interval (in milliseconds) between automatic refreshes of the resource Tree and Timeline during these interactions. By default, the Resource Panel refreshes instantly after each change, but adjusting this value can help optimize performance for complex project schedules or large datasets.number

                Controls how frequently the Resource Panel updates when a task is dragged, resized, or its progress is changed on the Timeline. By setting this property, you can customize the interval (in milliseconds) between automatic refreshes of the resource Tree and Timeline during these interactions. By default, the Resource Panel refreshes instantly after each change, but adjusting this value can help optimize performance for complex project schedules or large datasets.

                Default value

                0
                Try a demo showcasing the resourcePanelRefreshRate property.

                Examples

                Markup and runtime examples for resourcePanelRefreshRate:

                HTML:

                <smart-gantt-chart resource-panel-refresh-rate="20"></smart-gantt-chart>

                Vanilla JS — prefer #id if multiple widgets exist on the page:

                const el = document.querySelector('smart-gantt-chart');
el.resourcePanelRefreshRate = 0;

                Read the current value:

                const el = document.querySelector('smart-gantt-chart');
const resourcePanelRefreshRate = el.resourcePanelRefreshRate;

                resourcePanelSizeSpecifies the dimensions (width and/or height) of the Resource Panel, controlling how much space it occupies within the user interface. Adjusting this value directly affects the visible area available for displaying resource-related content.number | string

                Specifies the dimensions (width and/or height) of the Resource Panel, controlling how much space it occupies within the user interface. Adjusting this value directly affects the visible area available for displaying resource-related content.

                Default value

                ""
                Try a demo showcasing the resourcePanelSize property.

                Examples

                Markup and runtime examples for resourcePanelSize:

                HTML:

                <smart-gantt-chart resource-panel-size="25%"></smart-gantt-chart>

                Vanilla JS — prefer #id if multiple widgets exist on the page:

                const el = document.querySelector('smart-gantt-chart');
el.resourcePanelSize = "200px";

                Read the current value:

                const el = document.querySelector('smart-gantt-chart');
const resourcePanelSize = el.resourcePanelSize;

                resourcesReturns an array containing a flat list of all resource objects found within the element, including those nested at any level. This getter traverses the element's hierarchy and aggregates all resources into a single, non-nested array for simplified access. Click for more details. Property object's options:
                  {label: string, capacity: number, value: string, workload: number, progress: number, id: string, progress: number, workload: number, class: string }[]

                  Returns an array containing a flat list of all resource objects found within the element, including those nested at any level. This getter traverses the element's hierarchy and aggregates all resources into a single, non-nested array for simplified access.

                  Properties

                  capacityThe capacity of a resource. By default it is used to determine the working capacity ( in hours ) of the resource.
                  classResource class. Used to style the resource Timeline.
                  hiddenResource visibility.
                  idResource id. The unique id of the resource.
                  labelResource label.
                  maxCapacityResource max capacity. By default this property is used for the resource timeline histogram where maxCapacity is the maximum working capacity in hours of the resource.
                  minCapacityResource min capacity
                  progressResource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.
                  typeResource type.
                  valueResource value.
                  workloadResource workload. Workload is the total working time in hours of a resource based on the tasks it is assigned to. This property is automatically calculated.
                  Try a demo showcasing the resources property.

                  Full working example

                  Minimal setup for resources with the data and bindings you usually use together on this component.

                  JavaScript — Gantt chart with resources:

                  const dataSource = [
	{ id: 1, label: 'Discovery', dateStart: '2026-04-01', dateEnd: '2026-04-04', type: 'task', progress: 100 },
	{ id: 2, label: 'Build', dateStart: '2026-04-05', dateEnd: '2026-04-12', type: 'task', progress: 35 }
];

const resources = [
	{ id: 'u1', label: 'Team A' },
	{ id: 'u2', label: 'Team B' }
];

const gantt = new Smart.GanttChart('#myGantt', {
	dataSource,
	resources
});

                  capacityThe capacity of a resource. By default it is used to determine the working capacity ( in hours ) of the resource.number

                  The capacity of a resource. By default it is used to determine the working capacity ( in hours ) of the resource.

                  Default value

                  8

                  Back to root property: resources

                  Read the nested value:

                  const el = document.querySelector('smart-gantt-chart');
const capacity = el.resources[0].capacity;

                  classResource class. Used to style the resource Timeline.string

                  Resource class. Used to style the resource Timeline.

                  Default value

                  ""

                  Back to root property: resources

                  Read the nested value:

                  const el = document.querySelector('smart-gantt-chart');
const class = el.resources[0].class;

                  hiddenResource visibility.boolean | undefined

                  Resource visibility.

                  Default value

                  false

                  Back to root property: resources

                  Read the nested value:

                  const el = document.querySelector('smart-gantt-chart');
const hidden = el.resources[0].hidden;

                  idResource id. The unique id of the resource.string

                  Resource id. The unique id of the resource.

                  Default value

                  ""

                  Back to root property: resources

                  Read the nested value:

                  const el = document.querySelector('smart-gantt-chart');
const id = el.resources[0].id;

                  labelResource label.string | null

                  Resource label.

                  Default value

                  0

                  Back to root property: resources

                  Read the nested value:

                  const el = document.querySelector('smart-gantt-chart');
const label = el.resources[0].label;

                  maxCapacityResource max capacity. By default this property is used for the resource timeline histogram where maxCapacity is the maximum working capacity in hours of the resource.number

                  Resource max capacity. By default this property is used for the resource timeline histogram where maxCapacity is the maximum working capacity in hours of the resource.

                  Default value

                  0

                  Back to root property: resources

                  Read the nested value:

                  const el = document.querySelector('smart-gantt-chart');
const maxCapacity = el.resources[0].maxCapacity;

                  minCapacityResource min capacitynumber

                  Resource min capacity

                  Default value

                  0

                  Back to root property: resources

                  Read the nested value:

                  const el = document.querySelector('smart-gantt-chart');
const minCapacity = el.resources[0].minCapacity;

                  progressResource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.number

                  Resource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.

                  Default value

                  0

                  Back to root property: resources

                  Read the nested value:

                  const el = document.querySelector('smart-gantt-chart');
const progress = el.resources[0].progress;

                  typeResource type.any

                  Resource type.

                  Default value

                  ""

                  Back to root property: resources

                  Read the nested value:

                  const el = document.querySelector('smart-gantt-chart');
const type = el.resources[0].type;

                  valueResource value.any

                  Resource value.

                  Default value

                  ""

                  Back to root property: resources

                  Read the nested value:

                  const el = document.querySelector('smart-gantt-chart');
const value = el.resources[0].value;

                  workloadResource workload. Workload is the total working time in hours of a resource based on the tasks it is assigned to. This property is automatically calculated.string | number

                  Resource workload. Workload is the total working time in hours of a resource based on the tasks it is assigned to. This property is automatically calculated.

                  Default value

                  0

                  Back to root property: resources

                  Read the nested value:

                  const el = document.querySelector('smart-gantt-chart');
const workload = el.resources[0].workload;

                  resourceTimelineFormatFunctionA callback function that allows you to fully control and customize the content displayed in the cells of the resource timeline. The callback receives three parameters: taskIndexes – An array containing the indexes of the tasks assigned to the current resource in this cell. resourceIndex – The index representing the current resource row. cellDate – A Date object or date string representing the current cell’s date.This property is specifically used when the resourceTimelineView is set to custom. The expected return value depends on the value of resourceTimelineMode: diagram – Return a string that will be rendered as the cell’s content. histogram – Return an object with the following properties: capacity: The current value to be visualized for the cell. maxCapacity: The maximum value for the histogram, used to determine the cell visualization’s scale. custom – (Optional) You may return any custom content for the timeline cell, giving you full flexibility to represent resources however you wish.Use this callback to tailor the timeline’s resource cell display—such as showing aggregated values, custom HTML, or visualizations—according to your application’s requirements.any

                  A callback function that allows you to fully control and customize the content displayed in the cells of the resource timeline. The callback receives three parameters:



                  taskIndexes – An array containing the indexes of the tasks assigned to the current resource in this cell.


                  resourceIndex – The index representing the current resource row.


                  cellDate – A Date object or date string representing the current cell’s date.



                  This property is specifically used when the resourceTimelineView is set to custom. The expected return value depends on the value of resourceTimelineMode:



                  diagram – Return a string that will be rendered as the cell’s content.


                  histogram – Return an object with the following properties:


                  capacity: The current value to be visualized for the cell.


                  maxCapacity: The maximum value for the histogram, used to determine the cell visualization’s scale.





                  custom – (Optional) You may return any custom content for the timeline cell, giving you full flexibility to represent resources however you wish.



                  Use this callback to tailor the timeline’s resource cell display—such as showing aggregated values, custom HTML, or visualizations—according to your application’s requirements.

                  Try a demo showcasing the resourceTimelineFormatFunction property.

                  resourceTimelineModeSpecifies the method used to display the resource's capacity within the resource timeline. By default, the capacity is shown in hours, but this may vary depending on the value of the element’s view property. This setting controls how capacity data is visually represented for each resource, ensuring that users see capacity information in a format appropriate to the current timeline view (such as hours, days, or custom intervals)."diagram" | "histogram" | "custom"

                  Specifies the method used to display the resource's capacity within the resource timeline. By default, the capacity is shown in hours, but this may vary depending on the value of the element’s view property. This setting controls how capacity data is visually represented for each resource, ensuring that users see capacity information in a format appropriate to the current timeline view (such as hours, days, or custom intervals).

                  Allowed Values

                  • "diagram" - Displays the capacity of the resources in the resource timeline for the tasks that the resource is assigned to.
                  • "histogram" - Displays a histogram of the capacity and maxCapacity properties of the resources for the tasks they are assigned to in the resource timeline.
                  • "custom" - Indicates that a custom content will be displayed for the resources in the timeline. The content is determined by the return value of the resourceTimelineFormatFunction.

                  Default value

                  "diagram"
                  Try a demo showcasing the resourceTimelineMode property.

                  Examples

                  Markup and runtime examples for resourceTimelineMode:

                  HTML:

                  <smart-gantt-chart resource-timeline-mode="histogram"></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.resourceTimelineMode = "diagram";

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const resourceTimelineMode = el.resourceTimelineMode;

                  resourceTimelineViewSpecifies the layout and presentation of resources within the resource Timeline, controlling how individual resources are visually arranged, organized, and grouped for optimal clarity and user experience."hours" | "tasks" | "custom"

                  Specifies the layout and presentation of resources within the resource Timeline, controlling how individual resources are visually arranged, organized, and grouped for optimal clarity and user experience.

                  Allowed Values

                  • "hours" - Displays the capacity, maxCapacity and workload of the resources in the Timeline as hours per task.
                  • "tasks" - Displays the number of tasks per resource depending on the date of the cells.
                  • "custom" - Allows to customize the way resources are displayed in the Timeline via the resourceTimelineFormatFunction callback. The expected result from the callback is a string.

                  Default value

                  "hours"
                  Try a demo showcasing the resourceTimelineView property.

                  Examples

                  Markup and runtime examples for resourceTimelineView:

                  HTML:

                  <smart-gantt-chart resource-timeline-view="hours"></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.resourceTimelineView = "tasks";

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const resourceTimelineView = el.resourceTimelineView;

                  rightToLeftGets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and UI elements in a right-to-left orientation, ensuring proper localization for RTL locales.boolean

                  Gets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and UI elements in a right-to-left orientation, ensuring proper localization for RTL locales.

                  Default value

                  false
                  Try a demo showcasing the rightToLeft property.

                  Examples

                  Markup and runtime examples for rightToLeft:

                  HTML attribute:

                  <smart-gantt-chart right-to-left></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.rightToLeft = false;

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const rightToLeft = el.rightToLeft;

                  selectedResourceIdsSets which resources to select by their id or gets the currently selected resource ids. If no id is provided for the resource, an internal id is generated for each resource according to it's index(tree path)."---'Improved Version:'Specifies which resources should be selected by providing their unique IDs, or retrieves the list of currently selected resource IDs. If a resource does not have a user-defined ID, the system automatically generates an internal ID for each resource based on its position within the resource hierarchy (tree path or index). This ensures that every resource can be uniquely identified, even if explicit IDs are not assigned. number[] | string[]

                  Sets which resources to select by their id or gets the currently selected resource ids. If no id is provided for the resource, an internal id is generated for each resource according to it's index(tree path)."

                  ---

                  'Improved Version:'

                  Specifies which resources should be selected by providing their unique IDs, or retrieves the list of currently selected resource IDs. If a resource does not have a user-defined ID, the system automatically generates an internal ID for each resource based on its position within the resource hierarchy (tree path or index). This ensures that every resource can be uniquely identified, even if explicit IDs are not assigned.

                  Examples

                  Markup and runtime examples for selectedResourceIds:

                  HTML:

                  <smart-gantt-chart selected-resource-ids="['2']"></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.selectedResourceIds = ['0'];

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const selectedResourceIds = el.selectedResourceIds;

                  selectedTaskIds"Allows you to specify which tasks are selected by providing their unique task IDs, or retrieve the IDs of the currently selected tasks. If a task does not already have an ID, the system automatically generates an internal ID for it based on its position in the task hierarchy (using its index or tree path)." number[] | string[]



                  "Allows you to specify which tasks are selected by providing their unique task IDs, or retrieve the IDs of the currently selected tasks. If a task does not already have an ID, the system automatically generates an internal ID for it based on its position in the task hierarchy (using its index or tree path)."

                  Examples

                  Markup and runtime examples for selectedTaskIds:

                  HTML:

                  <smart-gantt-chart selected-task-ids="['2']"></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.selectedTaskIds = ['0'];

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const selectedTaskIds = el.selectedTaskIds;

                  selectionModeDefines or retrieves the selection mode for the component. This property is relevant only when the selection feature is enabled. It determines how users can select items (e.g., single, multiple), and has no effect if selection is disabled."one" | "many" | "extended"

                  Defines or retrieves the selection mode for the component. This property is relevant only when the selection feature is enabled. It determines how users can select items (e.g., single, multiple), and has no effect if selection is disabled.

                  Allowed Values

                  • "one" - Single row can be selected by clicking a row or a checkbox.
                  • "many" - Multiple rows can be selected by clicking the rows or their respective checkboxes.
                  • "extended" - Single row can be selected by clicking it. Multiple rows can be selected by Ctrl- or Shift-clicking the rows or just clicking their respective checkboxes.

                  Default value

                  "many"
                  Try a demo showcasing the selectionMode property.

                  Examples

                  Markup and runtime examples for selectionMode:

                  HTML:

                  <smart-gantt-chart selection-mode="extended"></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.selectionMode = "many";

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const selectionMode = el.selectionMode;

                  shadeUntilCurrentTimeControls whether the current time shader is active. When enabled, all cells corresponding to past time periods will be visually shaded to distinguish them from present and future time slots. Disabling this option will display all cells without any time-based shading.boolean

                  Controls whether the current time shader is active. When enabled, all cells corresponding to past time periods will be visually shaded to distinguish them from present and future time slots. Disabling this option will display all cells without any time-based shading.

                  Default value

                  false
                  Try a demo showcasing the shadeUntilCurrentTime property.

                  Examples

                  Markup and runtime examples for shadeUntilCurrentTime:

                  HTML attribute:

                  <smart-gantt-chart shade-until-current-time></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.shadeUntilCurrentTime = false;

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const shadeUntilCurrentTime = el.shadeUntilCurrentTime;

                  showBaselineControls the visibility of task baselines in the interface. Baselines represent the original planned schedule of tasks and are specified using the 'planned' attribute on each task object within the dataSource property. When this option is enabled, the baselines will be displayed alongside the actual task data for comparison.boolean

                  Controls the visibility of task baselines in the interface. Baselines represent the original planned schedule of tasks and are specified using the 'planned' attribute on each task object within the dataSource property. When this option is enabled, the baselines will be displayed alongside the actual task data for comparison.

                  Default value

                  false

                  Examples

                  Markup and runtime examples for showBaseline:

                  HTML attribute:

                  <smart-gantt-chart show-baseline></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.showBaseline = false;

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const showBaseline = el.showBaseline;

                  showProgressLabelDisplays a progress label within the progress bars for each Timeline task, providing a clear visual indication of the current completion percentage directly on the corresponding task's bar.boolean

                  Displays a progress label within the progress bars for each Timeline task, providing a clear visual indication of the current completion percentage directly on the corresponding task's bar.

                  Default value

                  false

                  Examples

                  Markup and runtime examples for showProgressLabel:

                  HTML attribute:

                  <smart-gantt-chart show-progress-label></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.showProgressLabel = false;

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const showProgressLabel = el.showProgressLabel;

                  showSelectionColumnDisplays the selection column in the Task or Resource Table. When enabled, a checkbox column appears, allowing users to select individual tasks or resources directly from the table. This feature facilitates bulk actions or easy identification of selected items.boolean

                  Displays the selection column in the Task or Resource Table. When enabled, a checkbox column appears, allowing users to select individual tasks or resources directly from the table. This feature facilitates bulk actions or easy identification of selected items.

                  Default value

                  false

                  Examples

                  Markup and runtime examples for showSelectionColumn:

                  HTML attribute:

                  <smart-gantt-chart show-selection-column></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.showSelectionColumn = false;

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const showSelectionColumn = el.showSelectionColumn;

                  snapToNearestIf enabled, the dateStart and dateEnd values of tasks will be automatically adjusted (coerced) to align with the nearest timeline cell boundary, based on the current timeline view. This setting also affects task positioning during drag-and-drop operations, ensuring that tasks always snap to the closest valid timeline interval when they are moved or resized.boolean

                  If enabled, the dateStart and dateEnd values of tasks will be automatically adjusted (coerced) to align with the nearest timeline cell boundary, based on the current timeline view. This setting also affects task positioning during drag-and-drop operations, ensuring that tasks always snap to the closest valid timeline interval when they are moved or resized.

                  Default value

                  false

                  Examples

                  Markup and runtime examples for snapToNearest:

                  HTML attribute:

                  <smart-gantt-chart snap-to-nearest></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.snapToNearest = false;

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const snapToNearest = el.snapToNearest;

                  sortFunctionEnables you to specify a custom sorting function that will be invoked whenever a column in the table is sorted, allowing you to override the default sorting logic with customized behavior. The custom function receives the following parameters:
                    dataSource – The complete array of data objects currently used by the table. sortColumns – An array containing the keys or data fields of the columns that need to be sorted, in the order of user preference or configuration. directions – An array specifying the sort direction ('asc' or 'desc') for each column listed in sortColumns. The direction at each index corresponds to the column at the same index. defaultCompareFunctions – An array of default comparison functions for each column, aligned by index with sortColumns. Use these as fallbacks when only some columns require custom sorting logic.
                  By implementing your own sorting function, you can customize the way the table data is ordered—such as sorting complex data structures, handling locale-specific strings, or applying multi-level sorts—while optionally leveraging the provided default comparison functions for columns that do not require special handling.                  { (dataSource: any, sortColumns: string[], directions: string[], defaultCompareFunctions: { (firstRecord: any, secondRecord: any): number }[]): void }

                  Enables you to specify a custom sorting function that will be invoked whenever a column in the table is sorted, allowing you to override the default sorting logic with customized behavior. The custom function receives the following parameters:



                    dataSource – The complete array of data objects currently used by the table.


                    sortColumns – An array containing the keys or data fields of the columns that need to be sorted, in the order of user preference or configuration.


                    directions – An array specifying the sort direction ('asc' or 'desc') for each column listed in sortColumns. The direction at each index corresponds to the column at the same index.


                    defaultCompareFunctions – An array of default comparison functions for each column, aligned by index with sortColumns. Use these as fallbacks when only some columns require custom sorting logic.



                  By implementing your own sorting function, you can customize the way the table data is ordered—such as sorting complex data structures, handling locale-specific strings, or applying multi-level sorts—while optionally leveraging the provided default comparison functions for columns that do not require special handling.

                  Examples

                  Markup and runtime examples for sortFunction:

                  HTML:

                  <smart-gantt-chart sort-function="(dataSource, sortColumns, directions, compareFunctions) => dataSource.sort((a, b) => a - b)"></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.sortFunction = "(dataSource, sortColumns, directions, compareFunctions) => dataSource.sort((a, b) => b - a)";

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const sortFunction = el.sortFunction;

                  sortModeSpecifies whether the GanttChart allows sorting by a single column, multiple columns, or disallows column sorting entirely. This setting controls the user's ability to organize tasks in the chart by clicking on one or more column headers. "none" | "one" | "many"

                  Specifies whether the GanttChart allows sorting by a single column, multiple columns, or disallows column sorting entirely. This setting controls the user's ability to organize tasks in the chart by clicking on one or more column headers.

                  Allowed Values

                  • "none" - Sorting is disabled. Default value.
                  • "one" - Allows sorting by a single column.
                  • "many" - Allows sorting by multiple columns.

                  Default value

                  "none"
                  Try a demo showcasing the sortMode property.

                  Examples

                  Markup and runtime examples for sortMode:

                  HTML:

                  <smart-gantt-chart sort-mode="many"></smart-gantt-chart>

                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                  const el = document.querySelector('smart-gantt-chart');
el.sortMode = "one";

                  Read the current value:

                  const el = document.querySelector('smart-gantt-chart');
const sortMode = el.sortMode;

                  taskColumns'Description'Defines which columns are displayed in the Task Tree. The value of this property should be an array of objects, each describing a column. Each column object must include the following required keys:- label: Specifies the text that will appear as the column header in the Task Tree.- value: Specifies the key of the task attribute from the dataSource to display as the cell content in that column.By default, one column will be shown with all task labels. Additional columns can be configured using this property.'Optional properties for each column object:' formatFunction: A function for customizing the display content of each cell in the column. Receives the final label value (string) and returns the desired rendering (string or element). min: Sets the minimum width of the column (in pixels or CSS units). max: Sets the maximum width of the column (in pixels or CSS units). size: Sets the default (actual) width of the column (in pixels or CSS units). customEditor: A callback for providing a custom editor for the column when editing via a dialog/window. It accepts two arguments: label: The column label. value: The current cell value in the column. The function should return the editor component or element. setCustomEditorValue: A callback used to programmatically set the value of the custom editor. getCustomEditorValue: A callback used to programmatically retrieve the value from the custom editor.This configuration enables fine-grained customization of how task attributes are displayed and edited within each column of the Task Tree. Click for more details. Property object's options:
                    {label: string, value: string}[]

                    'Description'

                    Defines which columns are displayed in the Task Tree. The value of this property should be an array of objects, each describing a column. Each column object must include the following required keys:

                    - label: Specifies the text that will appear as the column header in the Task Tree.
                    - value: Specifies the key of the task attribute from the dataSource to display as the cell content in that column.

                    By default, one column will be shown with all task labels. Additional columns can be configured using this property.

                    'Optional properties for each column object:'



                    formatFunction: A function for customizing the display content of each cell in the column. Receives the final label value (string) and returns the desired rendering (string or element).


                    min: Sets the minimum width of the column (in pixels or CSS units).


                    max: Sets the maximum width of the column (in pixels or CSS units).


                    size: Sets the default (actual) width of the column (in pixels or CSS units).


                    customEditor: A callback for providing a custom editor for the column when editing via a dialog/window. It accepts two arguments:


                    label: The column label.


                    value: The current cell value in the column.


                    The function should return the editor component or element.


                    setCustomEditorValue: A callback used to programmatically set the value of the custom editor.


                    getCustomEditorValue: A callback used to programmatically retrieve the value from the custom editor.



                    This configuration enables fine-grained customization of how task attributes are displayed and edited within each column of the Task Tree.

                    Properties

                    customEditorA function that allows to set a custom editor for the column's value in the Editor Window. The function must return an HTMLElement. The function has two arguments: name - the name of the task property that is going to be edited.value - the value of the task property that is going to be edited. It's also important to define a getCustomEditorValue to return the value from the custom editor.
                    dateFormatApplies only to column's that display dates (e.g. dateStart/dateEnd, etc). This property allows to define a JS Intl.DateTimeFormat object in order to format the dates of the column. Here is an example value of the property: 
                    dateFormat: { year: '2-digit', month: 'long', day: 'numeric' }
                    . Another option is to use a date format string. Built-in Date formats:// short date pattern'd' - 'M/d/yyyy',// long date pattern'D' - 'dddd, MMMM dd, yyyy',// short time pattern't' - 'h:mm tt',// long time pattern'T' - 'h:mm:ss tt',// long date, short time pattern'f' - 'dddd, MMMM dd, yyyy h:mm tt',// long date, long time pattern'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',// month/day pattern'M' - 'MMMM dd',// month/year pattern'Y' - 'yyyy MMMM',// S is a sortable format that does not vary by culture'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'Date format strings:'d'-the day of the month;'dd'-the day of the month'ddd'-the abbreviated name of the day of the week'dddd'- the full name of the day of the week'h'-the hour, using a 12-hour clock from 1 to 12'hh'-the hour, using a 12-hour clock from 01 to 12'H'-the hour, using a 24-hour clock from 0 to 23'HH'- the hour, using a 24-hour clock from 00 to 23'm'-the minute, from 0 through 59'mm'-the minutes,from 00 though59'M'- the month, from 1 through 12'MM'- the month, from 01 through 12'MMM'-the abbreviated name of the month'MMMM'-the full name of the month's'-the second, from 0 through 59'ss'-the second, from 00 through 59't'- the first character of the AM/PM designator'tt'-the AM/PM designator'y'- the year, from 0 to 99'yy'- the year, from 00 to 99'yyy'-the year, with a minimum of three digits'yyyy'-the year as a four-digit number;'yyyyy'-the year as a four-digit number.
                    disableEditDetermines whether the task propery determined by column can be edited from the Window editor or not. By default editing is enabled.
                    formatFunctionColumn's format function. You can use it to customize the column label's rendering.
                    getCustomEditorValueA function that is used in conjunction with customEditor allows to return the value of the custom editor. Since the editor is unknown by the element, this function allows to return the expected result from the editor. It has one argument - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
                    labelColumn's label.
                    minWidthColumn's min width.
                    numberFormatApplies only to column's that display numbers. This property allows to define a JS Intl.NumberFormat object in order to format the numbers of the column. Another option is to use a number format string. Number format strings: 'd' - decimal numbers.'f' - floating-point numbers.'n' - integer numbers.'c' - currency numbers.'p' - percentage numbers.For adding decimal places to the numbers, add a number after the formatting striFor example: 'c3' displays a number in this format $25.256
                    setCustomEditorValueA function that is used in conjunction with customEditor allows to set the value of the custom editor. Since the editor is unknown by the element, this function allows to set the expected value to the editor. It has three arguments - editor - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.columnValue - the value property of the column.value - the value of the task property that the column displays(the editor value).
                    sizeColumn's size.
                    valueColumn's value.
                    Try a demo showcasing the taskColumns property.

                    Examples

                    Markup and runtime examples for taskColumns:

                    HTML:

                    <smart-gantt-chart task-columns="{ "label": "Task Name", "value": "label" }"></smart-gantt-chart>

                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                    const el = document.querySelector('smart-gantt-chart');
el.taskColumns = { "label": "Date Start", "value": "dateStart" }, { "label": "Duration", "value": "duration" };

                    Read the current value:

                    const el = document.querySelector('smart-gantt-chart');
const taskColumns = el.taskColumns;

                    customEditorA function that allows to set a custom editor for the column's value in the Editor Window. The function must return an HTMLElement. The function has two arguments: name - the name of the task property that is going to be edited.value - the value of the task property that is going to be edited. It's also important to define a getCustomEditorValue to return the value from the custom editor.function | undefined | null

                    A function that allows to set a custom editor for the column's value in the Editor Window. The function must return an HTMLElement. The function has two arguments:
                    name - the name of the task property that is going to be edited.

                    value - the value of the task property that is going to be edited.
                    It's also important to define a getCustomEditorValue to return the value from the custom editor.

                    Back to root property: taskColumns

                    Read the nested value:

                    const el = document.querySelector('smart-gantt-chart');
const customEditor = el.taskColumns[0].customEditor;

                    dateFormatApplies only to column's that display dates (e.g. dateStart/dateEnd, etc). This property allows to define a JS Intl.DateTimeFormat object in order to format the dates of the column. Here is an example value of the property: 
                    dateFormat: { year: '2-digit', month: 'long', day: 'numeric' }
                    . Another option is to use a date format string. Built-in Date formats:// short date pattern'd' - 'M/d/yyyy',// long date pattern'D' - 'dddd, MMMM dd, yyyy',// short time pattern't' - 'h:mm tt',// long time pattern'T' - 'h:mm:ss tt',// long date, short time pattern'f' - 'dddd, MMMM dd, yyyy h:mm tt',// long date, long time pattern'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',// month/day pattern'M' - 'MMMM dd',// month/year pattern'Y' - 'yyyy MMMM',// S is a sortable format that does not vary by culture'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'Date format strings:'d'-the day of the month;'dd'-the day of the month'ddd'-the abbreviated name of the day of the week'dddd'- the full name of the day of the week'h'-the hour, using a 12-hour clock from 1 to 12'hh'-the hour, using a 12-hour clock from 01 to 12'H'-the hour, using a 24-hour clock from 0 to 23'HH'- the hour, using a 24-hour clock from 00 to 23'm'-the minute, from 0 through 59'mm'-the minutes,from 00 though59'M'- the month, from 1 through 12'MM'- the month, from 01 through 12'MMM'-the abbreviated name of the month'MMMM'-the full name of the month's'-the second, from 0 through 59'ss'-the second, from 00 through 59't'- the first character of the AM/PM designator'tt'-the AM/PM designator'y'- the year, from 0 to 99'yy'- the year, from 00 to 99'yyy'-the year, with a minimum of three digits'yyyy'-the year as a four-digit number;'yyyyy'-the year as a four-digit number.                    string | object | null

                    Applies only to column's that display dates (e.g. dateStart/dateEnd, etc). This property allows to define a JS Intl.DateTimeFormat object in order to format the dates of the column. Here is an example value of the property: 

                    dateFormat: { year: '2-digit', month: 'long', day: 'numeric' }
                    . Another option is to use a date format string. Built-in Date formats:
                    // short date pattern
                    'd' - 'M/d/yyyy',
                    // long date pattern
                    'D' - 'dddd, MMMM dd, yyyy',
                    // short time pattern
                    't' - 'h:mm tt',
                    // long time pattern
                    'T' - 'h:mm:ss tt',
                    // long date, short time pattern
                    'f' - 'dddd, MMMM dd, yyyy h:mm tt',
                    // long date, long time pattern
                    'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',
                    // month/day pattern
                    'M' - 'MMMM dd',
                    // month/year pattern
                    'Y' - 'yyyy MMMM',
                    // S is a sortable format that does not vary by culture
                    'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'

                    Date format strings:
                    'd'-the day of the month;
                    'dd'-the day of the month
                    'ddd'-the abbreviated name of the day of the week
                    'dddd'- the full name of the day of the week
                    'h'-the hour, using a 12-hour clock from 1 to 12
                    'hh'-the hour, using a 12-hour clock from 01 to 12

                    'H'-the hour, using a 24-hour clock from 0 to 23
                    'HH'- the hour, using a 24-hour clock from 00 to 23
                    'm'-the minute, from 0 through 59
                    'mm'-the minutes,from 00 though59
                    'M'- the month, from 1 through 12
                    'MM'- the month, from 01 through 12
                    'MMM'-the abbreviated name of the month
                    'MMMM'-the full name of the month
                    's'-the second, from 0 through 59
                    'ss'-the second, from 00 through 59
                    't'- the first character of the AM/PM designator
                    'tt'-the AM/PM designator
                    'y'- the year, from 0 to 99
                    'yy'- the year, from 00 to 99
                    'yyy'-the year, with a minimum of three digits
                    'yyyy'-the year as a four-digit number;
                    'yyyyy'-the year as a four-digit number.

                    Back to root property: taskColumns

                    Read the nested value:

                    const el = document.querySelector('smart-gantt-chart');
const dateFormat = el.taskColumns[0].dateFormat;

                    disableEditDetermines whether the task propery determined by column can be edited from the Window editor or not. By default editing is enabled.boolean

                    Determines whether the task propery determined by column can be edited from the Window editor or not. By default editing is enabled.

                    Default value

                    false

                    Back to root property: taskColumns

                    Read the nested value:

                    const el = document.querySelector('smart-gantt-chart');
const disableEdit = el.taskColumns[0].disableEdit;

                    formatFunctionColumn's format function. You can use it to customize the column label's rendering.any

                    Column's format function. You can use it to customize the column label's rendering.

                    Back to root property: taskColumns

                    Read the nested value:

                    const el = document.querySelector('smart-gantt-chart');
const formatFunction = el.taskColumns[0].formatFunction;

                    getCustomEditorValueA function that is used in conjunction with customEditor allows to return the value of the custom editor. Since the editor is unknown by the element, this function allows to return the expected result from the editor. It has one argument - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.function | undefined | null

                    A function that is used in conjunction with customEditor allows to return the value of the custom editor. Since the editor is unknown by the element, this function allows to return the expected result from the editor. It has one argument - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.

                    Back to root property: taskColumns

                    Read the nested value:

                    const el = document.querySelector('smart-gantt-chart');
const getCustomEditorValue = el.taskColumns[0].getCustomEditorValue;

                    labelColumn's label.string | null

                    Column's label.

                    Default value

                    ""

                    Back to root property: taskColumns

                    Read the nested value:

                    const el = document.querySelector('smart-gantt-chart');
const label = el.taskColumns[0].label;

                    minWidthColumn's min width.string | number | null

                    Column's min width.

                    Default value

                    0

                    Back to root property: taskColumns

                    Read the nested value:

                    const el = document.querySelector('smart-gantt-chart');
const minWidth = el.taskColumns[0].minWidth;

                    numberFormatApplies only to column's that display numbers. This property allows to define a JS Intl.NumberFormat object in order to format the numbers of the column. Another option is to use a number format string. Number format strings: 'd' - decimal numbers.'f' - floating-point numbers.'n' - integer numbers.'c' - currency numbers.'p' - percentage numbers.For adding decimal places to the numbers, add a number after the formatting striFor example: 'c3' displays a number in this format $25.256string | object | null

                    Applies only to column's that display numbers. This property allows to define a JS Intl.NumberFormat object in order to format the numbers of the column. Another option is to use a number format string. Number format strings:
                    'd' - decimal numbers.
                    'f' - floating-point numbers.
                    'n' - integer numbers.
                    'c' - currency numbers.
                    'p' - percentage numbers.

                    For adding decimal places to the numbers, add a number after the formatting stri

                    For example: 'c3' displays a number in this format $25.256

                    Back to root property: taskColumns

                    Read the nested value:

                    const el = document.querySelector('smart-gantt-chart');
const numberFormat = el.taskColumns[0].numberFormat;

                    setCustomEditorValueA function that is used in conjunction with customEditor allows to set the value of the custom editor. Since the editor is unknown by the element, this function allows to set the expected value to the editor. It has three arguments - editor - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.columnValue - the value property of the column.value - the value of the task property that the column displays(the editor value).function | undefined | null

                    A function that is used in conjunction with customEditor allows to set the value of the custom editor. Since the editor is unknown by the element, this function allows to set the expected value to the editor. It has three arguments -
                    editor - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.

                    columnValue - the value property of the column.

                    value - the value of the task property that the column displays(the editor value).

                    Back to root property: taskColumns

                    Read the nested value:

                    const el = document.querySelector('smart-gantt-chart');
const setCustomEditorValue = el.taskColumns[0].setCustomEditorValue;

                    sizeColumn's size.string | number | null

                    Column's size.

                    Default value

                    0

                    Back to root property: taskColumns

                    Read the nested value:

                    const el = document.querySelector('smart-gantt-chart');
const size = el.taskColumns[0].size;

                    valueColumn's value.string | null

                    Column's value.

                    Default value

                    ""

                    Back to root property: taskColumns

                    Read the nested value:

                    const el = document.querySelector('smart-gantt-chart');
const value = el.taskColumns[0].value;

                    taskFilteringSpecifies whether users can apply filters to the Task Table, allowing them to view only tasks that meet certain criteria. If enabled, filtering options will be available; if disabled, the Task Table will display all tasks without filtering capabilities.boolean

                    Specifies whether users can apply filters to the Task Table, allowing them to view only tasks that meet certain criteria. If enabled, filtering options will be available; if disabled, the Task Table will display all tasks without filtering capabilities.

                    Default value

                    false

                    Examples

                    Markup and runtime examples for taskFiltering:

                    HTML attribute:

                    <smart-gantt-chart task-filtering></smart-gantt-chart>

                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                    const el = document.querySelector('smart-gantt-chart');
el.taskFiltering = false;

                    Read the current value:

                    const el = document.querySelector('smart-gantt-chart');
const taskFiltering = el.taskFiltering;

                    taskFormatFunctionA function that allows you to fully customize the appearance and behavior of each task element. This function receives two parameters: task: The JavaScript object representing the task's data and properties. taskElement: The HTML element corresponding to the task, which you can manipulate or modify as needed.Use this function to add custom styles, event listeners, or additional content to each task element based on its data.function | null

                    A function that allows you to fully customize the appearance and behavior of each task element. This function receives two parameters:


                    task: The JavaScript object representing the task's data and properties.


                    taskElement: The HTML element corresponding to the task, which you can manipulate or modify as needed.


                    Use this function to add custom styles, event listeners, or additional content to each task element based on its data.

                    Examples

                    Markup and runtime examples for taskFormatFunction:

                    HTML:

                    <smart-gantt-chart task-format-function="null"></smart-gantt-chart>

                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                    const el = document.querySelector('smart-gantt-chart');
el.taskFormatFunction = "function(task, taskElement) { if (task.type === 'task') { taskElement.style.color = 'red'; } }";

                    Read the current value:

                    const el = document.querySelector('smart-gantt-chart');
const taskFormatFunction = el.taskFormatFunction;

                    taskPanelMinSpecifies the minimum size of the Task Panel when the Resource Panel is visible. This property ensures that the Task Panel does not shrink below the defined size, maintaining usability and layout integrity when both panels are displayed.string | number

                    Specifies the minimum size of the Task Panel when the Resource Panel is visible. This property ensures that the Task Panel does not shrink below the defined size, maintaining usability and layout integrity when both panels are displayed.

                    Default value

                    200

                    Examples

                    Markup and runtime examples for taskPanelMin:

                    HTML:

                    <smart-gantt-chart task-panel-min="200"></smart-gantt-chart>

                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                    const el = document.querySelector('smart-gantt-chart');
el.taskPanelMin = "50%";

                    Read the current value:

                    const el = document.querySelector('smart-gantt-chart');
const taskPanelMin = el.taskPanelMin;

                    taskPanelSizeSpecifies the dimensions of the Task Panel when the Resource Panel is displayed. This setting controls how much space the Task Panel occupies, ensuring it remains visible and accessible alongside the Resource Panel.string | number

                    Specifies the dimensions of the Task Panel when the Resource Panel is displayed. This setting controls how much space the Task Panel occupies, ensuring it remains visible and accessible alongside the Resource Panel.

                    Default value

                    ""

                    Examples

                    Markup and runtime examples for taskPanelSize:

                    HTML:

                    <smart-gantt-chart task-panel-size="500"></smart-gantt-chart>

                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                    const el = document.querySelector('smart-gantt-chart');
el.taskPanelSize = "50%";

                    Read the current value:

                    const el = document.querySelector('smart-gantt-chart');
const taskPanelSize = el.taskPanelSize;

                    tasksA getter method that returns a flattened array containing all task objects nested within the element, regardless of their depth or hierarchical structure. This allows easy access to every task in the element as a single-level array. Click for more details. Property object's options:
                      {label: string, dateStart: string | Date, dateEnd: string | Date, expanded?: boolean, progress?: number, type?: string}[]

                      A getter method that returns a flattened array containing all task objects nested within the element, regardless of their depth or hierarchical structure. This allows easy access to every task in the element as a single-level array.

                      Default value

                      null

                      Properties

                      classProject, Task or Milestone CSS class.
                      connectionsTasks connection. Click for more details. Property object's options:
                        dateEndProject, Task or Milestone end date.
                        dateStartProject, Task or Milestone start date.
                        deadlineDetermines the deadline for the Project, Task or Milestone.
                        disableDragProject, Task or Milestone dragging is disabled.
                        disableResizeProject, Task or Milestone resizing is disabled.
                        disableResourcesProject, Task or Milestone with disabled resources.
                        dragProjectProject, Task or Milestone drag enabled in the view.
                        durationThe duration of the tasks in miliseconds. The duration unit can be changed via the durationUnit property.
                        expandedProject, Task or Milestone expanded state in the view.
                        formatFunctionProject, Task or Milestone format function.
                        hiddenTask visibility.
                        idProject, Task or Milestone id.
                        indicatorsDetermines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row. Click for more details. Property object's options:
                        • label:string? - Indicator label.
                        • date:string | Date - Indicator date(can include time).
                        • className:string? - A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.
                        • icon:string? - Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.
                        • tooltip:string? - Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.
                        labelProject, Task or Milestone label.
                        maxDateEndProject, Task or Milestone max end date.
                        maxDateStartProject, Task or Milestone max start date.
                        maxDurationThe maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.
                        minDateEndProject, Task or Milestone min end date.
                        minDateStartProject, Task or Milestone min start date.
                        minDurationThe minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.
                        onRenderProject, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement. task - the task object.segment - the task current segment object. If the task has only one segment, the task object is passed again.taskElement - the task's html element.segmentElement - the task's segment html element.labelElement - the task's segment label html element.
                        overdueDetermines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.
                        plannedDetermines the planned dateStart/dateEnd for as the baseline for the task. Click for more details. Property object's options:
                        • dateStart:string | Date - Determines the planned dateStart of the task.
                        • dateEnd:string | Date - Determines the planned dateEnd of the task.
                        • duration:number | undefined - Determines the planned duration of the task.
                        dateEndDetermines the planned dateEnd of the task.
                        dateStartDetermines the planned dateStart of the task.
                        durationDetermines the planned duration of the task.

                        classProject, Task or Milestone CSS class.string

                        Project, Task or Milestone CSS class.

                        Default value

                        ""

                        Back to root property: tasks

                        Read the nested value:

                        const el = document.querySelector('smart-gantt-chart');
const class = el.tasks[0].class;

                        connectionsTasks connection. Click for more details. Property object's options:
                          array

                          Tasks connection.

                          Default value

                          null

                          Back to root property: tasks

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const connections = el.tasks[0].connections;

                          dateEndProject, Task or Milestone end date.string | Date

                          Project, Task or Milestone end date.

                          Default value

                          ""

                          Back to root property: tasks

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const dateEnd = el.tasks[0].dateEnd;

                          dateStartProject, Task or Milestone start date.string | Date

                          Project, Task or Milestone start date.

                          Default value

                          ""

                          Back to root property: tasks

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const dateStart = el.tasks[0].dateStart;

                          deadlineDetermines the deadline for the Project, Task or Milestone.string | Date

                          Determines the deadline for the Project, Task or Milestone.

                          Default value

                          ""

                          Back to root property: tasks

                          Try a demo showcasing the deadline property.

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const deadline = el.tasks[0].deadline;

                          disableDragProject, Task or Milestone dragging is disabled.boolean

                          Project, Task or Milestone dragging is disabled.

                          Default value

                          false

                          Back to root property: tasks

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const disableDrag = el.tasks[0].disableDrag;

                          disableResizeProject, Task or Milestone resizing is disabled.boolean

                          Project, Task or Milestone resizing is disabled.

                          Default value

                          false

                          Back to root property: tasks

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const disableResize = el.tasks[0].disableResize;

                          disableResourcesProject, Task or Milestone with disabled resources.boolean

                          Project, Task or Milestone with disabled resources.

                          Default value

                          false

                          Back to root property: tasks

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const disableResources = el.tasks[0].disableResources;

                          dragProjectProject, Task or Milestone drag enabled in the view.boolean

                          Project, Task or Milestone drag enabled in the view.

                          Default value

                          true

                          Back to root property: tasks

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const dragProject = el.tasks[0].dragProject;

                          durationThe duration of the tasks in miliseconds. The duration unit can be changed via the durationUnit property.number | undefined

                          The duration of the tasks in miliseconds. The duration unit can be changed via the durationUnit property.

                          Default value

                          0

                          Back to root property: tasks

                          Try a demo showcasing the duration property.

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const duration = el.tasks[0].duration;

                          expandedProject, Task or Milestone expanded state in the view.boolean

                          Project, Task or Milestone expanded state in the view.

                          Default value

                          false

                          Back to root property: tasks

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const expanded = el.tasks[0].expanded;

                          formatFunctionProject, Task or Milestone format function.any

                          Project, Task or Milestone format function.

                          Back to root property: tasks

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const formatFunction = el.tasks[0].formatFunction;

                          hiddenTask visibility.boolean | undefined

                          Task visibility.

                          Default value

                          false

                          Back to root property: tasks

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const hidden = el.tasks[0].hidden;

                          idProject, Task or Milestone id.string | null

                          Project, Task or Milestone id.

                          Default value

                          ""

                          Back to root property: tasks

                          Read the nested value:

                          const el = document.querySelector('smart-gantt-chart');
const id = el.tasks[0].id;

                          indicatorsDetermines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row. Click for more details. Property object's options:
                            {label?: string, date: Date | string, className?: string, icon?: string, tooltip?: string }[]

                            Determines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row.

                            Properties

                            classNameA custom class name that can be applied to the indicator's element in order to apply some styling via CSS.
                            dateIndicator date(can include time).
                            iconRepresents the code for an icon that will be displayed infront of the indicator label inside the timeline.
                            labelIndicator label.
                            tooltipDetermines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const indicators = el.tasks[0].indicators;

                            classNameA custom class name that can be applied to the indicator's element in order to apply some styling via CSS.string?

                            A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const className = el.tasks[0].indicators[0].className;

                            dateIndicator date(can include time).string | Date

                            Indicator date(can include time).

                            Default value

                            ""

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const date = el.tasks[0].indicators[0].date;

                            iconRepresents the code for an icon that will be displayed infront of the indicator label inside the timeline.string?

                            Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const icon = el.tasks[0].indicators[0].icon;

                            labelIndicator label.string?

                            Indicator label.

                            Default value

                            ""

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const label = el.tasks[0].indicators[0].label;

                            tooltipDetermines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.string?

                            Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.

                            Back to root property: tasks

                            Try a demo showcasing the tooltip property.

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const tooltip = el.tasks[0].indicators[0].tooltip;

                            labelProject, Task or Milestone label.string | null

                            Project, Task or Milestone label.

                            Default value

                            ""

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const label = el.tasks[0].label;

                            maxDateEndProject, Task or Milestone max end date.string | Date

                            Project, Task or Milestone max end date.

                            Default value

                            ""

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const maxDateEnd = el.tasks[0].maxDateEnd;

                            maxDateStartProject, Task or Milestone max start date.string | Date

                            Project, Task or Milestone max start date.

                            Default value

                            ""

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const maxDateStart = el.tasks[0].maxDateStart;

                            maxDurationThe maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.number | undefined

                            The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.

                            Default value

                            0

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const maxDuration = el.tasks[0].maxDuration;

                            minDateEndProject, Task or Milestone min end date.string | Date

                            Project, Task or Milestone min end date.

                            Default value

                            ""

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const minDateEnd = el.tasks[0].minDateEnd;

                            minDateStartProject, Task or Milestone min start date.string | Date

                            Project, Task or Milestone min start date.

                            Default value

                            ""

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const minDateStart = el.tasks[0].minDateStart;

                            minDurationThe minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.number | undefined

                            The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.

                            Default value

                            0

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const minDuration = el.tasks[0].minDuration;

                            onRenderProject, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement. task - the task object.segment - the task current segment object. If the task has only one segment, the task object is passed again.taskElement - the task's html element.segmentElement - the task's segment html element.labelElement - the task's segment label html element.any

                            Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement.
                            task - the task object.

                            segment - the task current segment object. If the task has only one segment, the task object is passed again.

                            taskElement - the task's html element.

                            segmentElement - the task's segment html element.

                            labelElement - the task's segment label html element.

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const onRender = el.tasks[0].onRender;

                            overdueDetermines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.boolean

                            Determines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.

                            Default value

                            false

                            Back to root property: tasks

                            Read the nested value:

                            const el = document.querySelector('smart-gantt-chart');
const overdue = el.tasks[0].overdue;

                            plannedDetermines the planned dateStart/dateEnd for as the baseline for the task. Click for more details. Property object's options:
                               { dateStart: date | string | number, dateEnd: date | string | number, duration?: number }

                              Determines the planned dateStart/dateEnd for as the baseline for the task.

                              Default value

                              null

                              Properties

                              dateStartDetermines the planned dateStart of the task.
                              dateEndDetermines the planned dateEnd of the task.
                              durationDetermines the planned duration of the task.

                              Back to root property: tasks

                              Read the nested value:

                              const el = document.querySelector('smart-gantt-chart');
const planned = el.tasks[0].planned;

                              dateEndDetermines the planned dateEnd of the task.string | Date

                              Determines the planned dateEnd of the task.

                              Default value

                              ""

                              Back to root property: tasks

                              Read the nested value:

                              const el = document.querySelector('smart-gantt-chart');
const dateEnd = el.tasks[0].dateEnd;

                              dateStartDetermines the planned dateStart of the task.string | Date

                              Determines the planned dateStart of the task.

                              Default value

                              ""

                              Back to root property: tasks

                              Read the nested value:

                              const el = document.querySelector('smart-gantt-chart');
const dateStart = el.tasks[0].dateStart;

                              durationDetermines the planned duration of the task.number | undefined

                              Determines the planned duration of the task.

                              Default value

                              0

                              Back to root property: tasks

                              Try a demo showcasing the duration property.

                              Read the nested value:

                              const el = document.querySelector('smart-gantt-chart');
const duration = el.tasks[0].duration;

                              progressProject, Task or Milestone progress.number

                              Project, Task or Milestone progress.

                              Default value

                              0

                              Back to root property: tasks

                              Read the nested value:

                              const el = document.querySelector('smart-gantt-chart');
const progress = el.tasks[0].planned.progress;

                              resourcesProject, Task or Milestone resources. Click for more details. Property object's options:
                                array

                                Project, Task or Milestone resources.

                                Back to root property: tasks

                                Try a demo showcasing the resources property.

                                Read the nested value:

                                const el = document.querySelector('smart-gantt-chart');
const resources = el.tasks[0].planned.resources;

                                segmentsDetermines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task. Click for more details. Property object's options:
                                  {label: string, dateStart: date | string , dateEnd: date | string, disableDrag?: boolean, disableResize?: boolean, duration?: number | null, formatFunction?: any }[]

                                  Determines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task.

                                  Properties

                                  dateEndSegment end date.
                                  dateStartSegment start date.
                                  disableDragDetermines whether segment dragging is disabled.
                                  disableResizeDetermines whether segment resizing is disabled.
                                  durationThe duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.
                                  formatFunctionSegment label format function.
                                  labelSegment label.

                                  Back to root property: tasks

                                  Try a demo showcasing the segments property.

                                  Read the nested value:

                                  const el = document.querySelector('smart-gantt-chart');
const segments = el.tasks[0].planned.segments;

                                  dateEndSegment end date.string | Date

                                  Segment end date.

                                  Default value

                                  ""

                                  Back to root property: tasks

                                  Read the nested value:

                                  const el = document.querySelector('smart-gantt-chart');
const dateEnd = el.tasks[0].planned.segments[0].dateEnd;

                                  dateStartSegment start date.string | Date

                                  Segment start date.

                                  Default value

                                  ""

                                  Back to root property: tasks

                                  Read the nested value:

                                  const el = document.querySelector('smart-gantt-chart');
const dateStart = el.tasks[0].planned.segments[0].dateStart;

                                  disableDragDetermines whether segment dragging is disabled.boolean

                                  Determines whether segment dragging is disabled.

                                  Default value

                                  false

                                  Back to root property: tasks

                                  Read the nested value:

                                  const el = document.querySelector('smart-gantt-chart');
const disableDrag = el.tasks[0].planned.segments[0].disableDrag;

                                  disableResizeDetermines whether segment resizing is disabled.boolean

                                  Determines whether segment resizing is disabled.

                                  Default value

                                  false

                                  Back to root property: tasks

                                  Read the nested value:

                                  const el = document.querySelector('smart-gantt-chart');
const disableResize = el.tasks[0].planned.segments[0].disableResize;

                                  durationThe duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.number | undefined

                                  The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.

                                  Default value

                                  0

                                  Back to root property: tasks

                                  Read the nested value:

                                  const el = document.querySelector('smart-gantt-chart');
const duration = el.tasks[0].planned.segments[0].duration;

                                  formatFunctionSegment label format function.any

                                  Segment label format function.

                                  Back to root property: tasks

                                  Read the nested value:

                                  const el = document.querySelector('smart-gantt-chart');
const formatFunction = el.tasks[0].planned.segments[0].formatFunction;

                                  labelSegment label.string | null

                                  Segment label.

                                  Default value

                                  ""

                                  Back to root property: tasks

                                  Read the nested value:

                                  const el = document.querySelector('smart-gantt-chart');
const label = el.tasks[0].planned.segments[0].label;

                                  synchronizedProject, Task or Milestone synchronized in the view.boolean

                                  Project, Task or Milestone synchronized in the view.

                                  Default value

                                  false

                                  Back to root property: tasks

                                  Read the nested value:

                                  const el = document.querySelector('smart-gantt-chart');
const synchronized = el.tasks[0].planned.synchronized;

                                  tasksProject's tasks. Only projects can have tasks. array

                                  Project's tasks. Only projects can have tasks.

                                  Back to root property: tasks

                                  Read the nested value:

                                  const el = document.querySelector('smart-gantt-chart');
const tasks = el.tasks[0].planned.tasks;

                                  typeProject, Task or Milestone type. Possible values are 'project', 'milestone' and 'task'"project" | "milestone" | "task"

                                  Project, Task or Milestone type. Possible values are 'project', 'milestone' and 'task'

                                  Default value

                                  "task"

                                  Back to root property: tasks

                                  Read the nested value:

                                  const el = document.querySelector('smart-gantt-chart');
const type = el.tasks[0].planned.type;

                                  valueProject, Task or Milestone value.any

                                  Project, Task or Milestone value.

                                  Default value

                                  ""

                                  Back to root property: tasks

                                  Read the nested value:

                                  const el = document.querySelector('smart-gantt-chart');
const value = el.tasks[0].planned.value;

                                  themeSpecifies or retrieves the visual theme applied to the element, controlling its overall appearance and styling (such as colors, backgrounds, and typography) according to predefined theme options.string

                                  Specifies or retrieves the visual theme applied to the element, controlling its overall appearance and styling (such as colors, backgrounds, and typography) according to predefined theme options.

                                  Default value

                                  ""

                                  Full working example

                                  Minimal setup for theme with the data and bindings you usually use together on this component.

                                  JavaScript — Gantt chart with theme:

                                  const dataSource = [
	{ id: 1, label: 'Discovery', dateStart: '2026-04-01', dateEnd: '2026-04-04', type: 'task', progress: 100 },
	{ id: 2, label: 'Build', dateStart: '2026-04-05', dateEnd: '2026-04-12', type: 'task', progress: 35 }
];

const gantt = new Smart.GanttChart('#myGantt', {
	dataSource
});

                                  timelineHeaderFormatFunctionA custom formatting function for the Timeline header, allowing you to control how each date cell in the header is displayed. The function receives the following arguments: date (Date): The JavaScript Date object representing the date associated with the current header cell. type (string): A string indicating the granularity of the header cell, such as 'month', 'week', 'day', etc., specifying what period the cell represents. isHeaderDetails (boolean): A boolean value specifying whether the cell is part of the detailed header section (typically used for secondary or sub-header rows) or part of the main header row. value (string): The default formatted label for the cell, as generated by the timeline component, which you may use or modify in your custom output.Use this function to return a custom string (or JSX/HTML element, depending on context) for each header cell, enabling advanced formatting of date headers in the timeline view.function | null

                                  A custom formatting function for the Timeline header, allowing you to control how each date cell in the header is displayed. The function receives the following arguments:



                                  date (Date): The JavaScript Date object representing the date associated with the current header cell.


                                  type (string): A string indicating the granularity of the header cell, such as 'month', 'week', 'day', etc., specifying what period the cell represents.


                                  isHeaderDetails (boolean): A boolean value specifying whether the cell is part of the detailed header section (typically used for secondary or sub-header rows) or part of the main header row.


                                  value (string): The default formatted label for the cell, as generated by the timeline component, which you may use or modify in your custom output.



                                  Use this function to return a custom string (or JSX/HTML element, depending on context) for each header cell, enabling advanced formatting of date headers in the timeline view.

                                  Try a demo showcasing the timelineHeaderFormatFunction property.

                                  Examples

                                  Markup and runtime examples for timelineHeaderFormatFunction:

                                  HTML:

                                  <smart-gantt-chart timeline-header-format-function="null"></smart-gantt-chart>

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                                  const el = document.querySelector('smart-gantt-chart');
el.timelineHeaderFormatFunction = "function(date, type, isHeaderDetails, value) { if (isHeaderDetails) { return 'Custom Header Function' } else { return date.toDateString() }  }";

                                  Read the current value:

                                  const el = document.querySelector('smart-gantt-chart');
const timelineHeaderFormatFunction = el.timelineHeaderFormatFunction;

                                  timelineMinSpecifies the minimum width, in pixels, that the timeline component can be resized or displayed at. This ensures that the timeline will not shrink below the defined width, maintaining usability and proper layout.string | number

                                  Specifies the minimum width, in pixels, that the timeline component can be resized or displayed at. This ensures that the timeline will not shrink below the defined width, maintaining usability and proper layout.

                                  Default value

                                  200

                                  Examples

                                  Markup and runtime examples for timelineMin:

                                  HTML:

                                  <smart-gantt-chart timeline-min="150"></smart-gantt-chart>

                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                                  const el = document.querySelector('smart-gantt-chart');
el.timelineMin = "50%";

                                  Read the current value:

                                  const el = document.querySelector('smart-gantt-chart');
const timelineMin = el.timelineMin;

                                  tooltipControls the visibility of tooltips throughout the application. When enabled, informative tooltips will appear for timeline tasks, resources, connections, indicators, and segments, providing users with additional context and details about each element. Disabling this option will hide all tooltips in these areas. Click for more details. Property object's options:
                                     object

                                    Controls the visibility of tooltips throughout the application. When enabled, informative tooltips will appear for timeline tasks, resources, connections, indicators, and segments, providing users with additional context and details about each element. Disabling this option will hide all tooltips in these areas.

                                    Properties

                                    arrowSpecifies whether an arrow should be displayed on the tooltip, indicating its point of attachment to the target element. If set to true, the tooltip will render an arrow; if false, the tooltip will appear without an arrow.
                                    delaySpecifies the amount of time, in milliseconds, to wait before displaying the tooltip after a triggering event (such as mouse hover or focus).
                                    enabledDetermines whether tooltips are displayed. When enabled, informative tooltips will appear to provide additional context or guidance to users; when disabled, tooltips will not be shown.
                                    offsetSpecifies the offset values, in pixels, to adjust the tooltip's position when it is displayed. The array follows the format [horizontalOffset, verticalOffset], where 'horizontalOffset' shifts the tooltip left or right, and 'verticalOffset' shifts it up or down relative to its default position.

                                    arrowSpecifies whether an arrow should be displayed on the tooltip, indicating its point of attachment to the target element. If set to true, the tooltip will render an arrow; if false, the tooltip will appear without an arrow.boolean

                                    Specifies whether an arrow should be displayed on the tooltip, indicating its point of attachment to the target element. If set to true, the tooltip will render an arrow; if false, the tooltip will appear without an arrow.

                                    Default value

                                    false

                                    Back to root property: tooltip

                                    Read the nested value:

                                    const el = document.querySelector('smart-gantt-chart');
const arrow = el.tooltip.arrow;

                                    delaySpecifies the amount of time, in milliseconds, to wait before displaying the tooltip after a triggering event (such as mouse hover or focus).number

                                    Specifies the amount of time, in milliseconds, to wait before displaying the tooltip after a triggering event (such as mouse hover or focus).

                                    Default value

                                    50

                                    Back to root property: tooltip

                                    Read the nested value:

                                    const el = document.querySelector('smart-gantt-chart');
const delay = el.tooltip.delay;

                                    enabledDetermines whether tooltips are displayed. When enabled, informative tooltips will appear to provide additional context or guidance to users; when disabled, tooltips will not be shown.boolean

                                    Determines whether tooltips are displayed. When enabled, informative tooltips will appear to provide additional context or guidance to users; when disabled, tooltips will not be shown.

                                    Default value

                                    false

                                    Back to root property: tooltip

                                    Read the nested value:

                                    const el = document.querySelector('smart-gantt-chart');
const enabled = el.tooltip.enabled;

                                    offsetSpecifies the offset values, in pixels, to adjust the tooltip's position when it is displayed. The array follows the format [horizontalOffset, verticalOffset], where 'horizontalOffset' shifts the tooltip left or right, and 'verticalOffset' shifts it up or down relative to its default position. number[]

                                    Specifies the offset values, in pixels, to adjust the tooltip's position when it is displayed. The array follows the format [horizontalOffset, verticalOffset], where 'horizontalOffset' shifts the tooltip left or right, and 'verticalOffset' shifts it up or down relative to its default position.

                                    Back to root property: tooltip

                                    Read the nested value:

                                    const el = document.querySelector('smart-gantt-chart');
const offset = el.tooltip.offset;

                                    tooltipFormatFunctionA function that enables full customization of the tooltip's appearance and behavior. This function accepts three arguments:- tooltipObject: The tooltip instance, containing all relevant data and methods for manipulating the tooltip.- event: The event object that triggered the tooltip display, useful for accessing event-specific information (e.g., cursor position).- content: The DOM element representing the tooltip’s label, which can be modified to display custom HTML, styles, or dynamic content.function | null

                                    A function that enables full customization of the tooltip's appearance and behavior. This function accepts three arguments:

                                    - tooltipObject: The tooltip instance, containing all relevant data and methods for manipulating the tooltip.
                                    - event: The event object that triggered the tooltip display, useful for accessing event-specific information (e.g., cursor position).
                                    - content: The DOM element representing the tooltip’s label, which can be modified to display custom HTML, styles, or dynamic content.

                                    treeMinSpecifies the minimum width (in pixels) that the task table can be resized to, ensuring the table does not become narrower than this value. This helps maintain readability and layout consistency.string | number

                                    Specifies the minimum width (in pixels) that the task table can be resized to, ensuring the table does not become narrower than this value. This helps maintain readability and layout consistency.

                                    Default value

                                    100

                                    Examples

                                    Markup and runtime examples for treeMin:

                                    HTML:

                                    <smart-gantt-chart tree-min="200"></smart-gantt-chart>

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                                    const el = document.querySelector('smart-gantt-chart');
el.treeMin = 300;

                                    Read the current value:

                                    const el = document.querySelector('smart-gantt-chart');
const treeMin = el.treeMin;

                                    treeSizeSpecifies the width of the task table, controlling how much horizontal space it occupies within its container. Adjust this value to set the overall size of the table and ensure proper display and alignment within your layout.string | number

                                    Specifies the width of the task table, controlling how much horizontal space it occupies within its container. Adjust this value to set the overall size of the table and ensure proper display and alignment within your layout.

                                    Default value

                                    100
                                    Try a demo showcasing the treeSize property.

                                    Examples

                                    Markup and runtime examples for treeSize:

                                    HTML:

                                    <smart-gantt-chart tree-size="50%"></smart-gantt-chart>

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                                    const el = document.querySelector('smart-gantt-chart');
el.treeSize = 300;

                                    Read the current value:

                                    const el = document.querySelector('smart-gantt-chart');
const treeSize = el.treeSize;

                                    unfocusableDetermines whether the element can receive keyboard focus. When set to true, the element becomes focusable and can be navigated to using the Tab key or programmatically via JavaScript. When accessed, returns a boolean indicating the current focusability state of the element.boolean

                                    Determines whether the element can receive keyboard focus. When set to true, the element becomes focusable and can be navigated to using the Tab key or programmatically via JavaScript. When accessed, returns a boolean indicating the current focusability state of the element.

                                    Default value

                                    false

                                    Examples

                                    Markup and runtime examples for unfocusable:

                                    HTML attribute:

                                    <smart-gantt-chart unfocusable></smart-gantt-chart>

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                                    const el = document.querySelector('smart-gantt-chart');
el.unfocusable = false;

                                    Read the current value:

                                    const el = document.querySelector('smart-gantt-chart');
const unfocusable = el.unfocusable;

                                    unlockKeySets or retrieves the unlockKey, a unique value required to unlock and access the full features of the product. Use this property to assign an unlock key for activation or to obtain the currently set unlock key.string

                                    Sets or retrieves the unlockKey, a unique value required to unlock and access the full features of the product. Use this property to assign an unlock key for activation or to obtain the currently set unlock key.

                                    Default value

                                    ""

                                    Examples

                                    Markup and runtime examples for unlockKey:

                                    HTML:

                                    <smart-gantt-chart unlock-key=""></smart-gantt-chart>

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                                    const el = document.querySelector('smart-gantt-chart');
el.unlockKey = "1111-2222-3333-4444-5555";

                                    Read the current value:

                                    const el = document.querySelector('smart-gantt-chart');
const unlockKey = el.unlockKey;

                                    verticalScrollBarVisibilitySpecifies whether the vertical scrollbar is displayed, allowing the user to scroll content vertically when necessary."auto" | "disabled" | "hidden" | "visible"

                                    Specifies whether the vertical scrollbar is displayed, allowing the user to scroll content vertically when necessary.

                                    Default value

                                    "auto"

                                    Examples

                                    Markup and runtime examples for verticalScrollBarVisibility:

                                    HTML:

                                    <smart-gantt-chart vertical-scroll-bar-visibility="hidden"></smart-gantt-chart>

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                                    const el = document.querySelector('smart-gantt-chart');
el.verticalScrollBarVisibility = "visible";

                                    Read the current value:

                                    const el = document.querySelector('smart-gantt-chart');
const verticalScrollBarVisibility = el.verticalScrollBarVisibility;

                                    viewSpecifies the date range displayed on the timeline. Accepted values include:day: The timeline displays all hours within a single day, allowing for detailed, intraday scheduling and review.week: The timeline presents each day within a single week, providing a broader weekly overview.month: The timeline shows individual days across an entire month, making it easy to view and manage monthly schedules.year: The timeline displays each month of the year, providing a high-level annual perspective.resource: The timeline groups and displays current tasks by the resources assigned to them. Tasks without an assigned resource are grouped under a special "Unassigned" category for easy identification.The timeline features a header section that labels each cell according to its corresponding date or resource. This header is divided into two tiers (for example, months and days, or days and hours) to provide both summary and detailed information, enhancing clarity and context for users navigating the timeline."day" | "week" | "month" | "quarter" | "year"

                                    Specifies the date range displayed on the timeline. Accepted values include:



                                    day: The timeline displays all hours within a single day, allowing for detailed, intraday scheduling and review.


                                    week: The timeline presents each day within a single week, providing a broader weekly overview.


                                    month: The timeline shows individual days across an entire month, making it easy to view and manage monthly schedules.


                                    year: The timeline displays each month of the year, providing a high-level annual perspective.


                                    resource: The timeline groups and displays current tasks by the resources assigned to them. Tasks without an assigned resource are grouped under a special "Unassigned" category for easy identification.



                                    The timeline features a header section that labels each cell according to its corresponding date or resource. This header is divided into two tiers (for example, months and days, or days and hours) to provide both summary and detailed information, enhancing clarity and context for users navigating the timeline.

                                    Allowed Values

                                    • "day" - The timeline displays days by hours.
                                    • "week" - The Timeline displays weeks by days.
                                    • "month" - The Timeline displays months by weeks. Depending on the 'monthScale' property value, it may display month by days.
                                    • "quarter" - The Timeline displays quarter by months.
                                    • "year" - The Timeline displays years by months.

                                    Default value

                                    "year"
                                    Try a demo showcasing the view property.

                                    Examples

                                    Markup and runtime examples for view:

                                    HTML:

                                    <smart-gantt-chart view="week"></smart-gantt-chart>

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                                    const el = document.querySelector('smart-gantt-chart');
el.view = "day";

                                    Read the current value:

                                    const el = document.querySelector('smart-gantt-chart');
const view = el.view;

                                    weekFormatSpecifies the display format for dates in the timeline header when the timeline view is set to show weeks. This setting controls how each week's date range or label appears, allowing customization of the week header’s date representation."long" | "numeric"

                                    Specifies the display format for dates in the timeline header when the timeline view is set to show weeks. This setting controls how each week's date range or label appears, allowing customization of the week header’s date representation.

                                    Default value

                                    "long"

                                    Examples

                                    Markup and runtime examples for weekFormat:

                                    HTML:

                                    <smart-gantt-chart week-format="long"></smart-gantt-chart>

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                                    const el = document.querySelector('smart-gantt-chart');
el.weekFormat = "numeric";

                                    Read the current value:

                                    const el = document.querySelector('smart-gantt-chart');
const weekFormat = el.weekFormat;

                                    yearFormatSpecifies the display format for dates in the timeline header when they represent years. This setting controls how years are presented (e.g., "2024", "’24", or "Year 2024") to ensure consistency and clarity in the timeline header’s date representation."2-digit" | "numeric"

                                    Specifies the display format for dates in the timeline header when they represent years. This setting controls how years are presented (e.g., "2024", "’24", or "Year 2024") to ensure consistency and clarity in the timeline header’s date representation.

                                    Default value

                                    "numeric"

                                    Examples

                                    Markup and runtime examples for yearFormat:

                                    HTML:

                                    <smart-gantt-chart year-format="2-digit"></smart-gantt-chart>

                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                                    const el = document.querySelector('smart-gantt-chart');
el.yearFormat = "numeric";

                                    Read the current value:

                                    const el = document.querySelector('smart-gantt-chart');
const yearFormat = el.yearFormat;

                                    Events

                                    beginUpdateThis event is triggered when a batch update operation begins, specifically after the beginUpdate method has been executed. It signals that subsequent changes to the data will be grouped as part of a batch, allowing for improved performance and deferred processing until the update process is completed.CustomEvent

                                    This event is triggered when a batch update operation begins, specifically after the beginUpdate method has been executed. It signals that subsequent changes to the data will be grouped as part of a batch, allowing for improved performance and deferred processing until the update process is completed.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onBeginUpdate

                                    Arguments

                                    evCustomEvent

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for beginUpdate using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('beginUpdate', (event) => {
	// event handling code goes here.
})

                                    endUpdateThis event is triggered after the endUpdate method has been executed, indicating that a batch update operation has completed. It signals that any batched changes have been applied, and the system can now perform follow-up actions or refresh the affected components.CustomEvent

                                    This event is triggered after the endUpdate method has been executed, indicating that a batch update operation has completed. It signals that any batched changes have been applied, and the system can now perform follow-up actions or refresh the affected components.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onEndUpdate

                                    Arguments

                                    evCustomEvent

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for endUpdate using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('endUpdate', (event) => {
	// event handling code goes here.
})

                                    connectionStartThis event is fired when the user initiates the process of connecting one task to another—such as starting to draw a link or dependency between two tasks. Within the event handler, you can call event.preventDefault() to cancel the connection operation before it completes. This provides an opportunity to validate conditions, enforce business rules, or restrict certain connections as needed.CustomEvent

                                    This event is fired when the user initiates the process of connecting one task to another—such as starting to draw a link or dependency between two tasks. Within the event handler, you can call event.preventDefault() to cancel the connection operation before it completes. This provides an opportunity to validate conditions, enforce business rules, or restrict certain connections as needed.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onConnectionStart

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.startIndex - The index of the task that a connection is started from.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for connectionStart using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('connectionStart', (event) => {
    const detail = event.detail,
        startIndex = detail.startIndex;

	// event handling code goes here.
})

                                    connectionEndThis event is triggered when the user successfully establishes a link or dependency between two distinct tasks, typically by connecting their endpoints within the user interface. It signifies that a relationship (such as a workflow, sequence, or prerequisite) has been created between the selected tasks.CustomEvent

                                    This event is triggered when the user successfully establishes a link or dependency between two distinct tasks, typically by connecting their endpoints within the user interface. It signifies that a relationship (such as a workflow, sequence, or prerequisite) has been created between the selected tasks.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onConnectionEnd

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.id - The id of the connection that was created.
                                    ev.detail.startTaskId - The id of the task that a connection is started from.
                                    ev.detail.startIndex - The index of the task that a connection is started from.
                                    ev.detail.endIndex - The index of the task that a connection ended to.
                                    ev.detail.endTaskId - The id of the task that a connection ended to.
                                    ev.detail.type - The type of connection. Fours types are available:
                                    • 0 - start-to-start
                                    • 1 - end-to-start
                                    • 2 - end-to-end
                                    • 3 - start-to-end

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for connectionEnd using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('connectionEnd', (event) => {
    const detail = event.detail,
        id = detail.id,
        startTaskId = detail.startTaskId,
        startIndex = detail.startIndex,
        endIndex = detail.endIndex,
        endTaskId = detail.endTaskId,
        type = detail.type;

	// event handling code goes here.
})

                                    changeThis event is triggered whenever a user selects or deselects a Task item. It fires both when a Task becomes selected and when a previously selected Task is unselected, allowing you to respond to changes in Task selection state.CustomEvent

                                    This event is triggered whenever a user selects or deselects a Task item. It fires both when a Task becomes selected and when a previously selected Task is unselected, allowing you to respond to changes in Task selection state.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onChange

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.value - The index of the new selected task.
                                    ev.detail.oldValue - The index of the previously selected task.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for change using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('change', (event) => {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue;

	// event handling code goes here.
})

                                    columnResizeThis event is triggered whenever a column within the Tree component is resized by the user. You can enable or disable column resizing functionality using the columnResize property. When column resizing is enabled, this event allows you to respond to changes in column width, such as updating layout or saving user preferences.CustomEvent

                                    This event is triggered whenever a column within the Tree component is resized by the user. You can enable or disable column resizing functionality using the columnResize property. When column resizing is enabled, this event allows you to respond to changes in column width, such as updating layout or saving user preferences.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onColumnResize

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.dataField - The name of the column. Corresponds to the value attribute of a taskColumns/resourceColumns object.
                                    ev.detail.headerCellElement - The HTMLElement column cell element that was resized.
                                    ev.detail.widthInPercentages - The new width of the column in percentages.
                                    ev.detail.width - The new width of the column in pixels.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for columnResize using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('columnResize', (event) => {
    const detail = event.detail,
        dataField = detail.dataField,
        headerCellElement = detail.headerCellElement,
        widthInPercentages = detail.widthInPercentages,
        width = detail.width;

	// event handling code goes here.
})

                                    closingThis event is fired immediately before the task editing window or tooltip is about to close. At this stage, you have the opportunity to intercept and prevent the closing operation by calling event.preventDefault() within your event handler. This allows you to perform validation, display confirmation dialogs, or execute other logic before the window or tooltip is dismissed.CustomEvent

                                    This event is fired immediately before the task editing window or tooltip is about to close. At this stage, you have the opportunity to intercept and prevent the closing operation by calling event.preventDefault() within your event handler. This allows you to perform validation, display confirmation dialogs, or execute other logic before the window or tooltip is dismissed.

                                    • Bubbles Yes
                                    • Cancelable Yes
                                    • Interface CustomEvent
                                    • Event handler property onClosing

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip.
                                    ev.detail.item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
                                    ev.detail.target - The instance of the window/tooltip that is going to close.
                                    ev.detail.type - The type of window/tooltip that is going to close. There are three types of windows inside GanttChart:
                                    • confirm - a confirm window. This type of window is usually used to confirm the deletion of a task.
                                    • task - a window used for task editing.
                                    • connection - a window used to delete a connection.
                                    . If the event is a tooltip event, there are several tooltip types:
                                    • indicator - when the tooltip owner is an indicator.
                                    • segment - when the tooltip owner is a task segment.
                                    • task - when the tooltip owner is a task.
                                    • resource - when the tooltip target is a resource.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for closing using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('closing', (event) => {
    const detail = event.detail,
        owner = detail.owner,
        item = detail.item,
        target = detail.target,
        type = detail.type;

	// event handling code goes here.
})

                                    closeThis event is triggered when the task editing window is closed or hidden by the user. It indicates that the user has exited the task editing interface, either by saving changes, cancelling, or clicking outside the window. This event can be used to perform cleanup actions, update the UI, or save edits as necessary.CustomEvent

                                    This event is triggered when the task editing window is closed or hidden by the user. It indicates that the user has exited the task editing interface, either by saving changes, cancelling, or clicking outside the window. This event can be used to perform cleanup actions, update the UI, or save edits as necessary.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onClose

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
                                    ev.detail.item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
                                    ev.detail.target - The instance of the window/tooltip that is closed.
                                    ev.detail.type - The type of window/tooltip that is closed. There are three types of windows inside GanttChart:
                                    • confirm - a confirm window. This type of window is usually used to confirm the deletion of a task.
                                    • task - a window used for task editing.
                                    • connection - a window used to delete a connection.
                                    . If the event is a tooltip event, there are several tooltip types:
                                    • indicator - when the tooltip owner is an indicator.
                                    • segment - when the tooltip owner is a task segment.
                                    • task - when the tooltip owner is a task.
                                    • resource - when the tooltip target is a resource.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for close using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('close', (event) => {
    const detail = event.detail,
        owner = detail.owner,
        item = detail.item,
        target = detail.target,
        type = detail.type;

	// event handling code goes here.
})

                                    collapseThis event is triggered whenever a user collapses an item, such as hiding or minimizing a section, panel, or list element within the interface. It enables developers to execute custom logic or UI updates in response to the item's transition from an expanded (visible) state to a collapsed (hidden or minimized) state.CustomEvent

                                    This event is triggered whenever a user collapses an item, such as hiding or minimizing a section, panel, or list element within the interface. It enables developers to execute custom logic or UI updates in response to the item's transition from an expanded (visible) state to a collapsed (hidden or minimized) state.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onCollapse

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.isGroup - A boolean flag indicating whether the collapsed item is a resource group. This is the case when groupByResoruces is enabled.
                                    ev.detail.item - The object details of the collapsed item.
                                    ev.detail.index - The index of the collapsed item.
                                    ev.detail.label - The label of the collapsed item.
                                    ev.detail.value - The value of the collapsed item.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Try a demo showcasing the collapse event.

                                    Examples

                                    Listen for collapse using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('collapse', (event) => {
    const detail = event.detail,
        isGroup = detail.isGroup,
        item = detail.item,
        index = detail.index,
        label = detail.label,
        value = detail.value;

	// event handling code goes here.
})

                                    dragStartThis event is triggered when a user begins dragging a task element. In the event handler function, you can call event.preventDefault() to cancel or prevent the drag operation from proceeding. This allows you to implement custom logic to determine whether dragging should be allowed for a specific task, based on application requirements.CustomEvent

                                    This event is triggered when a user begins dragging a task element. In the event handler function, you can call event.preventDefault() to cancel or prevent the drag operation from proceeding. This allows you to implement custom logic to determine whether dragging should be allowed for a specific task, based on application requirements.

                                    • Bubbles Yes
                                    • Cancelable Yes
                                    • Interface CustomEvent
                                    • Event handler property onDragStart

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.id - The id of the task that is going to be dragged.
                                    ev.detail.item - The object of the task that is going to be dragged.
                                    ev.detail.dateStart - The start date of the task that is going to be dragged.
                                    ev.detail.dateEnd - The end date of the task that is going to be dragged.
                                    ev.detail.segment - The segment object that is going to be dragged. This attribute is undefined if a segment is not going to be dragged.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for dragStart using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('dragStart', (event) => {
    const detail = event.detail,
        id = detail.id,
        item = detail.item,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd,
        segment = detail.segment;

	// event handling code goes here.
})

                                    dragEndThis event is triggered when the user completes dragging a task and releases it, indicating the end of the drag-and-drop operation for that specific task. It can be used to perform actions such as updating the task's position, saving changes, or triggering related callbacks after the drag action concludes.CustomEvent

                                    This event is triggered when the user completes dragging a task and releases it, indicating the end of the drag-and-drop operation for that specific task. It can be used to perform actions such as updating the task's position, saving changes, or triggering related callbacks after the drag action concludes.

                                    • Bubbles Yes
                                    • Cancelable Yes
                                    • Interface CustomEvent
                                    • Event handler property onDragEnd

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.id - The id of the task that is was dragged.
                                    ev.detail.item - The object of the task that is was dragged.
                                    ev.detail.dateStart - The start date of the task that is was dragged.
                                    ev.detail.dateEnd - The end date of the task that is was dragged.
                                    ev.detail.segment - The segment object that was dragged. This attribute is undefined if a segment has not been dragged.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for dragEnd using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('dragEnd', (event) => {
    const detail = event.detail,
        id = detail.id,
        item = detail.item,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd,
        segment = detail.segment;

	// event handling code goes here.
})

                                    expandThis event is triggered when a user expands an item, such as clicking to reveal additional content or details. It can be used to execute custom logic in response to the item's expansion, such as loading more data, updating the user interface, or tracking user interactions.CustomEvent

                                    This event is triggered when a user expands an item, such as clicking to reveal additional content or details. It can be used to execute custom logic in response to the item's expansion, such as loading more data, updating the user interface, or tracking user interactions.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onExpand

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.isGroup - A boolean flag indicating whether the collapsed item is a resource group. This is the case when groupByResoruces is enabled.
                                    ev.detail.item - The index of the expanded item.
                                    ev.detail.index - The index of the expanded item.
                                    ev.detail.label - The label of the expanded item.
                                    ev.detail.value - The value of the expanded item.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Try a demo showcasing the expand event.

                                    Examples

                                    Listen for expand using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('expand', (event) => {
    const detail = event.detail,
        isGroup = detail.isGroup,
        item = detail.item,
        index = detail.index,
        label = detail.label,
        value = detail.value;

	// event handling code goes here.
})

                                    filterThis event is triggered whenever a filter is applied to the GanttChart, such as when the user sets specific criteria to display only certain tasks or time periods. It allows developers to execute custom logic in response to filtering actions, such as updating related UI components or fetching additional data based on the current filter state.CustomEvent

                                    This event is triggered whenever a filter is applied to the GanttChart, such as when the user sets specific criteria to display only certain tasks or time periods. It allows developers to execute custom logic in response to filtering actions, such as updating related UI components or fetching additional data based on the current filter state.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onFilter

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.type - The type of items that have been filtered ( task or resource ).
                                    ev.detail.action - The name of the filtering action (whether filtering is added or removed).
                                    ev.detail.filters - The filters that have been applied. Filters represent Smart.Utilities.FilterGroup objects.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for filter using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('filter', (event) => {
    const detail = event.detail,
        type = detail.type,
        action = detail.action,
        filters = detail.filters;

	// event handling code goes here.
})

                                    itemClickThis event is triggered whenever a user clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.CustomEvent

                                    This event is triggered whenever a user clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onItemClick

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.id - The id of the task.
                                    ev.detail.item - The item that was clicked. It can be a task, resource or connection.
                                    ev.detail.type - The type of item. Possible values are: 'task', 'project', 'resource', 'connection'.
                                    ev.detail.originalEvent - The original DOM event.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for itemClick using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('itemClick', (event) => {
    const detail = event.detail,
        id = detail.id,
        item = detail.item,
        type = detail.type,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

                                    itemDoubleClickThis event is triggered whenever a user double clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.CustomEvent

                                    This event is triggered whenever a user double clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onItemDoubleClick

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.id - The id of the task.
                                    ev.detail.item - The item that was clicked. It can be a task, resource or connection.
                                    ev.detail.type - The type of item. Possible values are: 'task', 'project', 'resource', 'connection'.
                                    ev.detail.originalEvent - The original DOM event.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for itemDoubleClick using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('itemDoubleClick', (event) => {
    const detail = event.detail,
        id = detail.id,
        item = detail.item,
        type = detail.type,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

                                    itemInsertThis event is triggered whenever a new Task, Resource, or Connection is added to the system—such as when a user creates a new task, assigns a new resource, or establishes a new connection between entities. The event allows you to handle actions or updates related to these insertions in real time.CustomEvent

                                    This event is triggered whenever a new Task, Resource, or Connection is added to the system—such as when a user creates a new task, assigns a new resource, or establishes a new connection between entities. The event allows you to handle actions or updates related to these insertions in real time.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onItemInsert

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
                                    ev.detail.item - An object that represents the actual item with it's attributes.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for itemInsert using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('itemInsert', (event) => {
    const detail = event.detail,
        type = detail.type,
        item = detail.item;

	// event handling code goes here.
})

                                    itemRemoveThis event is triggered whenever a Task, Resource, or Connection is deleted or removed from the system. It allows you to perform actions or update the user interface in response to the removal of these entities. The event provides relevant information about the item that was removed, enabling you to handle cleanup, logging, or other custom behaviors as needed.CustomEvent

                                    This event is triggered whenever a Task, Resource, or Connection is deleted or removed from the system. It allows you to perform actions or update the user interface in response to the removal of these entities. The event provides relevant information about the item that was removed, enabling you to handle cleanup, logging, or other custom behaviors as needed.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onItemRemove

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.id - The id of the task.
                                    ev.detail.type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
                                    ev.detail.item - An object that represents the actual item with it's attributes.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for itemRemove using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('itemRemove', (event) => {
    const detail = event.detail,
        id = detail.id,
        type = detail.type,
        item = detail.item;

	// event handling code goes here.
})

                                    itemUpdateThis event is triggered whenever a Task, Resource, or Connection undergoes an update. This includes changes to properties, status, or associations within any of these entities. Use this event to respond to modifications such as edits, status transitions, or reassignments involving Tasks, Resources, or Connections in the system.CustomEvent

                                    This event is triggered whenever a Task, Resource, or Connection undergoes an update. This includes changes to properties, status, or associations within any of these entities. Use this event to respond to modifications such as edits, status transitions, or reassignments involving Tasks, Resources, or Connections in the system.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onItemUpdate

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.id - The id of the task.
                                    ev.detail.type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
                                    ev.detail.item - An object that represents the actual item with it's attributes.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for itemUpdate using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('itemUpdate', (event) => {
    const detail = event.detail,
        id = detail.id,
        type = detail.type,
        item = detail.item;

	// event handling code goes here.
})

                                    openingThis event is fired immediately before the task editing window or tooltip is about to open. At this stage, you have the opportunity to intercept and potentially cancel the opening operation by calling event.preventDefault() within your event handler. This allows you to implement custom logic to control whether the editing window or tooltip should be displayed.CustomEvent

                                    This event is fired immediately before the task editing window or tooltip is about to open. At this stage, you have the opportunity to intercept and potentially cancel the opening operation by calling event.preventDefault() within your event handler. This allows you to implement custom logic to control whether the editing window or tooltip should be displayed.

                                    • Bubbles Yes
                                    • Cancelable Yes
                                    • Interface CustomEvent
                                    • Event handler property onOpening

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
                                    ev.detail.item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
                                    ev.detail.target - The instance of the window/tooltip that is going to open.
                                    ev.detail.type - The type of window/tooltip that is going to open. There are three types of windows inside GanttChart:
                                    • confirm - a confirm window. This type of window is usually used to confirm the deletion of a task.
                                    • task - a window used for task editing.
                                    • connection - a window used to delete a connection.
                                    . If the event is a tooltip event, there are several tooltip types:
                                    • indicator - when the tooltip owner is an indicator.
                                    • segment - when the tooltip owner is a task segment.
                                    • task - when the tooltip owner is a task.
                                    • resource - when the tooltip target is a resource.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for opening using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('opening', (event) => {
    const detail = event.detail,
        owner = detail.owner,
        item = detail.item,
        target = detail.target,
        type = detail.type;

	// event handling code goes here.
})

                                    openThis event is triggered whenever the task editing window becomes visible, such as when a user opens the edit task modal or interface. It is also triggered whenever a tooltip related to task actions is shown. This allows developers to respond to both the display of the task edit view and the appearance of relevant tooltips.CustomEvent

                                    This event is triggered whenever the task editing window becomes visible, such as when a user opens the edit task modal or interface. It is also triggered whenever a tooltip related to task actions is shown. This allows developers to respond to both the display of the task edit view and the appearance of relevant tooltips.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onOpen

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
                                    ev.detail.item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
                                    ev.detail.target - The instance of the window/tooltip that is opened.
                                    ev.detail.type - The type of window/tooltip that is opened. There are three types of windows inside GanttChart:
                                    • confirm - a confirm window. This type of window is usually used to confirm the deletion of a task.
                                    • task - a window used for task editing.
                                    • connection - a window used to delete a connection.
                                    . If the event is a tooltip event, there are several tooltip types:
                                    • indicator - when the tooltip owner is an indicator.
                                    • segment - when the tooltip owner is a task segment.
                                    • task - when the tooltip owner is a task.
                                    • resource - when the tooltip target is a resource.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for open using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('open', (event) => {
    const detail = event.detail,
        owner = detail.owner,
        item = detail.item,
        target = detail.target,
        type = detail.type;

	// event handling code goes here.
})

                                    progressChangeStartThis event is fired whenever the progress of a task bar begins to change due to user interaction, such as dragging the progress handle or clicking on the bar. Within the event handler, you can call event.preventDefault() to cancel or prevent the progress update from occurring. This provides an opportunity to validate the operation or implement custom logic before the task bar value is changed.CustomEvent

                                    This event is fired whenever the progress of a task bar begins to change due to user interaction, such as dragging the progress handle or clicking on the bar. Within the event handler, you can call event.preventDefault() to cancel or prevent the progress update from occurring. This provides an opportunity to validate the operation or implement custom logic before the task bar value is changed.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onProgressChangeStart

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.id - The id of the task.
                                    ev.detail.index - The index of the task which progress is going to be changed.
                                    ev.detail.progress - The progress of the task before it is changed.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for progressChangeStart using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('progressChangeStart', (event) => {
    const detail = event.detail,
        id = detail.id,
        index = detail.index,
        progress = detail.progress;

	// event handling code goes here.
})

                                    progressChangeEndThis event is triggered whenever there is an update to a task's progress value. It occurs each time the task progresses, such as when a user completes a step or when the system automatically tracks advancement. The event provides updated information about the current state of the task’s progress, enabling UI elements or other components to respond accordingly (e.g., updating a progress bar or displaying status messages).CustomEvent

                                    This event is triggered whenever there is an update to a task's progress value. It occurs each time the task progresses, such as when a user completes a step or when the system automatically tracks advancement. The event provides updated information about the current state of the task’s progress, enabling UI elements or other components to respond accordingly (e.g., updating a progress bar or displaying status messages).

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onProgressChangeEnd

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.id - The id of the task.
                                    ev.detail.index - The index of the task which progress is has been changed.
                                    ev.detail.progress - The progress of the task after it was changed.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for progressChangeEnd using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('progressChangeEnd', (event) => {
    const detail = event.detail,
        id = detail.id,
        index = detail.index,
        progress = detail.progress;

	// event handling code goes here.
})

                                    resizeStartThis event is triggered when the user begins resizing a task, such as changing its duration or endpoints. Within the event handler function, you can prevent the resizing operation from proceeding by calling event.preventDefault(). This allows developers to implement custom logic or validation before allowing the resize action to continue.CustomEvent

                                    This event is triggered when the user begins resizing a task, such as changing its duration or endpoints. Within the event handler function, you can prevent the resizing operation from proceeding by calling event.preventDefault(). This allows developers to implement custom logic or validation before allowing the resize action to continue.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onResizeStart

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.id - The id of the task that is going to be resized.
                                    ev.detail.item - The object of the task that is going to be resized.
                                    ev.detail.dateStart - The start date of the task that is going to be resized.
                                    ev.detail.dateEnd - The end date of the task that is going to be resized.
                                    ev.detail.segment - The segment object that is going to be resized. This attribute is undefined if a segment is not going to be resized.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for resizeStart using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('resizeStart', (event) => {
    const detail = event.detail,
        id = detail.id,
        item = detail.item,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd,
        segment = detail.segment;

	// event handling code goes here.
})

                                    resizeEndThis event is triggered when a user completes resizing a task, indicating that the resize action has ended and the new task size has been set.CustomEvent

                                    This event is triggered when a user completes resizing a task, indicating that the resize action has ended and the new task size has been set.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onResizeEnd

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.id - The id of the task that was resized.
                                    ev.detail.item - The object of the task that was resized.
                                    ev.detail.dateStart - The start date of the task that was resized.
                                    ev.detail.dateEnd - The end date of the task that was resized.
                                    ev.detail.segment - The segment object that was resized. This attribute is undefined if a segment has not been resized.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for resizeEnd using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('resizeEnd', (event) => {
    const detail = event.detail,
        id = detail.id,
        item = detail.item,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd,
        segment = detail.segment;

	// event handling code goes here.
})

                                    sortThis event is triggered whenever the user sorts the GanttChart by clicking on a column header. It fires each time the sorting order or the sorted column changes, allowing you to respond to updates in the displayed task order.CustomEvent

                                    This event is triggered whenever the user sorts the GanttChart by clicking on a column header. It fires each time the sorting order or the sorted column changes, allowing you to respond to updates in the displayed task order.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onSort

                                    Arguments

                                    evCustomEvent
                                    ev.detailObject
                                    ev.detail.type - The type of columns that have been sorted ( task or resource column ).
                                    ev.detail.columns - An array of objects that contains the currently sorted column objects.
                                    ev.detail.sortDataFields - The dataFields of the columns that have been sorted. The dataField corresponds to the value property of a taskColumns/resourceColumns object.
                                    ev.detail.sortOrders - The orders of the columns that have been sorted.
                                    ev.detail.sortDataTypes - The data types of the columns that have been sorted.

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for sort using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('sort', (event) => {
    const detail = event.detail,
        type = detail.type,
        columns = detail.columns,
        sortDataFields = detail.sortDataFields,
        sortOrders = detail.sortOrders,
        sortDataTypes = detail.sortDataTypes;

	// event handling code goes here.
})

                                    scrollBottomReachedThis event is triggered when the user scrolls to the very bottom of the Timeline component, indicating that all currently loaded timeline items have been reached. It can be used to implement features such as infinite scrolling or loading additional content when the end of the timeline is visible.CustomEvent

                                    This event is triggered when the user scrolls to the very bottom of the Timeline component, indicating that all currently loaded timeline items have been reached. It can be used to implement features such as infinite scrolling or loading additional content when the end of the timeline is visible.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onScrollBottomReached

                                    Arguments

                                    evCustomEvent

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for scrollBottomReached using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('scrollBottomReached', (event) => {
	// event handling code goes here.
})

                                    scrollTopReachedThis event is triggered when the Timeline component reaches its uppermost scroll position, indicating that the user has scrolled all the way to the top of the Timeline. Use this event to load earlier items, display notifications, or perform other actions when the beginning of the Timeline is reached.CustomEvent

                                    This event is triggered when the Timeline component reaches its uppermost scroll position, indicating that the user has scrolled all the way to the top of the Timeline. Use this event to load earlier items, display notifications, or perform other actions when the beginning of the Timeline is reached.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onScrollTopReached

                                    Arguments

                                    evCustomEvent

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for scrollTopReached using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('scrollTopReached', (event) => {
	// event handling code goes here.
})

                                    scrollLeftReachedThis event is triggered when the user scrolls the Timeline component all the way to the start of its horizontal axis, reaching the earliest (leftmost) visible position. Use this event to detect when the Timeline has reached its starting boundary during horizontal scrolling.CustomEvent

                                    This event is triggered when the user scrolls the Timeline component all the way to the start of its horizontal axis, reaching the earliest (leftmost) visible position. Use this event to detect when the Timeline has reached its starting boundary during horizontal scrolling.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onScrollLeftReached

                                    Arguments

                                    evCustomEvent

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for scrollLeftReached using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('scrollLeftReached', (event) => {
	// event handling code goes here.
})

                                    scrollRightReachedThis event is triggered when the user scrolls to the far right end of the Timeline component horizontally, indicating that no additional content is available in that direction.CustomEvent

                                    This event is triggered when the user scrolls to the far right end of the Timeline component horizontally, indicating that no additional content is available in that direction.

                                    • Bubbles Yes
                                    • Cancelable No
                                    • Interface CustomEvent
                                    • Event handler property onScrollRightReached

                                    Arguments

                                    evCustomEvent

                                    Methods

                                    isDefaultPrevented

                                    Returns true if the event was prevented by any of its subscribers.

                                    Returns

                                    boolean true if the default action was prevented. Otherwise, returns false.

                                    preventDefault

                                    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                    stopPropagation

                                    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                    Examples

                                    Listen for scrollRightReached using the pattern that matches your stack.

                                    DOM — listen on the custom element (use a specific selector if the page has more than one):

                                    document.querySelector('smart-gantt-chart')?.addEventListener('scrollRightReached', (event) => {
	// event handling code goes here.
})

                                    Methods

                                    addFilter( columns: any, filterGroup: any): voidEnables the application of a user-defined filter to a specified column, allowing you to customize how data is displayed or managed within either a task column or a resource column. This feature supports more precise data sorting, searching, or visibility based on your chosen criteria.

                                    Enables the application of a user-defined filter to a specified column, allowing you to customize how data is displayed or managed within either a task column or a resource column. This feature supports more precise data sorting, searching, or visibility based on your chosen criteria.

                                    Arguments

                                    columnsany

                                    An object or an array of objects with the following syntax:
                                    type - indicates the type of column to filter. Possible values are 'task' or 'resource'.

                                    value - the value of the column that must match the value attribute of a taskColumns/resourceColumns object(e.g. 'label', 'dateStart', etc).
                                    .

                                    filterGroupany

                                    A Smart.Utilities.FilterGroup object. Here's an example for creating a FilterGroup object: const filterGroup = new window.Smart.Utilities.FilterGroup(), filterObject = filterGroup.createFilter('string', 'Task B', 'STARTS_WITH_CASE_SENSITIVE'); filterGroup.addFilter('or', filterObject); gantt.addFilter({ type: 'task', value: 'label' }, filterGroup);

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.addFilter("{ type: 'task', value: 'label' }, FilterGroup");

                                    beginUpdate(): voidInitiates an update operation, allowing you to group and apply multiple method calls or set several properties in a single batch. This approach is ideal for making coordinated changes efficiently, minimizing redundant processing or event triggers that could occur if each update were applied individually.

                                    Initiates an update operation, allowing you to group and apply multiple method calls or set several properties in a single batch. This approach is ideal for making coordinated changes efficiently, minimizing redundant processing or event triggers that could occur if each update were applied individually.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.beginUpdate();

                                    clearFilters(): voidRemoves all active filters from the current view, resetting any filter selections and displaying the complete, unfiltered dataset or content.

                                    Removes all active filters from the current view, resetting any filter selections and displaying the complete, unfiltered dataset or content.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.clearFilters();

                                    clearResources(): voidDeletes all resources from the system, ensuring that no data or assets remain. This operation is irreversible and will remove every resource currently managed by the application.

                                    Deletes all resources from the system, ensuring that no data or assets remain. This operation is irreversible and will remove every resource currently managed by the application.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.clearResources();

                                    clearSelection(): voidDeselects all currently selected items within the GanttChart component, including both Tasks and Resources. Additionally, this action removes any visual highlights or indicators related to task-resource assignments, ensuring that no items remain selected or highlighted in the chart.

                                    Deselects all currently selected items within the GanttChart component, including both Tasks and Resources. Additionally, this action removes any visual highlights or indicators related to task-resource assignments, ensuring that no items remain selected or highlighted in the chart.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.clearSelection();

                                    clearSort(): voidRemoves any active sorting from the columns, restoring the original or default order of the data. This action resets the column sorting state, so no columns are sorted after this operation.

                                    Removes any active sorting from the columns, restoring the original or default order of the data. This action resets the column sorting state, so no columns are sorted after this operation.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.clearSort();

                                    clearState(): voidRemoves a previously stored state of the element from LocalStorage, based on the element's unique id attribute. Note: The element must have an id specified for this operation to work.

                                    Removes a previously stored state of the element from LocalStorage, based on the element's unique id attribute. Note: The element must have an id specified for this operation to work.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.clearState("state");

                                    clearTasks(): voidDeletes all existing tasks from the list, resulting in an empty task collection. This action is irreversible and will permanently remove every task from storage.

                                    Deletes all existing tasks from the list, resulting in an empty task collection. This action is irreversible and will permanently remove every task from storage.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.clearTasks();

                                    closeWindow(): voidCloses any active popup window that was opened within the specified element. This method searches for and terminates all open popup windows that are currently displayed inside the targeted element, ensuring that no popups remain visible or interactive.

                                    Closes any active popup window that was opened within the specified element. This method searches for and terminates all open popup windows that are currently displayed inside the targeted element, ensuring that no popups remain visible or interactive.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.closeWindow();

                                    collapse( id: string | number): voidCollapses a currently expanded project section, minimizing its content to provide a streamlined view and reduce on-screen clutter. This action hides the project's detailed information while keeping the project accessible for future expansion.

                                    Collapses a currently expanded project section, minimizing its content to provide a streamlined view and reduce on-screen clutter. This action hides the project's detailed information while keeping the project accessible for future expansion.

                                    Arguments

                                    idstring | number

                                    The id of a project item that should be collapsed.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.collapse("0");

                                    Try a demo showcasing the collapse method.

                                    collapseAllRows(): arrayCollapses all rows.

                                    Collapses all rows.

                                    Returnsarray

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.collapseAllRows();

                                    createConnection( startTaskIndex: number | string, taskEndIndex?: number | string, connectionType?: number, lag?: number): voidEstablishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.

                                    Establishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.

                                    Arguments

                                    startTaskIndexnumber | string

                                    The id of the start task or the connection string like '2-3-0'. If the complete connections string is provided as the first argument, the rest of the method arguments are not necessary

                                    taskEndIndex?number | string

                                    The id of the end task.

                                    connectionType?number

                                    The type of the connection. A numeric value from 0 to 3. The connection type can be:
                                    0 - Start-to-Start connection.

                                    1 - End-to-Start connection.

                                    2 - End-to-End connection.

                                    3 - Start-to-End connection.

                                    lag?number

                                    The connection lag in miliseconds. Used by the Auto scheduling algorithm in order allow some slack time slack time before or after the next task begins/ends. Lag is measured in miliseconds. It can be a negative (lead) or a positive (lag) number.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.createConnection("1, 2, 0");

                                    endUpdate(): voidConcludes the update operation, allowing the GanttChart to resume its rendering process. Invoking this method will trigger a refresh, ensuring that all recent changes are visually reflected on the chart.

                                    Concludes the update operation, allowing the GanttChart to resume its rendering process. Invoking this method will trigger a refresh, ensuring that all recent changes are visually reflected on the chart.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.endUpdate();

                                    ensureVisible( taskId: string | number): voidEnsures that the specified task element is brought into view within the scrollable container by automatically scrolling the page or container if necessary, so the task is fully visible to the user.

                                    Ensures that the specified task element is brought into view within the scrollable container by automatically scrolling the page or container if necessary, so the task is fully visible to the user.

                                    Arguments

                                    taskIdstring | number

                                    The id of the target Task.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.ensureVisible("0");

                                    expand( id: string | number): voidExpands a collapsed project to reveal its associated tasks, allowing users to view and interact with all items within the project.

                                    Expands a collapsed project to reveal its associated tasks, allowing users to view and interact with all items within the project.

                                    Arguments

                                    idstring | number

                                    The id of a project task that should be expanded.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.expand("0");

                                    Try a demo showcasing the expand method.

                                    expandAllRows(): arrayExpands all rows.

                                    Expands all rows.

                                    Returnsarray

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.expandAllRows();

                                    exportData( dataFormat: string, callback?: any): voidExports the hierarchical tree data structure associated with the GanttChart, including all tasks, sub-tasks, and their relationships, in a serialized format suitable for data exchange or storage.

                                    Exports the hierarchical tree data structure associated with the GanttChart, including all tasks, sub-tasks, and their relationships, in a serialized format suitable for data exchange or storage.

                                    Arguments

                                    dataFormatstring

                                    Determines the format of the exported file. Three possible values are available:
                                    pdf

                                    xlsx

                                    html

                                    tsv

                                    csv

                                    xml

                                    callback?any

                                    A callback that allows to format the exported data based on a condition. For additional details, refer ro the Smart Export Documentation.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.exportData("'pdf'");

                                    getConnectionDetails( connectionId: string): object | undefinedReturns the details of the specified connection, providing information such as: the starting task (`startTask`), ending task (`endTask`), unique identifiers of the starting and ending tasks (`startTaskId`, `endTaskId`), and the connection type (`type`). For a comprehensive explanation of the available connection types, please refer to the 'connectionEnd' event documentation within this document or the dedicated topic on our website.

                                    Returns the details of the specified connection, providing information such as: the starting task (`startTask`), ending task (`endTask`), unique identifiers of the starting and ending tasks (`startTaskId`, `endTaskId`), and the connection type (`type`). For a comprehensive explanation of the available connection types, please refer to the 'connectionEnd' event documentation within this document or the dedicated topic on our website.

                                    Arguments

                                    connectionIdstring

                                    A connection id. Each connection has a unique id that is assigned when a connection is created.

                                    Returnsobject | undefined

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getConnectionDetails("0-3-0","6-15-1");

                                    getConnections(): arrayRetrieves a complete list of all current connections. The returned value is an array of objects, where each object represents a single connection and includes comprehensive metadata about that connection. Each connection object contains the following properties:- **id**: A unique identifier for the connection.- **type**: The type or category of the connection (e.g., dependency, sequential, etc.).- **startTaskId**: The unique identifier of the task where the connection originates.- **endTaskId**: The unique identifier of the task where the connection terminates.- **startIndex**: The index position within the start task from which the connection begins (useful for tasks with multiple connection points).- **endIndex**: The index position within the end task where the connection attaches.- **lag**: The lag time, typically in milliseconds or a project-specific unit, representing any delay between the linked tasks.This structure provides all necessary details for understanding the relationship and timing between connected tasks.

                                    Retrieves a complete list of all current connections. The returned value is an array of objects, where each object represents a single connection and includes comprehensive metadata about that connection. Each connection object contains the following properties:

                                    - **id**: A unique identifier for the connection.
                                    - **type**: The type or category of the connection (e.g., dependency, sequential, etc.).
                                    - **startTaskId**: The unique identifier of the task where the connection originates.
                                    - **endTaskId**: The unique identifier of the task where the connection terminates.
                                    - **startIndex**: The index position within the start task from which the connection begins (useful for tasks with multiple connection points).
                                    - **endIndex**: The index position within the end task where the connection attaches.
                                    - **lag**: The lag time, typically in milliseconds or a project-specific unit, representing any delay between the linked tasks.

                                    This structure provides all necessary details for understanding the relationship and timing between connected tasks.

                                    Returnsarray

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getConnections();

                                    getItemPath( item: any): stringReturns the tree path of a specified task or resource. The tree path represents the unique location of the task or resource within a hierarchical structure. If the user does not explicitly provide an ID for the task or resource, this tree path will be used as its default unique identifier.

                                    Returns the tree path of a specified task or resource. The tree path represents the unique location of the task or resource within a hierarchical structure. If the user does not explicitly provide an ID for the task or resource, this tree path will be used as its default unique identifier.

                                    Arguments

                                    itemany

                                    A GattChartTask/GanttChartResource item object.

                                    Returnsstring

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getItemPath("task");

                                    getResource( itemId: string | number): objectReturns the resource object that matches the specified ID or path parameter. This object contains all relevant properties and data associated with the requested resource. If no resource is found with the provided ID or path, the method returns null or an error, depending on implementation.

                                    Returns the resource object that matches the specified ID or path parameter. This object contains all relevant properties and data associated with the requested resource. If no resource is found with the provided ID or path, the method returns null or an error, depending on implementation.

                                    Arguments

                                    itemIdstring | number

                                    The id/path of a resource.

                                    Returnsobject

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getResource("4");

                                    getResourceIndex( resource: any): numberReturns the zero-based index position of the specified resource within a collection or array. If the resource is not found, the function typically returns -1.

                                    Returns the zero-based index position of the specified resource within a collection or array. If the resource is not found, the function typically returns -1.

                                    Arguments

                                    resourceany

                                    A GanttChartResource object.

                                    Returnsnumber

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getResourceIndex("ganttChartResource");

                                    getResources(): []Returns an array containing all resource objects associated with the GanttChart. Each resource object includes detailed information about a specific resource, such as its unique identifier, name, and any additional properties defined for resources within the GanttChart. This allows developers to access and manipulate the full set of resources currently present in the chart.

                                    Returns an array containing all resource objects associated with the GanttChart. Each resource object includes detailed information about a specific resource, such as its unique identifier, name, and any additional properties defined for resources within the GanttChart. This allows developers to access and manipulate the full set of resources currently present in the chart.

                                    Returns[]

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getResources();

                                    getResourceTasks( resource: any): arrayReturns a list of tasks that have been assigned to the specified resource, including all relevant details for each task. This allows you to retrieve and review all tasks currently associated with the given resource.

                                    Returns a list of tasks that have been assigned to the specified resource, including all relevant details for each task. This allows you to retrieve and review all tasks currently associated with the given resource.

                                    Arguments

                                    resourceany

                                    A GanttChartResource object or it's id.

                                    Returnsarray

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getResourceTasks("ganttChartResource");

                                    getSelectedIds(): array | nullReturns the IDs of the currently selected tasks or resources as an array. If selection functionality is disabled or if no items are currently selected, the function returns null.

                                    Returns the IDs of the currently selected tasks or resources as an array. If selection functionality is disabled or if no items are currently selected, the function returns null.

                                    Returnsarray | null

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getSelectedIds();

                                    getSelectedResources(): array | nullReturns an array containing information about all resources currently selected by the user. Each resource object may include details such as its unique identifier, name, type, and relevant metadata. This allows developers to programmatically access and process the user's current selections within the application.

                                    Returns an array containing information about all resources currently selected by the user. Each resource object may include details such as its unique identifier, name, type, and relevant metadata. This allows developers to programmatically access and process the user's current selections within the application.

                                    Returnsarray | null

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getSelectedResources();

                                    getSelectedTasks(): array | nullReturns an array containing all tasks that are currently selected by the user. Each task object in the array includes relevant task details such as its identifier, name, status, and any other associated properties. If no tasks are selected, an empty array is returned.

                                    Returns an array containing all tasks that are currently selected by the user. Each task object in the array includes relevant task details such as its identifier, name, status, and any other associated properties. If no tasks are selected, an empty array is returned.

                                    Returnsarray | null

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getSelectedTasks();

                                    getState(): []Provides a comprehensive JSON object containing all tasks within the specified element, including detailed information about each task's attributes, their interconnections (such as dependencies or links), and the full configuration settings associated with each task. This structured representation allows for thorough inspection, processing, or manipulation of the tasks and their relationships.

                                    Provides a comprehensive JSON object containing all tasks within the specified element, including detailed information about each task's attributes, their interconnections (such as dependencies or links), and the full configuration settings associated with each task. This structured representation allows for thorough inspection, processing, or manipulation of the tasks and their relationships.

                                    Returns[]

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getState();

                                    getTask( itemId: string | number): objectReturns the task object that matches the specified id or path. The id/path parameter can be either a unique identifier or a hierarchical location string for the task. The returned object contains detailed information and properties related to the task, such as its status, title, description, due date, and any associated metadata.

                                    Returns the task object that matches the specified id or path. The id/path parameter can be either a unique identifier or a hierarchical location string for the task. The returned object contains detailed information and properties related to the task, such as its status, title, description, due date, and any associated metadata.

                                    Arguments

                                    itemIdstring | number

                                    The id/path of a task.

                                    Returnsobject

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getTask("0.4");

                                    getTaskConnections( taskId: any): anyReturns the definitions of all connections associated with a specific task, including details about each connection's type, configuration, and related parameters.

                                    Returns the definitions of all connections associated with a specific task, including details about each connection's type, configuration, and related parameters.

                                    Arguments

                                    taskIdany

                                    A GanttChartTask object or it's id.

                                    Returnsany

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getTaskConnections("0");

                                    getTaskIndex( task: any): numberReturns the zero-based index position of the specified task within a task list. If the task is not found, the method returns -1.

                                    Returns the zero-based index position of the specified task within a task list. If the task is not found, the method returns -1.

                                    Arguments

                                    taskany

                                    A GattChartTask object.

                                    Returnsnumber

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getTaskIndex("gantt.tasks[0]");

                                    getTaskProject( task: any): object | undefinedReturns the associated Project object for a given task. If the task is not linked to any Project, the function returns undefined.

                                    Returns the associated Project object for a given task. If the task is not linked to any Project, the function returns undefined.

                                    Arguments

                                    taskany

                                    A GantChartTask object.

                                    Returnsobject | undefined

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getTaskProject("taskA","taskB");

                                    getTasks(): []Returns an array containing all task objects currently present in the GanttChart. Each task object includes details such as the task ID, name, start date, end date, dependencies, and any additional task-specific properties.

                                    Returns an array containing all task objects currently present in the GanttChart. Each task object includes details such as the task ID, name, start date, end date, dependencies, and any additional task-specific properties.

                                    Returns[]

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getTasks();

                                    getWorkingHours(): arrayReturns the working hours for a given day as an array of numerical values, where each value represents an hour within the standard working period (e.g., [9, 10, 11, 12, 13, 14, 15, 16, 17] for a 9 AM to 5 PM schedule).

                                    Returns the working hours for a given day as an array of numerical values, where each value represents an hour within the standard working period (e.g., [9, 10, 11, 12, 13, 14, 15, 16, 17] for a 9 AM to 5 PM schedule).

                                    Returnsarray

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.getWorkingHours();

                                    hideTooltip(): arrayConceals the tooltip element when it is currently displayed, ensuring that the tooltip is no longer visible to the user.

                                    Conceals the tooltip element when it is currently displayed, ensuring that the tooltip is no longer visible to the user.

                                    Returnsarray

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.hideTooltip();

                                    insertResource( resourceId: string | number, resourceObject?: any): voidAdds a new resource to the collection by creating and storing the provided data. Returns details of the created resource upon successful insertion.

                                    Adds a new resource to the collection by creating and storing the provided data. Returns details of the created resource upon successful insertion.

                                    Arguments

                                    resourceIdstring | number

                                    A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.

                                    resourceObject?any

                                    An object describing a Gantt Chart resource.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.insertResource("0, { id: 'newResource', label: 'New Resource', capacity: 4 }");

                                    insertTask( taskObject: any, project?: any, index?: number): string | number | undefinedInserts a new task into the timeline. You can specify the task’s placement by providing a project ID: if a valid project ID is supplied, the new task will be created as a subtask under that project; if no project ID is given, the task will be added as a root-level item in the timeline. This allows for flexible organization, supporting both standalone tasks and tasks nested within projects.

                                    Inserts a new task into the timeline. You can specify the task’s placement by providing a project ID: if a valid project ID is supplied, the new task will be created as a subtask under that project; if no project ID is given, the task will be added as a root-level item in the timeline. This allows for flexible organization, supporting both standalone tasks and tasks nested within projects.

                                    Arguments

                                    taskObjectany

                                    An object describing a Gantt Chart task.

                                    project?any

                                    A number or string that represents the id of a project (e.g. '0') or a project object definition present in the GanttChart. This parameter determines the parent project of the task that will be inserted. If null is passed as an arguemnt the new task will be inserted at root level without a parent project.

                                    index?number

                                    The index where the new item should be inserted(e.g. 2). This index will determine the position of the newly inserted task.

                                    Returnsstring | number | undefined

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.insertTask("{ label: 'Inserted Task 1', dateStart: '2020-08-10', dateEnd: '2020-12-23' }, '0.1', 1");

                                    isWorkingDay( date: Date): voidDetermines whether the specified target date falls on a working day by evaluating it against the nonworkingDays property. Returns true if the target date is a working day (not listed in nonworkingDays), and false if it is a non-working day.

                                    Determines whether the specified target date falls on a working day by evaluating it against the nonworkingDays property. Returns true if the target date is a working day (not listed in nonworkingDays), and false if it is a non-working day.

                                    Arguments

                                    dateDate

                                    A javascript Date object or a string/number which represents a valid JS Date.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.isWorkingDay("new Date(2021, 1, 10)");

                                    loadState( state?: any[]): voidEnhancement:Restores the element’s previously saved state by loading the provided state object, or, if no argument is supplied, checks the browser’s LocalStorage for any saved states associated with the element and loads them if available.

                                    Enhancement:

                                    Restores the element’s previously saved state by loading the provided state object, or, if no argument is supplied, checks the browser’s LocalStorage for any saved states associated with the element and loads them if available.

                                    Arguments

                                    state?any[]

                                    An Array containing a valid structure of Gantt Chart tasks.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.loadState("state");

                                    openWindow( taskId: any): voidOpens a popup window that allows the user to either edit or delete a connection when a specific connection string is provided. This popup provides relevant options and fields based on the selected task (edit or delete), streamlining the process of managing connection configurations.

                                    Opens a popup window that allows the user to either edit or delete a connection when a specific connection string is provided. This popup provides relevant options and fields based on the selected task (edit or delete), streamlining the process of managing connection configurations.

                                    Arguments

                                    taskIdany

                                    A string or number that represents the id of a task or the task object that is going to be edited or a connection string(e.g. '2-0-0').

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.openWindow("2");

                                    print(): voidConfigures the GanttChart for optimal print layout and formatting, then automatically launches the browser's Print Preview dialog, allowing users to review and print the current chart view.

                                    Configures the GanttChart for optimal print layout and formatting, then automatically launches the browser's Print Preview dialog, allowing users to review and print the current chart view.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.print();

                                    refresh( fullRefresh?: boolean): voidRefreshes the GanttChart display after resizing by recalculating and updating the scrollbars to ensure proper alignment and navigation.

                                    Refreshes the GanttChart display after resizing by recalculating and updating the scrollbars to ensure proper alignment and navigation.

                                    Arguments

                                    fullRefresh?boolean

                                    If set the GanttChart will be re-rendered completely.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.refresh(true,false);

                                    removeAllConnections(): voidRemoves all existing links or dependencies between tasks, effectively disconnecting every task from one another. After this operation, no task will be linked, dependent on, or related to any other task in the project.

                                    Removes all existing links or dependencies between tasks, effectively disconnecting every task from one another. After this operation, no task will be linked, dependent on, or related to any other task in the project.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.removeAllConnections();

                                    removeConnection( startTaskIndex: number | string, taskEndIndex?: number, connectionType?: number): objectRemoves a connection between two tasks. The function can be called in one of two ways:1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").2. With a single connection string argument that describes the connection (e.g., "1->2:FS").This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.

                                    Removes a connection between two tasks.
                                    The function can be called in one of two ways:

                                    1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").
                                    2. With a single connection string argument that describes the connection (e.g., "1->2:FS").

                                    This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.

                                    Arguments

                                    startTaskIndexnumber | string

                                    The index of the start task or the connection string like '2-3-0.

                                    taskEndIndex?number

                                    The index of the end task.

                                    connectionType?number

                                    The type of the connection. A numeric value from 0 to 3.

                                    Returnsobject

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    const result = document.querySelector('smart-gantt-chart')?.removeConnection("0, 4, 1");

                                    removeResource( resourceId: any): voidDeletes a specified resource from the system, permanently removing it and its associated data. This action cannot be undone.

                                    Deletes a specified resource from the system, permanently removing it and its associated data. This action cannot be undone.

                                    Arguments

                                    resourceIdany

                                    A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.removeResource("0");

                                    removeTask( taskId: any): voidRemoves the specified task from the timeline, effectively deleting it from the list of scheduled events. This operation updates the timeline to ensure the removed task no longer appears or affects the scheduling of other tasks.

                                    Removes the specified task from the timeline, effectively deleting it from the list of scheduled events. This operation updates the timeline to ensure the removed task no longer appears or affects the scheduling of other tasks.

                                    Arguments

                                    taskIdany

                                    A number or string that represents the id of a task or the actual item object.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.removeTask("0");

                                    removeTaskConnection( taskStart: any, taskEnd?: any): voidDeletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.

                                    Deletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.

                                    Arguments

                                    taskStartany

                                    The start task object or it's id.

                                    taskEnd?any

                                    The end task object or it's id.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.removeTaskConnection("10, 4");

                                    saveState( state?: any[]): voidStores the current configuration of the element in the browser's LocalStorage, allowing the settings to persist across page reloads or browser sessions. Note: The element must have a unique id attribute assigned for this functionality to work properly.

                                    Stores the current configuration of the element in the browser's LocalStorage, allowing the settings to persist across page reloads or browser sessions. Note: The element must have a unique id attribute assigned for this functionality to work properly.

                                    Arguments

                                    state?any[]

                                    An Array containing a valid structure of Gantt Chart tasks.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.saveState("state");

                                    scrollToDate( date: Date): voidScrolls the view to a specific date within a calendar or timeline component, bringing the selected date into focus for the user.

                                    Scrolls the view to a specific date within a calendar or timeline component, bringing the selected date into focus for the user.

                                    Arguments

                                    dateDate

                                    The date to scroll to.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.scrollToDate("new Date(2024, 5, 5)");

                                    selectResource( id: string | number): voidEnables the selection of a specific resource by specifying its unique identifier (ID). This functionality ensures that only the resource matching the provided ID is retrieved or manipulated.

                                    Enables the selection of a specific resource by specifying its unique identifier (ID). This functionality ensures that only the resource matching the provided ID is retrieved or manipulated.

                                    Arguments

                                    idstring | number

                                    The id of the resource to select.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.selectResource(1,"5");

                                    selectTask( id: string | number): voidEnables users to retrieve and select a specific task by providing its unique task ID. This functionality ensures precise identification and access to individual tasks within the system.

                                    Enables users to retrieve and select a specific task by providing its unique task ID. This functionality ensures precise identification and access to individual tasks within the system.

                                    Arguments

                                    idstring | number

                                    The id of the task to select.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.selectTask(1,"5");

                                    setLocale( locale: string, messages?: any): voidSets the locale of a component.

                                    Sets the locale of a component.

                                    Arguments

                                    localestring

                                    The locale abbreviation. For example: 'de'.

                                    messages?any

                                    Object containing the locale messages.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.setLocale("'de'");

                                    setWorkTime( settings: { days: (number | string | number[])[], hours: (number | string | number[])[] }): voidEnables users to define the standard working days and hours for the entire schedule in a single action. This ensures consistency by applying the specified days and time ranges across the relevant calendar or system settings.

                                    Enables users to define the standard working days and hours for the entire schedule in a single action. This ensures consistency by applying the specified days and time ranges across the relevant calendar or system settings.

                                    Arguments

                                    settings{ days: (number | string | number[])[], hours: (number | string | number[])[] }

                                    An object definition that contains the days and hours that should be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.setWorkTime("{ days: ['1-3']}","{ days: [[1,3]], hours: ['0:00-7:00']}");

                                    showTooltip( target: HTMLElement, content?: string): voidDisplays a tooltip for a designated element, providing additional contextual information or guidance when the user hovers over, focuses on, or interacts with that element.

                                    Displays a tooltip for a designated element, providing additional contextual information or guidance when the user hovers over, focuses on, or interacts with that element.

                                    Arguments

                                    targetHTMLElement

                                    The HTMLElement that will be the target of the tooltip.

                                    content?string

                                    Allows to set a custom content for the Tooltip.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.showTooltip();

                                    sort( columns: any): voidAutomatically sorts the tasks and resources in the GanttChart when the sortable option is enabled, allowing users to organize items by specified criteria such as start date, name, or priority.

                                    Automatically sorts the tasks and resources in the GanttChart when the sortable option is enabled, allowing users to organize items by specified criteria such as start date, name, or priority.

                                    Arguments

                                    columnsany

                                    An Array of objects which determine which columns to be sorted, the sort order and the type of item to sort: task or resource. If no arguments are provided sorting will be removed.
                                    An object should have the following properties:
                                    value - a string that represents the value of a taskColumn to sort.

                                    sortOrder - a string that represents the sorting order for the column: 'asc' (asscending sorting) or 'desc' (descending) are possible values.

                                    type - a string that represents the type of item to sort. This property determines which panel will be sorted. Two possible values: 'task', 'resource'.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.sort("[{ value: 'label', sortOrder: 'asc', type: 'task' }]","[{ value: 'label', sortOrder: 'asc', type: 'task' }, { value: 'label', sortOrder: 'asc', type: 'resource' }]");

                                    unselectResource( id: string | number): voidEnables the deselection of a specific resource by providing its unique identifier (ID). This function removes the selected state from the resource corresponding to the given ID, if it is currently selected.

                                    Enables the deselection of a specific resource by providing its unique identifier (ID). This function removes the selected state from the resource corresponding to the given ID, if it is currently selected.

                                    Arguments

                                    idstring | number

                                    The id of the resource to unselect.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.unselectResource(1,"5");

                                    unselectTask( id: string | number): voidEnables the deselection of a specific task by specifying its unique task ID. This operation removes the selected state from the corresponding task if it is currently selected.

                                    Enables the deselection of a specific task by specifying its unique task ID. This operation removes the selected state from the corresponding task if it is currently selected.

                                    Arguments

                                    idstring | number

                                    The id of the task to unselect.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.unselectTask(1,"5");

                                    unsetWorkTime( settings: { days: (number | string | number[])[], hours: (number | string | number[])[] }): voidRemoves any previously defined working hours for the user or resource. This method serves as the counterpart to setWorkingTime, effectively clearing or resetting the working time settings that were established earlier.

                                    Removes any previously defined working hours for the user or resource. This method serves as the counterpart to setWorkingTime, effectively clearing or resetting the working time settings that were established earlier.

                                    Arguments

                                    settings{ days: (number | string | number[])[], hours: (number | string | number[])[] }

                                    An object definition that contains the days and hours that should not be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.unsetWorkTime("{ days: ['1-3']}","{ days: [[1,3]], hours: ['0:00-7:00']}");

                                    updateResource( resourceId: any, taskObject: any): voidUpdates the specified resource with new data or modifications. This operation applies changes to the current state of the resource identified by its unique identifier, ensuring that only the provided fields are altered while preserving any unspecified properties.

                                    Updates the specified resource with new data or modifications. This operation applies changes to the current state of the resource identified by its unique identifier, ensuring that only the provided fields are altered while preserving any unspecified properties.

                                    Arguments

                                    resourceIdany

                                    A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.

                                    taskObjectany

                                    An object describing a Gantt Chart resource. The properties of this object will be applied to the target resource.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.updateResource("2, { label: 'Updated Task', capacity: 6 }");

                                    updateTask( taskId: any, taskObject: any): voidUpdates the details of an existing task, project, or milestone, such as its title, description, status, deadline, or assigned users. This operation allows you to modify key attributes to reflect changes in progress, requirements, or scheduling.

                                    Updates the details of an existing task, project, or milestone, such as its title, description, status, deadline, or assigned users. This operation allows you to modify key attributes to reflect changes in progress, requirements, or scheduling.

                                    Arguments

                                    taskIdany

                                    A number or string that represents the id of a task/project(e.g. '0') or the object definition of the task/project.

                                    taskObjectany

                                    An object describing a Gantt Chart task. The properties of this object will be applied to the desired task.

                                    On the custom element in the DOM (narrow the selector, e.g. to #my-ganttchart, if you host multiple widgets):

                                    document.querySelector('smart-gantt-chart')?.updateTask("'2', { label: 'Updated Task', dateEnd: '2020-12-23' }");

                                    CSS Variables

                                    --smart-gantt-chart-resource-splitter-bar-fit-sizevar()

                                    Default value

                                    "calc(var(--smart-gantt-chart-resource-timeline-content-height) + var(--smart-gantt-chart-task-default-height))"

                                    Determines the size of the splitter bar inside the Resource panel between the Table component and Resource timeline.

                                    --smart-gantt-chart-task-splitter-bar-fit-sizevar()

                                    Default value

                                    "var(--smart-gantt-chart-task-timeline-content-height)"

                                    Determines the height of the splitter nar inside the Task panel between the Table component and the Task timeline.

                                    --smart-gantt-chart-task-default-heightvar()

                                    Default value

                                    "30px"

                                    The height of a Task inside the Timeline

                                    --smart-gantt-chart-header-heightvar()

                                    Default value

                                    "var(--smart-gantt-chart-task-default-height)"

                                    The height of the Timeline Header container that is only displayed when the headerTemplate property is set. By default it's hidden.

                                    --smart-gantt-chart-task-bar-fill-paddingvar()

                                    Default value

                                    "5px"

                                    The padding of the Fill of the Task Bar

                                    --smart-gantt-chart-task-label-paddingvar()

                                    Default value

                                    "var(--smart-gantt-chart-task-bar-fill-padding)"

                                    --smart-gantt-chart-task-thumb-colorvar()

                                    Default value

                                    "rgba(0,0,0,.55)"

                                    The color of the thumb

                                    --smart-gantt-chart-task-progress-colorvar()

                                    Default value

                                    "rgba(0,0,0,.15)"

                                    The default color of the progress fill of all Tasks inside the Timeline

                                    --smart-gantt-chart-project-colorvar()

                                    Default value

                                    "#ffa558"

                                    The defaut color for all Project tasks

                                    --smart-gantt-chart-project-label-colorvar()

                                    Default value

                                    "#333"

                                    Determines the label color of the project tasks inside the Timeline.

                                    --smart-gantt-chart-project-label-color-selectedvar()

                                    Default value

                                    "#000"

                                    Determines the label color of the project tasks inside the Timeline when selected.

                                    --smart-gantt-chart-project-progress-colorvar()

                                    Default value

                                    "var(--smart-gantt-chart-task-progress-color)"

                                    The default color of the progress fill for all Project tasks

                                    --smart-gantt-chart-task-colorvar()

                                    Default value

                                    "rgb(43, 195, 190)"

                                    The default color of a Task inside the Timeline

                                    --smart-gantt-chart-milestone-colorvar()

                                    Default value

                                    "#800080"

                                    The default color for all Milestones

                                    --smart-gantt-chart-timeline-task-background-colorvar()

                                    Default value

                                    "transparent"

                                    Determines the background color of the tasks(rows) inside the Timeline.

                                    --smart-gantt-chart-timeline-task-connection-feedback-colorvar()

                                    Default value

                                    "#e6510a"

                                    Determines the default color of the feedback that is shows when creating a connection between tasks inside the Timeline.

                                    --smart-gantt-chart-timeline-task-connection-feedback-widthvar()

                                    Default value

                                    "1px"

                                    Determines the default width of the feedback that is shows when creating a connection between tasks inside the Timeline.

                                    --smart-gantt-chart-timeline-task-connection-feedback-stylevar()

                                    Default value

                                    "dashed"

                                    Determines the style of the feedback that is shows when creating a connection between tasks inside the Timeline.

                                    --smart-gantt-chart-timeline-task-connection-colorvar()

                                    Default value

                                    "var(--smart-gantt-chart-timeline-task-connection-feedback-color)"

                                    Determines the color of the connections between Tasks inside the Timeline.

                                    --smart-gantt-chart-timeline-task-connection-color-hovervar()

                                    Default value

                                    "var(--smart-gantt-chart-timeline-task-connection-color)"

                                    Determines the color on hover of the connections between Tasks inside the Timeline.

                                    --smart-gantt-chart-timeline-task-connection-widthvar()

                                    Default value

                                    "var(--smart-gantt-chart-timeline-task-connection-feedback-width)"

                                    Determines the width of the connections between the tasks inside the Timeline.

                                    --smart-gantt-chart-timeline-task-connection-stylevar()

                                    Default value

                                    "solid"

                                    Determines the style of the connections between the tasks inside the Timeline.

                                    --smart-gantt-chart-timeline-task-connection-arrow-typevar()

                                    Default value

                                    "solid"

                                    Determines the border type of the arrow of the connections between Tasks inside the Timeline.

                                    --smart-gantt-chart-timeline-task-connection-arrow-widthvar()

                                    Default value

                                    "5px"

                                    Determines the width of the arrow of the connections between Tasks inside the Timeline.

                                    --smart-gantt-chart-timeline-task-resize-indicator-widthvar()

                                    Default value

                                    "4px"

                                    Determines the defualt width of the resize indicator of the Task bars inside the Timeline.

                                    --smart-gantt-chart-timeline-task-resize-indicator-colorvar()

                                    Default value

                                    "#fff"

                                    Determines the background-color of the resize indicators of the Task bars insinde the Timeline.

                                    --smart-gantt-chart-timeline-task-resize-indicator-border-colorvar()

                                    Default value

                                    "#333"

                                    Determines the border-color of the resize indicator of the Task bars inside the Timeline.

                                    --smart-gantt-chart-timeline-task-progress-thumb-sizevar()

                                    Default value

                                    "10px"

                                    Determines the size of the thumb controlling the progress of a Task inside the Timeline.

                                    --smart-gantt-chart-timeline-cell-sizevar()

                                    Default value

                                    "auto"

                                    Determines the default width of the cells inside the Timeline.

                                    --smart-gantt-chart-timeline-cell-min-sizevar()

                                    Default value

                                    "70px"

                                    Determines the default min-width of the cells inside the Timeline and the Tree columns.

                                    --smart-gantt-chart-timeline-task-min-widthvar()

                                    Default value

                                    "5px"

                                    Determines the default min-width of the Tasks insinde the Timeline. Not applicable to Milestone tasks.

                                    --smart-gantt-chart-timeline-weekend-colorvar()

                                    Default value

                                    "#EFF5FD"

                                    Determines the default background color of the 'weekend' cells insinde the Timeline.

                                    --smart-gantt-chart-timeline-nonworking-colorvar()

                                    Default value

                                    "#F5F5F5"

                                    Determines the default background-color of the nonworking days/hours inside the Timeline.

                                    --smart-gantt-chart-default-widthvar()

                                    Default value

                                    "auto"

                                    Determines the default width of the element.

                                    --smart-gantt-chart-default-heightvar()

                                    Default value

                                    "600px"

                                    Determines the height of the element.

                                    --smart-gantt-chart-task-popup-window-default-widthvar()

                                    Default value

                                    "500px"

                                    Determines the width of the task editing popup windows of the element.

                                    --smart-gantt-chart-connection-popup-window-default-widthvar()

                                    Default value

                                    "300px"

                                    Determines the width of the connection editing popup windows of the element.

                                    --smart-gantt-chart-confirm-popup-window-default-widthvar()

                                    Default value

                                    "var(--smart-gantt-chart-connection-popup-default-width)"

                                    Determines the width of the confirm popup window of the element.

                                    --smart-gantt-chart-popup-window-header-heightvar()

                                    Default value

                                    "35px"

                                    Determines the height of the header of the popup windows inside the element.

                                    --smart-gantt-chart-popup-window-footer-heightvar()

                                    Default value

                                    "50px"

                                    Determines the height of the footer of the popup windows insinde the element.

                                    --smart-gantt-chart-header-placeholdervar()

                                    Default value

                                    " - "

                                    Determines the placeholder for the Timeline headers when there are no tasks.

                                    --smart-gantt-chart-progress-label-paddingvar()

                                    Default value

                                    "0 10px 0 10px"

                                    Determines the padding for the Timeline task progress label.

                                    --smart-gantt-chart-filter-row-heightvar()

                                    Default value

                                    "30px"

                                    Determines the height of the filter row that is displayed when taskFiltering or resourceFiltering is enabled.

                                    --smart-gantt-chart-task-fill-border-radiusvar()

                                    Default value

                                    "0"

                                    Determines the default border radius for the Timeline task bars.

                                    --smart-gantt-chart-segment-link-colorvar()

                                    Default value

                                    "var(--smart-gantt-chart-task-color)"

                                    Determines the color of the link between the segments of a task.

                                    --smart-gantt-chart-segment-link-sizevar()

                                    Default value

                                    "var(--smart-border-width)"

                                    Determines the size of the links between the segments of a task.

                                    --smart-gantt-chart-date-marker-colorvar()

                                    Default value

                                    "var(--smart-primary)"

                                    Determines the text color for the date markers.

                                    --smart-gantt-chart-date-marker-heightvar()

                                    Default value

                                    "25px"

                                    Determines the height of the date markers.

                                    --smart-gantt-chart-date-marker-widthvar()

                                    Default value

                                    "var(--smart-border-width)"

                                    Determines the width of the date markers.

                                    --smart-gantt-chart-date-marker-backgroundvar()

                                    Default value

                                    "var(--smart-primary)"

                                    Determines the background for the date marker label.

                                    --smart-gantt-chart-date-marker-colorvar()

                                    Default value

                                    "var(--smart-primary-color)"

                                    Determines the text color for the date marker label.

                                    --smart-gantt-chart-date-marker-h-offsetvar()

                                    Default value

                                    "10px"

                                    Determines the horizontal offset for the date marker label.

                                    --smart-gantt-chart-date-marker-v-offsetvar()

                                    Default value

                                    "15%"

                                    Determines the vertical offset for the date marker label.

                                    --smart-gantt-chart-deadline-iconvar()

                                    Default value

                                    "var(--smart-icon-attention-circled)"

                                    Determines the icon for the deadlines.

                                    --smart-gantt-chart-deadline-colorvar()

                                    Default value

                                    "var(--smart-error)"

                                    Determines the color for the deadlines icons.

                                    --smart-gantt-chart-baseline-proportionvar()

                                    Default value

                                    "2"

                                    Determines the proportion of the baseline compared to the task height. For example, the default value 2 means that the baseline will be taskHeight / 2.

                                    --smart-gantt-chart-baseline-backgroundvar()

                                    Default value

                                    "rgba(166, 205, 87, .5)"

                                    Determines the background of the baseline.

                                    --smart-gantt-chart-progress-label-widthvar()

                                    Default value

                                    "60px"

                                    Determines the width of the progress label.

                                    --smart-gantt-chart-current-time-indicator-sizevar()

                                    Default value

                                    "1px"

                                    Determines the current time indicator width.

                                    --smart-gantt-chart-current-time-indicator-backgroundvar()

                                    Default value

                                    "var(--smart-primary)"

                                    Determines the current time indicator background.

                                    --smart-gantt-chart-current-time-indicator-arrow-sizevar()

                                    Default value

                                    "7px"

                                    Determines the arrow size of the curernt time indicator.

                                    --smart-gantt-chart-current-time-indicator-header-sizevar()

                                    Default value

                                    "2px"

                                    Determines the current time indicator size inside the timeline header cell.

                                    --smart-gantt-chart-shader-backgroundvar()

                                    Default value

                                    "rgba(var(--smart-border-rgb), .5)"

                                    Determines the current time shader background color.