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

For more complex scheduling scenarios, SVAR Vue Gantt PRO offers critical path analysis, working-day calendars, baselines, auto-scheduling, resource planning, 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 Complex Projects

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

Pricing & Details Get Trial

pro

##

Working time calendar

You can define a working calendar with custom schedules, exceptions, and non-working days — controlling how durations, dates, and dependencies are calculated across the entire project. Individual calendars can be assigned to specific tasks or resources.

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

some alt text

Task grouping

Restructure the project view on the fly by grouping tasks by resource, status, priority, or any custom field. Use task grouping as a practical way to answer questions like "what is this team working on this week" or "what are the tasks with high priority".

pro

some alt text

Resource planning & workload

SVAR Vue Gantt PRO brings resource management directly into the chart. Assign team members to tasks and add the workload view to see day-by-day allocation across the project — with overloaded periods highlighted visually with color.

pro

##

Export to Excel, PDF, and MS Project

The PRO Edition of our Vue Gantt chart 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

SVAR Vue Gantt chart 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. Summary tasks can also roll up progress from child tasks and convert automatically as the hierarchy grows.

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

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