JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.css">
<script src="http://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js"></script>
<div id="gantt_here" style="width: 100%; height: 200px;">
</div>
JavaScript
var realDemoData = {
"data": [
{ "id": 1, "text": "Project", "type": "task", "open": true, "start_date": "01-04-2013 07:30:45", "duration": "10", "progress": 0.6, "parent": 0 },
{ "id": 2, "text": "task1", "type": "task", "start_date": "01-04-2013 07:30:50", "category": "Auto", "task_thread": 0, "duration": "60", "sD": 0.1, "parent": "1", "open": true, "complexity": "", "resource": "System Automation", "skill": ["Automation"], "location": "Auto", "awarenessTime": 0, "executionTime": 0.1, "communicationTime": 0, "billetTimes": [], "started": false, "variance": 0, "assignedBillet": 0, "busyUntil": 0 }
]
};
gantt.config.fit_tasks = true;
gantt.config.xml_date = "%d-%m-%Y %H:%i:%s";
gantt.config.duration_unit = "minute";
gantt.config.duration_step = 1; //new
gantt.config.time_step = 1;
gantt.config.min_duration = 1000; // 1000ms
gantt.config.scale_height = 60;
gantt.date.minute_start = function(date){
date.setSeconds(0);
date.setMilliseconds(0);
return date;
};
////////////////////////////////////////////////////////////////////////
// Columns displayed on left side of screen //
////////////////////////////////////////////////////////////////////////
gantt.config.scale_height = 60;
gantt.config.scale_unit = "hour";
gantt.config.round_dnd_dates = false;
gantt.config.date_scale = " %g %a";
gantt.config.subscales = [
{ unit: "minute", step: 1, date: "%g:%i %a" }
];
///////////////////////////////////////////////////
/*gantt.config.scale_height = 60;
gantt.config.scale_unit = "month";
gantt.config.round_dnd_dates = false;
gantt.config.date_scale = " %M";
gantt.config.subscales = [{ unit: "year", step: 1, date: "%Y" }];*/
////////////////////////////////////////////
gantt.init("gantt_here");
gantt.parse(realDemoData);