diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js
index 0c01ab257..c8e138526 100644
--- a/src/diagrams/gantt/ganttDb.js
+++ b/src/diagrams/gantt/ganttDb.js
@@ -17,6 +17,9 @@ const tags = ['active', 'done', 'crit', 'milestone'];
 let funs = [];
 let inclusiveEndDates = false;
 
+// The serial order of the task in the script
+let lastOrder = 0;
+
 export const clear = function() {
   sections = [];
   tasks = [];
@@ -32,6 +35,7 @@ export const clear = function() {
   todayMarker = '';
   excludes = [];
   inclusiveEndDates = false;
+  lastOrder = 0;
 };
 
 export const setAxisFormat = function(txt) {
@@ -374,6 +378,9 @@ export const addTask = function(descr, data) {
   rawTask.done = taskInfo.done;
   rawTask.crit = taskInfo.crit;
   rawTask.milestone = taskInfo.milestone;
+  rawTask.order = lastOrder;
+
+  lastOrder++;
 
   const pos = rawTasks.push(rawTask);
 
diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js
index ad902bf20..99d0c5642 100644
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@@ -80,6 +80,23 @@ export const draw = function(text, id) {
 
   categories = checkUnique(categories);
 
+  function taskCompare(a, b) {
+    const taskA = a.startTime;
+    const taskB = b.startTime;
+  
+    let result = 0;
+    if (taskA > taskB) {
+      result = 1;
+    } else if (taskA < taskB) {
+      result = -1;
+    }
+    return result;
+  }
+
+  // Sort the task array using the above taskCompare() so that
+  // tasks are created based on their order of startTime
+  taskArray.sort(taskCompare);
+
   makeGant(taskArray, w, h);
   if (typeof conf.useWidth !== 'undefined') {
     elem.setAttribute('width', w);
@@ -119,7 +136,7 @@ export const draw = function(text, id) {
       .append('rect')
       .attr('x', 0)
       .attr('y', function(d, i) {
-        return i * theGap + theTopPad - 2;
+        return d.order * theGap + theTopPad - 2;
       })
       .attr('width', function() {
         return w - conf.rightPadding / 2;
@@ -160,7 +177,7 @@ export const draw = function(text, id) {
         return timeScale(d.startTime) + theSidePad;
       })
       .attr('y', function(d, i) {
-        return i * theGap + theTopPad;
+        return  d.order * theGap + theTopPad;
       })
       .attr('width', function(d) {
         if (d.milestone) {
@@ -263,7 +280,7 @@ export const draw = function(text, id) {
         }
       })
       .attr('y', function(d, i) {
-        return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;
+        return d.order * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;
       })
       .attr('text-height', theBarHeight)
       .attr('class', function(d) {
@@ -280,6 +297,7 @@ export const draw = function(text, id) {
         }
 
         let secNum = 0;
+        console.log(conf);
         for (let i = 0; i < categories.length; i++) {
           if (d.type === categories[i]) {
             secNum = i % conf.numberSectionStyles;