Simply-gantt NPM

Simply Gantt

Simply Gantt is a ES6 Library to Visualize Gantt chart, it is based on Web Components so it will work on all the new browsers that support web components

<div id="gantt"></div>


import {simplyGantt} from "./lib/es6/index"

const visualizationConfig = {
    layout: {
        type: 'month',
        activity: {
            style:{
                background: 'blue',
                height:'5px'
            }
        },
        event: {
            type: 'triangle',
            style:{
                background: 'black',
                color: 'yellow'
            }
        }
    },
    data : {
        tasks: [{id:1, name: "Task 1"}, {id:2, name: "Task 2"}, {id:3, name: "Task 3"}, {id:4, name: "Task 4"}],
        activities: [
            { id: "j1", start: new Date("2021/6/2"), end: new Date("2021/10/4"), task: 1, style:{ background: 'red' }},
            { id: "j2", start: new Date("2021/6/4"), end: new Date("2021/6/13"), task: 2 },
            { id: "j3", start: new Date("2021/6/13"), end: new Date("2021/6/21"), task: 3 },
            { id: "j4", start: new Date("2022/6/10"), end: new Date("2022/7/30"), task: 3 },
        ],
        events: [
            { id: "j1", date: new Date("2021/6/3"),type: 'circle', task: 1 },
            { id: "j1", date: new Date("2021/6/1"),type: 'triangle', task: 1, style:{ background: "red"}},
            { id: "j2", date: new Date("2021/6/4"), task: 2 },
            { id: "j3", date: new Date("2021/6/13"), task: 3 },
            { id: "j4", date: new Date("2022/6/10"), task: 3 }
        ]
    }
}

simplyGantt("gantt").initializeGanttVisualization(visualizationConfig);