SVAR Logo
DemosLicensesContact
Get Started
 
 
 
 
 
 
 
 
Just released

High-Performance Vue Gantt Chart

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:

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 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, and other essential features for interactive timelines.

For more complex scheduling scenarios, SVAR Vue Gantt PRO comes with critical path analysis, working-day calendars, baselines, auto-scheduling, rollups, data export, and more.

Learn About PRO
##
Star on GitHub

Try Live Demo

See what SVAR Vue Gantt can do: interact with a live demo below. 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 Enterprise Apps

The PRO Edition of SVAR Vue Gantt chart offers powerful features and scheduling logic required for more complex, enterprise-level project management.

Pricing & Details Get Trial

pro

##

Working time calendar

With SVAR Vue Gantt PRO, you can define a global working calendar with custom schedules, exceptions, and non-working days. It controls how task durations, dates, and dependencies are calculated, ensuring accurate and realistic project timelines.

pro

##

Critical path, slack, and baselines

For complex projects, critical path analysis and slack visualization help you track deadlines, identify risks, and spot bottlenecks early. Baselines let you compare planned and actual timelines to quickly detect shifts and take action.

pro

##

Export to Excel, PDF, and MS Project

SVAR Vue Gantt PRO supports export to PDF, PNG, Excel, and MS Project XML via a server-side export service. It also enables client-side import and export of MS Project XML for easy integration with existing project management tools.

pro

##

Split tasks

When tasks need to be represented in multiple segments, you can visually split them on the timeline while keeping them in a single row. This is useful for interrupted or phased work, such as construction projects or staged delivery plans.

pro

##

Auto-scheduling for task dependencies

The PRO Edition of SVAR Vue Gantt automatically maintains valid project schedules based on task dependencies. When enabled, changes to a task's start, end, or duration trigger cascading updates, shifting dependent tasks forward according to end-to-start relationships. This helps keep project timelines consistent and reduces manual rescheduling effort.

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.6

April 28, 2026

What's new

Interactive timeline

Context menu & toolbar

Sorting & filtering

Critical path, baselines (PRO)

Read More

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 critical path analysis, slack visualization, baselines, rollups, and auto-scheduling. 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 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
Advanced scheduling 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:
  • Critical path analysis and slack
  • Baselines and markers
  • Working-day and non-linear calendars
  • Auto-scheduling
  • Import/export to MS Project (XML)
  • Export to PDF, PNG, and Excel
  • Rollups, split tasks, and unscheduled tasks
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 import from and export to MS Project (XML format), making it easier to integrate with existing project management workflows.
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.

Resources

icon

How to start guide

Quick start

icon

Community forum

Visit forum

icon

GitHub repository

Visit github