SVAR Logo
DemosLicensesContact
Get Started
 
 
 
 
 
 
 
 
Latest update: v2.8

Vue Gantt Chart

for task & resource planning

SVAR Vue Gantt is a Vue 3 component for interactive project scheduling. Plan, manage, and track tasks in a comprehensive Gantt chart — from simple timelines to large-scale projects with thousands of tasks.

Also available for:
Also available for:

Key Features of SVAR Vue Gantt Chart

Vue-Native Architecture

Built natively in Vue 3, SVAR Vue Gantt is not a wrapper around a JS library. This means you get real Vue components, reactive data binding, and seamless integration with your existing Vue app - without fighting abstraction layers or workarounds. 
<script>
  import { Gantt, Willow } from "@svar-ui/vue-gantt";


  const tasks = [
    { id: 1, text: "Project planning",  type: "summary", open: true },
    { id: 2, text: "Marketing analysis", start: new Date(2026, 3, 2), duration: 3,  parent: 1 },
    { id: 3, text: "Discussions", start: new Date(2026, 3, 5), duration: 2,  parent: 1 }
  ];


  const links = [
    { id: 1, source: 2, target: 3, type: "e2s" }
  ];
</script>


<template>
   <Willow>
    <Gantt :tasks="tasks" :links="links" />
   </Willow>
</template>

Easy to start with

Effortlessly add a Gantt chart to your webpage in minutes. Detailed documentation, comprehensive API references, and community forum ensure a quick integration process with assistance at every stage.
##

Highly customizable

Adjust each aspect of SVAR Vue Gantt to your needs, using its developer-friendly, Vue-native API and CSS styling. Customize time scales, task bars, grid columns, edit form, and more to match your project.
##

Interactive, drag-and-drop interface

With drag-and-drop support, you can reorder tasks in the list or manage tasks and dependencies on the timeline. Our Vue Gantt chart component also includes built-in toolbar, context menu, zooming, tasks sorting and filtering.
##

Fast, even with big datasets

Powered by an optimized rendering engine and dynamic loading, SVAR Vue Gantt delivers excellent performance. Whether you're navigating through extensive datasets or editing tasks on the fly, the component delivers a smooth UX. See the demo with 10,000 tasks.

rocket

Free core and advanced PRO edition

SVAR Vue Gantt comes with an open-source core licensed under MIT. It supports tasks and dependencies management, custom time scales, sorting, filtering, real-time updates, and other essential features for interactive timelines.

For more complex scheduling scenarios, SVAR Vue Gantt PRO offers auto-scheduling, critical path analysis, working-time calendars, resource planning, baselines, data export, and more.

Learn About PRO
##
Star on GitHub

Works with:

Claude Code Claude Code
Cursor Cursor
Codex CLI Codex CLI
Antigravity Antigravity
ChatGPT ChatGPT
GitHub Copilot GitHub Copilot

Ready for AI-Assisted Development

SVAR offers an AI integration kit — an MCP server, skills, and context packs — to help your coding agent write correct SVAR Vue Gantt code on the first try.

AI Tools for Vue Gantt Connect the MCP server

Try SVAR Vue Gantt Live

See what SVAR Vue Gantt can do: drag tasks on the timeline, manage dependencies, and double-click the task to call edit form. Try the PRO features: critical path, auto-scheduling, non-linear calendar, and split tasks. For the best experience, view this page on a desktop device to enjoy the live demo, as it looks great on larger screens!

Open Fullscreen Demo

SVAR Vue Gantt PRO for Complex Projects

The PRO Edition of SVAR Vue Gantt chart adds resource planning, advanced scheduling, project tracking, and other capabilities required for complex, enterprise-level project management.

Pricing & Details Get Trial

pro

Vue Gantt automatic scheduling for task dependencies

Auto-scheduling for task dependencies

SVAR Vue Gantt PRO supports auto-scheduling across all four dependency types (FS, SS, FF, SF), including lag. When a linked task changes, the schedule keeps dependent dates aligned. Committed tasks can be locked as manual, while cancelled work can be marked inactive.

pro

Vue Gantt chart with task constraints and deadlines

Constraints & deadlines

Six constraint types let users plan around delivery windows and keep work within project deadlines. The conflict list explains why a date can’t be met and suggests a fix, while deadline flags warn users when tasks run late.

pro

Vue Gantt resource planning and workload management

Resource planning & workload

Resource planning is easy with SVAR Vue Gantt PRO. The load chart and histogram show day-by-day allocation with over-allocations highlighted, teams can rebalance work early. Assign team members by dragging them from a resource list or the resource load view.

pro

Vue Gantt resource-driven scheduling

Working time calendar

Define working-time calendars with custom schedules, exceptions, and non-working days for tasks and resources. Resource-driven scheduling then follows the calendars of assigned people, accounting for days off and part-time hours.

pro

Vue Gantt chart export PDF, Excel and MS Project

Export & import Gantt data

Export tasks, resources and assignments to PDF, PNG, Excel and MS Project XML via the server-side export export service, and import existing MS Project files without re-entering the plan.

pro

Vue Gantt baselines and progress tracking

Critical path, baselines & progress tracking

Critical path analysis and slack visualization help you catch risks and bottlenecks early. Baselines compare planned and actual timelines, the progress line gives a status check on any date, and the S-curve plots planned, actual, and baseline progress.

Feature-rich SVAR Vue Gantt chart for project management

Feature-complete Vue Gantt

