Complete API reference for the RSL Gantt Chart component
Add data-rsl-gantt to any container with a table inside:
<div data-rsl-gantt data-gantt-zoom="week">
<table>
<tbody>
<tr data-task-id="1">
<td>Task Name</td>
<td>2024-12-01</td>
<td>2024-12-10</td>
<td>50</td>
</tr>
</tbody>
</table>
</div>| Attribute | Values | Default | Description |
|---|---|---|---|
data-rsl-gantt | - | - | Required. Enables Gantt chart |
data-gantt-zoom | day|week|month|quarter|year | week | Initial zoom level |
data-gantt-editable | true|false | true | Allow drag/resize |
data-gantt-show-progress | true|false | true | Show progress bars |
data-gantt-show-today | true|false | true | Show today line |
data-gantt-show-dependencies | true|false | true | Show dependency arrows |
data-gantt-show-task-list | true|false | true | Show left panel |
data-gantt-exportable | true|false | true | Show export button |
data-gantt-row-height | Number (px) | 40 | Height of each row |
| Attribute | Values | Description |
|---|---|---|
data-task-id | String | Unique task identifier |
data-task-type | task|milestone|group | Task type (default: task) |
data-task-parent | Task ID | Parent task for hierarchy |
data-task-depends | Comma-separated IDs | Dependency relationships |
data-task-color | blue|green|purple|orange|teal|pink|red | Bar color |
data-task-progress | 0-100 | Completion percentage |
data-task-assignee | String | Person assigned |
const gantt = RSL.Gantt.create('#container', {
zoom: 'week',
editable: true,
showProgress: true,
tasks: [
{ id: '1', name: 'Task 1', start: '2024-12-01', end: '2024-12-10', progress: 50 },
{ id: '2', name: 'Milestone', start: '2024-12-15', type: 'milestone', depends: ['1'] }
],
onTaskUpdate: (task) => console.log('Updated:', task),
onTaskClick: (task) => console.log('Clicked:', task)
});| Method | Parameters | Returns | Description |
|---|---|---|---|
setZoom(level) | day|week|month|quarter|year | - | Change zoom level |
getZoom() | - | String | Get current zoom |
scrollToToday() | - | - | Scroll to today's date |
scrollToTask(id) | Task ID | - | Scroll to a task |
addTask(data) | Task object | Task | Add a new task |
updateTask(id, data) | ID, updates | Task | Update a task |
deleteTask(id) | Task ID | Boolean | Delete a task |
getTasks() | - | Array | Get all tasks |
getTask(id) | Task ID | Task | Get single task |
getSelectedTasks() | - | Array | Get selected tasks |
expandAll() | - | - | Expand all groups |
collapseAll() | - | - | Collapse all groups |
refresh() | - | - | Re-render chart |
destroy() | - | - | Remove instance |
| Event | Detail | Description |
|---|---|---|
rsl-gantt:init | { instance } | Chart initialized |
rsl-gantt:taskCreate | { task } | Task added |
rsl-gantt:taskUpdate | { task } | Task modified |
rsl-gantt:taskDelete | { task } | Task removed |
rsl-gantt:zoomChange | { zoom } | Zoom level changed |