Gantt Chart - CSS API Reference

All Common CSS variables:

Specific CSS variables for Gantt Chart:

• --smart-gantt-chart-default-width - Determines the default width of the element.
• --smart-gantt-chart-default-height - Determines the height of the element.
• --smart-gantt-chart-splitter-bar-fit-size - Determines the size of the Splitter Bars inside the element.
• --smart-gantt-chart-task-tree-splitter-bar-fit-size - Determines the size of the Splitter Bars of the Task Columns.
• --smart-gantt-chart-task-default-height - Determines the height of all tasks insinde the element.
• --smart-gantt-chart-task-bar-fill-padding - Determines the top/bottom paddings of the Task bars inside the Timeline.
• --smart-gantt-chart-task-label-color - Determines the color of the label of the tasks inside the Timeline.
• --smart-gantt-chart-task-thumb-color - Determines the color of the progress thumb of the tasks inside the Timeline.
• --smart-gantt-chart-project-color - Determines the background of the project tasks inside the Timeline.
• --smart-gantt-chart-project-label-color - Determines the label color of the project tasks inside the Timeline.
• --smart-gantt-chart-project-label-color-selected - Determines the label color of the project tasks inside the Timeline when selected.
• --smart-gantt-chart-task-color - Determines the background of the tasks inside the Timeline.
• --smart-gantt-chart-task-label-color-selected - Determines the color of the tasks inside the Timeline when selected.
• --smart-gantt-chart-milestone-color - Determines the default color of all Milestones inside the Timeline.
• --smart-gantt-chart-timeline-task-row-color - Determines the default background-color of the task rows inside the Timeline.
• --smart-gantt-chart-timeline-column-color - Determines the background-color of the column separating lines inside the Timeline.
• --smart-gantt-chart-timeline-column-border-width - Determines the width of the column seoarating lines inside the Timeline.
• --smart-gantt-chart-timeline-row-border-width - Determines the default width of the row separating lines inside the Timeline.
• --smart-gantt-chart-timeline-header-row-border-width - Determines the default width of the header of the Timeline.
• --smart-gantt-chart-timeline-task-background-color - Determines the background color of the tasks(rows) inside the Timeline.
• --smart-gantt-chart-timeline-task-connection-feedback-color - 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-width - 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-style - Determines the style of the feedback that is shows when creating a connection between tasks inside the Timeline.
• --smart-gantt-chart-timeline-task-connection-color - Determines the color of the connections between Tasks inside the Timeline.
• --smart-gantt-chart-timeline-task-connection-color-hover - Determines the color on hover of the connections between Tasks inside the Timeline.
• --smart-gantt-chart-timeline-task-connection-width - Determines the width of the connections between the tasks inside the Timeline.
• --smart-gantt-chart-timeline-task-connection-style - Determines the style of the connections between the tasks inside the Timeline.
• --smart-gantt-chart-timeline-task-connection-arrow-type: - Determines the border type of the arrow of the connections between Tasks inside the Timeline.
• --smart-gantt-chart-timeline-task-connection-arrow-width - Determines the width of the arrow of the connections between Tasks inside the Timeline.
• --smart-gantt-chart-timeline-task-resize-indicator-width - Determines the defualt width of the resize indicator of the Task bars inside the Timeline.
• --smart-gantt-chart-timeline-task-resize-indicator-color - Determines the background-color of the resize indicators of the Task bars insinde the Timeline.
• --smart-gantt-chart-timeline-task-resize-indicator-border-color - Determines the border-color of the resize indicator of the Task bars inside the Timeline.
• --smart-gantt-chart-timeline-task-progress-thumb-size - Determines the size of the thumb controlling the progress of a Task inside the Timeline.
• --smart-gantt-chart-timeline-header-cell-color - Determines the default border-color of the horizontal/vertical lines inside the header.
• --smart-gantt-chart-timeline-header-background - Determines the default bakground-color of the cells inside the Header.
• --smart-gantt-chart-timeline-header-color - Determines the color of the text inside the Header.
• --smart-gantt-chart-timeline-cell-size - Determines the default width of the cells inside the Timeline. By default it's set to 'auto'.
• --smart-gantt-chart-timeline-cell-min-size - Determines the default min-width of the cells inside the Timeline.
• --smart-gantt-chart-timeline-task-min-width - Determines the default min-width of the Tasks insinde the Timeline. Not applicable to Milestone tasks.
• --smart-gantt-chart-timeline-weekend-color - Determines the default background color of the 'weekend' cells insinde the Timeline.
• --smart-gantt-chart-timeline-nonworking-color - Determines the default background-color of the nonworking days/hours inside the Timeline.
• --smart-gantt-chart-task-popup-window-default-width - Determines the width of the task editing popup windows of the element.
• --smart-gantt-chart-connection-popup-window-default-width - Determines the width of the connection editing popup windows of the element.
• --smart-gantt-chart-confirm-popup-window-default-width - Determines the width of the confirm popup window of the element.
• --smart-gantt-chart-popup-window-header-height - Determines the height of the header of the popup windows inside the element.
• --smart-gantt-chart-popup-window-footer-height - Determines the height of the footer of the popup windows insinde the element.