In addition to the features above, SVAR Vue Gantt PRO extends the visual timeline with split tasks, task grouping, WBS codes, and rollups, helping teams manage complex project structures.

A sub-grid panel for task details, undo/redo support, and smooth interaction with thousands of linked tasks make the PRO Edition suitable for large-scale project management applications.

Compare Open-Source vs PRO

Get Gantt PRO Trial

Fill out the form to receive a free 30-day trial of SVAR Vue Gantt PRO. Once we receive your request, we'll send you detailed instructions on how to access the trial version.

  • Fully functional trial
  • 30-day trial period
  • SVAR watermark

Read the full Trial License Agreement

Latest Updates

Version 2.8

October 7, 2026

What's new

Auto-scheduling: FS, SS, FF, SF (PRO)

Constraints & deadlines (PRO)

Resource-driven scheduling (PRO)

Real-time updates

Read More

Version 2.7

June 4, 2026

What's new

Resource planning (PRO)

Task grouping (PRO)

Individual calendars (PRO)

Import from Excel/CSV

Read More

Version 2.6

April 28, 2026

What's new

Interactive timeline

Context menu & toolbar

Sorting & filtering

Critical path, baselines (PRO)

Read More

More on SVAR Vue Gantt in Our Blog

Read our blog
How To
17 min read

How to Build a Vue Gantt Chart for Project Timelines

Olga Ishina

Olga Ishina
Comparison
11 min read

Top Vue Gantt Chart Libraries in 2026

Marina Chernyuk

Marina Chernyuk
Release
6 min read

Introducing SVAR Vue Gantt: Interactive Project Scheduling for Vue 3

Olga Tashlikovich

Olga Tashlikovich
Guide
7 min read

Gantt Charts: When and Why to Use Them

Olga Tashlikovich

Olga Tashlikovich

Need help with integration?

Our team offers paid consulting and custom development services to help you make the most of SVAR Vue Gantt, from setup and feature customization to full web app development for your business needs.

Contact Us

Frequently Asked Questions

SVAR Vue Gantt chart is a UI component used to visualize project schedules in Vue applications. It helps you plan tasks, manage dependencies, and track progress over time in a drag-and-drop interface. Gantt charts are commonly used in project management tools, resource planning systems, and workflow dashboards. The PRO edition of SVAR Vue Gantt adds advanced scheduling logic, including auto-scheduling across all four dependency types, critical path, constraints and deadlines, baselines, progress line and S-curve, and resource planning. This makes it suitable for web and SaaS applications that require complex project management functionality.
Yes, SVAR Vue Gantt supports TypeScript and ships with full type definitions.
You can integrate SVAR Vue Gantt in a few steps:
  • Install the package: npm install @svar-ui/vue-gantt
  • Import the component into your Vue app
  • Initialize the Gantt chart with its basic configuration
  • Load task and dependency data
  • Customize look and feel of the Gantt chart to your needs
Helpful resources: Helpful resources: To try advanced features, request a free 30-day trial of SVAR Vue Gantt PRO.
The core of SVAR Vue Gantt chart is free and open-source under the MIT license. It includes essential features for building interactive timelines and managing tasks:
  • Task and dependency management
  • Drag-and-drop editing
  • Customizable timelines, scales, task edit form
  • Tasks sorting and filtering
  • In-cell editing in grid
  • Context menu & toolbar
  • Zooming
  • Keyboard support
  • Localization and real-time updates
Advanced scheduling, project tracking, and resource planning features are available in the PRO edition, which is distributed under commercial licenses See pricing →
The PRO edition extends the core Vue Gantt chart with advanced scheduling capabilities:
  • Auto-scheduling across four link types (FS, SS, FF, SF)
  • Critical path analysis and slack
  • Baselines and markers
  • Constraints and deadlines
  • Manual and inactive tasks
  • Working-time calendars and non-linear time scales
  • Rollups, split tasks, and unscheduled tasks
  • Progress line and S-curve
  • Resource load chart and histogram
  • Resource-driven scheduling
  • Sub-grid panel, and more
  • Import/export to MS Project (XML)
  • Export to PDF, PNG, and Excel
Compare editions and see prices →
SVAR Vue Gantt is a native Vue 3 component (not a wrapper), which makes it easier to integrate and customize using standard Vue patterns. It provides a clean, predictable API for building and extending timelines, UI, and behavior. Unlike many alternatives, it offers a lightweight, MIT-licensed core with essential features, while advanced scheduling capabilities are available in the optional PRO edition. The component is optimized for large datasets, with support for virtualization and dynamic data loading, ensuring smooth performance even with thousands of tasks. It also offers a modern, interactive UI with light and dark themes and is actively maintained.
Yes. The PRO Edition supports importing from and exporting to MS Project in XML format. Resources and assignments are included in the data exchange, so teams can move project plans between SVAR Gantt and compatible Microsoft Project workflows without losing task ownership information. This makes it easier to migrate existing plans, share schedules with users of MS Project, and preserve team allocation when exporting or importing project data.
Yes, the component can be connected to any backend. It includes a Go backend example and a RestDataProvider helper for loading, updating, and synchronizing task data, including batch operations. Real-time server updates allow several users to edit the same project and see each other's changes without refreshing or overwriting each other's work. The connection can recover automatically after a network interruption.

Resources

icon

How to start guide

Quick start

icon

Community forum

Visit forum

icon

GitHub repository

Visit github