Quickstart

This page describes how to start with the SVAR Svelte Gantt component in your Svelte application.

Step 1. Create and initialize the Gantt chart

Once the package is installed, import the Gantt component into your project:

<script>   
  import { Gantt } from "@svar-ui/svelte-gantt";
</script>

Initialize Gantt. tasks, links, scales, columns are the main Gantt elements but they are not required for the initialization stage. The example below will create an empty chart with the timescale and the area for tasks tree:

<script>   
  import { Gantt } from "@svar-ui/svelte-gantt";
</script>

<Gantt />

The next example shows how to create a simple chart with one summary task and one task in it, and two separate tasks and one dependency link between them. The minimum scales unit is "day". You do not need to add the columns array for the grid area, four columns will be displayed by default: "Task name", "Start Date", "Duration", and the action button for adding tasks.

<script>
  import { Gantt } from "@svar-ui/svelte-gantt";

  const tasks = [
   {
    id: 20,
    text: "New Task",
    start: new Date(2024, 5, 11),
    end: new Date(2024, 6, 12),
    duration: 1,
    progress: 2,
    type: "task",
    lazy: false,
   },
   {
    id: 47,
    text: "[1] Master project",
    start: new Date(2024, 5, 12),
    end: new Date(2024, 7, 12),
    duration: 8,
    progress: 0,
    parent: 0,
    type: "summary",
   },
   {
    id: 22,
    text: "Task",
    start: new Date(2024, 7, 11),
    end: new Date(2024, 8, 12),
    duration: 8,
    progress: 0,
    parent: 47,
    type: "task",
   },
   {
    id: 21,
    text: "New Task 2",
    start: new Date(2024, 7, 10),
    end: new Date(2024, 8, 12),
    duration: 3,
    progress: 0,
    type: "task",
    lazy: false,
   },
  ];

  const links = [{ id: 1, source: 20, target: 21, type: "e2e" }];

  const scales = [
    { unit: "month", step: 1, format: "%F %Y" },
    { unit: "day", step: 1, format: "%j" },
  ];
</script>

<Gantt {tasks} {links} {scales} />

More instructions about loading data you can see here Loading data.

Step 2. Apply a theme

To add look and feel to the application, import one of the predefined themes, which will also make all elements display correctly:

• Willow
• WillowDark

Apply the desired theme by wrapping Gantt into the required theme tag:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/svelte-gantt";  

  const data = getData();

  import { Willow } from "@svar-ui/svelte-gantt"; //import theme

</script>

<Willow>
  <Gantt tasks={data.tasks} />
</Willow>

What's next

Now you can dive deeper into the Gantt API and get down to configuring it to your needs:

• Timeline — configure timescale, zoom, markers, and cell styles
• Grid — configure columns and header menu
• Tasks — manage task types, milestones, summaries, and customization
• Data operations — edit, filter, and sort tasks
• Scheduling — autoscheduling, critical path, baselines, and calendar
• Load & Save — load JSON data, import/export files, and save to backend
• UI / Layout — toolbar, context menu, and editor dialog
• Appearance — themes, styling, localization, fullscreen, and compact mode
• API — Gantt API methods, properties, and actions; component APIs and helpers