The following CSS selectors can be used to style the Gantt Chart:

• smart-gantt-chart - the element itself. Can be used to set width and height for the whole element.
  • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
    • smart-splitter - a smartSplitter element that splits the Timeline and the Task Tree.
      • .smart-task-tree-splitter-item - a smartSplitterItem used to store the Splitter for the Task Tree columns.
        • .smart-task-tree-splitter - a smartSplitter element that holds the Task Tree and it's columns.
          • smart-splitter-item - a smartSplitterItem element that contains each Task Tree column.
            • .smart-task-tree-header - The header of each column.
            • .smart-task-tree-content - The content of each column.
              • smartTree - a smartTree element. Always the first column inside the Task Tree.
                • .smart-task-label-container - Contains the label of each Task inside the Task Tree.
      • .smart-timeline-splitter-item - a smartSplitterItem element that holds the Timeline.
        • .smart-timeline - a DIV elements that holds the Timeline.
          • .smart-timeline-container - a inner container for the Timeline.
            • .smart-timeline-header - a header for the Timeline. It's devided in two sections.
              • .smart-timeline-view-details - the first header section. Shows a more general view of the displayed date & time.
                • .smart-timeline-view-cell - contains the a text label describing a certain date/time of the Timeline.
              • .smart-timeline-view-cells - the seconds header section. Shows a more accurate date/time view of the timeline.
                • .smart-timeline-view-cell - contains the a text label describing a certain date/time of the Timeline.
            • .smart-timeline-content - a header for the Timeline.
              • .smart-timeline-cells-container - contains the rows for each Task inside the Timeline.
                • .smart-timeline-task-cell - a row inside the Timeline that contains a Task.
              • .smart-timeline-connections-container - contains the connections between tasks inside the Timeline.
                • .smart-task-connection - a connection line.
              • .smart-timeline-tasks-container - contains the rows for each Task inside the Timeline.
                • .smart-timeline-task - the Task Bar of a Task inside the Timeline.
                  • .smart-task-container a container for the Timeline Task components.
                    • .smart-task-connection-point - the connection points that are used to connect a task. There are two of them. One with class 'start' and another with class 'end'.
                    • .smart-timeline-task-fill - the fill of the Task Bar.
                      • .smart-timeline-task-progress - the progress fill that shows the progress of the task.
                        • .smart-timeline-task-progress-thumb - a draggable thumb for the progress.
                    • .smart-timeline-task-label- the label of the Task Bar.
            • .smart-timeline-animation-container - a container used exclusively for animation purposes during collapse/expand of Project tasks.
          • .smart-timeline-scroll-bar - a smartScrollBar element used to scroll the Timeline vertically.
    • .smart-timeline-scroll-bar - a smartScrollBar that is used to scroll the Timeline horizontally.
• .smart-task-popup-window.smart-gantt-chart-popup-window - A smartWindow custom element that is used to edit the tasks and connections inside the element. It is created and destroyed dynamically by the GanttChart.

Demo

<style>
       smart-gantt-chart {
            --smart-gantt-chart-timeline-task-background-color: white;
            --smart-gantt-chart-task-default-height: 40px;
            --smart-gantt-chart-default-width: 1500px;
            --smart-gantt-chart-default-height: 400px;
            --smart-gantt-chart-project-default-color: #38a238;
            --smart-gantt-chart-project-progress-default-color: #008000;
            --smart-gantt-chart-task-default-color: #6495ed;
            --smart-gantt-chart-task-progress-default-color: #2d75f5;
            --smart-gantt-chart-task-label-color: white;
        }
</style>