SOURCE

// https://frappe.io/gantt
// https://bryntum.com/products/gantt/examples/

let tasks = [
  {
    id: '1',
    name: 'Redesign website',
    start: '2016-12-28',
    end: '2016-12-31',
    progress: 20
  },
  
]
let gantt = new Gantt("#gantt", tasks);

<script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.css">
<div id="gantt"></div>

html,body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #cccccc;
}
#gantt {
    height: 700px;
}