Skip to main content

Gantt Overview

SVAR Svelte Gantt is a ready-to-use component that integrates natively into Svelte applications and offers rich functionality for project management. It helps users plan, monitor, and track project progress through clean, visual timelines. Users can add, edit, and delete numerous tasks, set different types of tasks and add dependencies between them. The component also provides TypeScript support with built-in type definitions.

License: GNU GPLv3 – contact us if you'd like to use SVAR Svelte Gantt in a non–open source project.

The image below illustrates a Gantt chart with some customizations made using the available API:

Good look

Key features​

Here is the list of the most required features supported by SVAR Svelte Gantt:

Project planning​

  • Summary tasks and milestones
  • Task dependencies: end-to-start, start-to-start, end-to-end, start-to-end
  • Hierarchical view of sub-tasks

Task management​

  • Dragging and resizing tasks on the chart
  • Dragging tasks to reorder
  • Adding tasks via an action column
  • Editing task dependencies and progress on the chart
  • Editing tasks using inline editors or standalone form
  • Context menu and toolbar with common operations
  • Sorting tasks by clicking column headers

User experience​

  • Task tooltips
  • Zooming (default and custom levels)
  • Hotkeys
  • Resizing, hiding and showing Gantt parts (chart, grid)
  • Compact mode for smaller screens

Configuration​

  • Setting scale width, height, borders
  • Custom scale lines and units
  • Fixed or flexible scale boundaries
  • Duration units: hour, day
  • Length units from minute to year
  • Highlighting weekends and holidays
  • Templates for grid cells and task bars
  • Fullscreen mode
  • Readonly mode
  • Light and dark themes
  • Styling with CSS variables
  • Localization

Data handling & performance​

  • Fast performance with large data sets
  • Dynamic loading of sub-tasks
  • API to listen, intercept and execute data operations
  • RestDataProvider for backend data binding

Next steps​