Vue

The fastest Vue Gantt chart

The Bryntum Vue Gantt is a super-fast and fully customizable Gantt chart component for your Vue application.

Install Apache Configure Ports Configure Firewall Configure Ports Availability

Clear and concise Vue Gantt chart documentation

Efficient and lightweight Vue wrappers

Use our Vue wrappers for advanced Gantt chart functionality using familiar Vue syntax. 

Wrappers define a bryntum-gantt Vue component you can use the same way as other Vue components, giving you full access to Bryntum API widget class configs, properties, events, and features.


<template>
    <bryntum-gantt
        ref="gantt"
        tooltip="ganttConfig.tooltip"
        v-bind="ganttConfig"
        @click="onClick"
    />
</template>

Dynamic rendering with Vue template syntax 

Render compelling and interactive elements within columns and cells using Vue components in the Bryntum Vue Gantt chart. Easily use Vue HTML-based template syntax in components and keep rendering logic and markup in sync.

Vue Gantt chart timeline code example

 

The following code example shows the setup for a Vue Gantt chart project with task dependencies in the App.vue file.

<template>
    <div>
        <bryntum-gantt-project-model
            ref="project"
            v-bind="projectConfig"
            :tasks="tasks"
            :dependencies="dependencies"
        />
        <bryntum-gantt
            ref="gantt"
            v-bind="ganttConfig"
        />
    </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';

import {
    BryntumGanttProjectModel,
    BryntumGantt
} from '@bryntum/gantt-vue-3';

import { useGanttConfig, useProjectConfig } from '@/AppConfig';

export default {
    name : 'App',

    components : {
        BryntumGanttProjectModel,
        BryntumGantt
    },

    setup() {
        const gantt = ref(null);
        const project = ref(null);

        const ganttConfig = reactive(useGanttConfig());
        const projectConfig = reactive(useProjectConfig());

        const tasks = ref(null);
        const dependencies = ref(null);

        tasks.value = [
            {
                id       : 1,
                name     : 'Write docs',
                expanded : true,
                children : [
                    { id : 6, name : 'Proof-read docs', startDate : '2022-01-02', endDate : '2022-01-09' },
                    { id : 3, name : 'Release docs', startDate : '2022-01-09', endDate : '2022-01-10' }
                ]
            }
        ];
        dependencies.value = [
            { fromTask : 6, toTask : 3 }
        ];

        onMounted(() => {
            gantt.value.instance.value.project = project.value.instance.value;
        });

        return {
            project,
            gantt,
            projectConfig,
            ganttConfig,
            tasks,
            dependencies
        };
    }
};

</script>

<style lang="scss">
@import './App.scss';
</style>

Seamless data binding

Gantt charts are data intensive. Bryntum Vue Gantt data management options allow you to easily integrate and synchronize data. Choose between using the Bryntum data store or binding data to the Vue component or project.

Customizable Vue Gantt chart Task Editor

The Bryntum Vue Gantt has a built-in Task Editor that you can easily extend and customize. Change the visible fields and add your own custom tabs.

Task constraints of the Gantt chart for Vue component

Easily add task constraints in the Bryntum Vue Gantt chart for granular control over how tasks are scheduled.

  • Start no earlier than
  • Start no later than
  • Finish no earlier than
  • Finish no later than
  • Must start on
  • Must finish on

Render custom HTML

Render custom HTML in the Bryntum Vue Gantt taskbar element for an enhanced, elegant interface. Include a customization menu to toggle UI settings during runtime and personalize the user experience.

Best-in-class Vue scheduling engine

The Bryntum Vue Gantt engine provides asynchronous scheduling of any number of tasks by taking task dependencies, constraints, and scheduling modes into account. The Bryntum Vue Gantt engine is implemented independently from the DOM and can also be run on a node server.

Animated redraws

When you move a task, the result is animated into place so you can easily follow how an update affects other tasks.

Features of the Vue Gantt chart component

Apply the Vue control wrapper to your Bryntum Gantt for additional features. Bryntum Vue Gantt chart features include the task editor, configurable tooltips, and resource assignment editor.

The Bryntum documentation describes all the technical details of the Bryntum Vue Gantt chart.

Try it yourself!

Trusted by the world’s leading companies

Ready to get started?