Options

width: Number/String

The width of graph container

height: Number/String

The height of graph container

canvasStyle: String

The css styles for canvas root container

viewMode: ViewMode

View mode for the gantt chart display

Available Options:

• week
• day
• month
• quarter
• year

arrowColor: String

Color for the dependency arrows

rowHeight: Number

Height for timeline row

rowBackgroundColors: Array

Alternate row colors array

barBackgroundColor: String

Background color for timeline bar

barBorderRadius: String

Border radius for timeline bar

barMargin: Number

Top and bottom margin for timeline bar

barTextColor: String

Text color for timeline bar

enableToolbar: Boolean

Enable/disable graph toolbar

enableResize: Boolean

Enable/disable gantt sidebar resize

enableExport: Boolean

Enable/disable gantt export options

enableTaskDrag: Boolean

Enable/disable task drag functionality

enableTaskEdit: Boolean

Enable/disable task editing functionality

enableTaskResize: Boolean

Enable/disable task resize functionality

headerBackground: String

Background color for header

inputDateFormat: String

Input date format

tasksContainerWidth: Number

Task sidebar container width

tooltipId: String

The tooltip HTML element id

tooltipTemplate: Function

The HTML template function for tooltip

Example

tooltipTemplate(task, dateFormat) {
    const items = [
      `

        Name:
        ${task.name}
      
      `,
    ];

    if (task.type === TaskType.Task) {
      items.push(`
        

          Start:
          ${getTaskTextByColumn(task, ColumnKey.StartTime, '')}
        
        

          End:
          ${getTaskTextByColumn(task, ColumnKey.EndTime, dateFormat)}
        
        

          Duration:
          ${getTaskTextByColumn(task, ColumnKey.Duration, dateFormat)}
        
        

          Progress:
          ${task.progress}%
        
      `);
    } else if (task.type === TaskType.Milestone) {
      items.push(`
        

          Date:
          ${getTaskTextByColumn(task, ColumnKey.StartTime, '')}
        
      `);
    }

    if (task.dependency) {
      items.push(`
        

          Dependency:
          ${task.dependency}
        
      `);
    }

    return `
      

        ${items.join('')}
      
    `;
  },

tooltipBorderColor: String

The border color of tooltip

tooltipBGColor: String

The background color of tooltip

fontSize: String

The size of font of nodes

fontFamily: String

The font family of nodes

fontWeight: String

The font weight of nodes

fontColor: String

The font color of nodes

annotationBgColor: String

The background color of annotation

annotationBorderColor: String

The border color of annotation

annotationBorderDashArray: Array

The border dash array of annotation

annotationBorderWidth: Number

The border width of annotation

annotationOrientation: Orientation

The orientation of annotation

annotationTextColor: String

The text color of annotation

series: Array

Array of task objects for gantt chart data

series: [
      {
        id: 'a',
        startTime: '10-11-2024',
        endTime: '11-01-2024',
        name: 'task 1',
        progress: 65,
      },
      {
        id: '5',
        startTime: '10-11-2024',
        endTime: '10-26-2024',
        name: 'subtask 1.1',
        parentId: 'a',
        progress: 65,
      },
    ],