Hi there,
In Dojo chose Kendo UI 2020 R1 SP2 library and created a Gantt chart with one milestone and task.
Milestone's time is 9 AM but it does not line up exactly with the time block at the top of the Gantt chart (looks like 9:01 AM).
Also, tried with other libraries, the result is the same.
Example here: https://dojo.telerik.com/iPuzEcaQ
Please find the screenshot attached.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jszip.min.js"></script>
</head>
<body>
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 9:00")
}]
});
var gantt = $("#gantt").data("kendoGantt");
gantt.dataSource.add({
parentId: null,
start: new Date("2014/6/17 10:00"),
end: new Date("2014/6/17 11:00"),
title: "New Task"
});
</script>
</body>
</html>