Bryntum Gantt - A modern & performant Gantt chart component for Vue JS

After nearly three years of development, we are really happy to announce a brand new Gantt chart component made with ES6+ and TypeScript which integrates seamlessly with Vue (integration demos included). There is extensive API documentation and plenty of guides to get you started. Would love to hear your feedback about which features you would like us to add to make your Vue apps better.

Read more in our 1.0 release blog post

Live examples

API Docs

theme_stockholm

Basic code sample of adding the Gantt component to a Vue app:

<template>
    <div class="panel"></div>
</template>

<script>
    import { 
        Gantt, 
        Panel,
        IdHelper,
        Menu,
        WidgetHelper,
        DateHelper,
        Popup,
        Toast,
        EffectResolutionResult 
    } from 'bryntum-gantt';
    import ganttConfig from './gantt/ganttConfig.js';

    export default {
        name: 'gantt-panel',
        
        data() {
            return {
                gantt : null,
                panel : null
            }
        }, // eo function data
        
        methods : {
            getPanelConfig(gantt) {
                return {
                    widgets : [
                        {
                            project : new ProjectModel({
                                // Let the Project know we want to use our own Task model with custom fields / methods
                                eventModelClass : Task,
                                transport       : {
                                    load : {
                                        url : 'datasets/launch-saas.json'
                                    }
                                }
                            }),

                            columns : [
                                { type : 'wbs' },
                                { type : 'name', width : 250 },
                                { type : 'startdate' },
                                { type : 'duration' },
                                { type : 'percentdone', width : 70 },
                                { type : 'resourceavatar', width : 120 },
                                {
                                    text  : 'Predecessors',
                                    type  : 'predecessor',
                                    width : 112
                                },
                                {
                                    text  : 'Successors',
                                    type  : 'successor',
                                    width : 112
                                },
                                { type : 'schedulingmodecolumn' },
                                { type : 'calendar' },
                                { type : 'percentdonepie', text : '%', width : 70 },
                                { type : 'constrainttype' },
                                { type : 'constraintdate' },
                                { type : 'statuscolumn' },
                                {
                                    type  : 'date',
                                    text  : 'Deadline',
                                    field : 'deadline'
                                },
                                { type : 'addnew' }
                            ], // eo columns

                            subGridConfigs : {
                                locked : {
                                    flex : 1
                                },
                                normal : {
                                    flex : 2
                                }
                            },
                            columnLines : false,

                            features : {
                                filter         : true,
                                nonWorkingTime : true,
                                timeRanges     : {
                                    showHeaderElements  : true,
                                    showCurrentTimeLine : true
                                },
                                labels : {
                                    left : {
                                        field  : 'name',
                                        editor : {
                                            type : 'textfield'
                                        }
                                    }
                                }
                            }

                        }
                    ]
                     // eo tbar
                } // eo panel config
            } // eo function getPanelConfig
        }, // eo methods

        mounted() {
            const
                gantt   = this.gantt    = new Gantt(ganttConfig),
                project = gantt.project,
                panel   = this.panel    = new Panel(this.getPanelConfig(gantt));

            // render panel and its children: toolbar and gantt
            panel.render(this.$el);
        } // eo function mounted()

    } // export the Panel component

</script>