Installation and initialization

This Gantt widget is designed to be incorporated into your project in Svelte.

Installing svelte-gantt

To install the trial version of the Svelte Gantt widget, you need to request access to SVAR npm registry by filling in the form here, and then run the following command to install:

//npm
npm install @wx/trial-svelte-gantt

//yarn
yarn add @wx/trial-svelte-gantt

To install commercial license, run:

//npm
npm install @wx/svelte-gantt

//yarn
yarn add @wx/svelte-gantt

Initializing

Import the Gantt component.

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

<Gantt />

Initialize Gantt. Such properties as tasks, links, scales, columns are core elements of the Gantt chart 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 "@wx/svelte-gantt";
</script>

<Gantt />

The next example shows how to create a simple chart one summary task and one task in it, and two separate tasks and one dependency link between them. The minimum scales unit is "day".

<script>
  import { Gantt } from "@wx/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: "MMMM yyy" },
    { unit: "day", step: 1, format: "d" },
  ];
</script>

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

Now you can move forward and load data. See Loading data.